A crash course in the absolute basics of CSS-based design.

View this page's html file and css file

Some more text tricks.

Really, you'll find that I am increadibly bad with titles, but thats not the point. Here are a few more pointers that are just a little bit further along than that first bunch. Don't ask why, they aren't used as much, they are harder to understand, they hold the key to life. Whatever. Here we talk about nifty text decorations, font weight, transformers, alignment and indenting.

decorations - weight - transformations - alignment - indenting

To decorate or not to decorate.

By pulling the "text-decoration" characteristic you can define the target text to either be "underline" (give the text an underline), "overline" (put a line over the text), "strikethrough" (put a line through the text) or "none" (make sure the text has neither a line over, under or through it). We are going to target a different element this time, the anchor element (otherwise known as a Link): and, just to upset our teacher, we are going to remove it's underline. To do this we must first target the element A, then pull the characteristic "text-decoration" and define it as "none".

a {
text-decoration: none;
}

However, we do not want to leave our viewers in the dark, so we will also change the color of our links by pulling the characteristic "color" and defining it as "#FF6600" which is orange.

a {
text-decoration: none;
color: #FF6600;
}

This way there is some visual clue for our visitors.

top

Dare to be bold.

Perhaps you want a targets font to be bold. If this were the case you would just need to pull the characteristic "font-weight" and define it as "bold" or "normal". Although we do not wish to do this in our CSS, if you wanted to you could target the class ".bold" and make all text part of that class .bold simply by typing this.

.bold {
font-weight: bold;
}

Again, we do not wish to do this to any of our text, so we will leave our CSS be.

top

Text transformers.

Although I believe we all can agree that the original Transformers the TV show was the *insert-explicative*, text transformers are in another league entirely... Well, maybe I won't go that far, but they do come in helpful. Ok FINE! They're about as useful as the "text-decorators", but that's no reason to ignore them.

Lets say you have an span or block of text that you want to be in ALL CAPS, or perhaps all lower case, or you want capital letters at the Beginning Of Each Word. Well, "text-transform" can do all that for you in 2.2 seconds. Lets say we want our headings to be "capitalize[d]" (that is, we want the first letter of each word to be a capital). Well, lets start by targeting all possible headers, "h1, h2, h3, h4" (just to cover our bases), pulling "text-transform" and defining it as "capitalize".

h1, h2, h3, h4 {
text-transform: capitalize;
}

As was said, other variables are "capitalize", "uppercase", "lowercase" and "none". All of these except "none" ignore what you typed (in regards to case) and format the text they way they are told. However, "none" will leave the text as you typed it.

top

Alignment.

One thing you may want to change, either for taste, format, or style, is the alignment of your text. To do this we simply define "text-align" to whatever we wish. Lets send our second header to the right shall we? Since it is possible to have multiple type 2 headers (h2) on a single page, we will target it by it's ID. Target "#funHead" (creative, I know), pull "text-align" and define it as "right".

#funHead {
text-align: right;
}

Our choices are pretty self explanatory ("right", "left", "center" and "justify"). Keep in mind that this only works for text inside of block elements. That means it will work with DIV, HEADER, BODY, PARAGRAPH and LIST elements but not elements like SPANs and ANCHORs.

Oddly, you will learn about "float" (much like align), further on in the "Size Matters" category.

top

"Hey! You dented my paragraph!"

Ok, so the header isn't any good, but this tip sure is. I will make this quick. Want to indent the first line of your paragraph like you can in MS Word? Well target your paragraph(s) and pull up "text-indent" and throw a number at it (in pixels). We want all our paragraphs to have a 15 pixel indent on their first line.

p {
text-indent: 15px;
}

If you told all your paragraphs to have an indent (like we just did) but have one that you want to be indented.. less... just target it by it's ID, pull "text-indent" and define it as "0px" which means zero pixels.

top