CSS vs.

The  tag, one of the first HTML tags to attempt to give the webmaster control over the look of text on a web page, was the battleground of early Microsoft/Netscape rivaly, each trying to out-innovate the other. As a result, the standards got muddled and the W3C (the good people who made up the HTML standard) said, basically, "don't use it anymore, it's a mess." The tag is officially deprecated, which is a fancy word for 'frowned upon'. This means that while browsers are likely to support the tag for a good while longer, there's nothing that says they have to in the future.

But they wouldn't just throw it out without giving you an alternative. I bet you can guess what that alternative is... and to entice you away from the beleaguered, belittled tag, CSS gives you far greater control than you've ever had before.

Ah, That Face! Oh, That Style!

CSS gives you several different properties for controling the look and spacing of the text:

color
font-family
font-size
font-style
font-variant
font-weight
line-height
letter-spacing
text-decoration
text-transform
word-spacing

We'll talk about all of these individually on this page. Additionally, there's a shorthand font property that encompasses many of these that we'll mention at the end.

Color specfies the foreground color of an element, which for text is the font color. It replaces the <FONT COLOR= combination, and any standard color value if valid. Color is discussed in detail on the Decorating with CSS page.

Font-family replaces the FACE= attribute of the tag. List one font name or many separated by commas. The browser will look for the first font on the user's system and try to use that. If it can't find that, it moves down the line till a match is found. If it exhausts the list the font remains unchanged from the browser default.

Font-style basically means italic. The acceptable values are normal, italic, and oblique--though if there's a difference between oblique and italic I can't see it. Maybe it's a Mac thing. Any Mac users out there? Tell me if you can see a difference between Oblique text and Italic text.

Font-weight is boldness. Acceptable values are normal, bold, bolder, lighter, or any multiple of 100 from 100 to 900. This is definately a Mac thing. In Windows, lighter and the numbers < 400 look the same as normal, the rest all look the same as bold. Since I write my pages mainly for a Windows audience, I only use normal and bold. It's fine to use the others if you like, just keep in mind that some users will not be able to distinguish the various sizes (Even Mac users might not be able to if the appropriate weights are not available on their system for the chosen face.)

So, Mac variants aside, what's the big deal about font-style and font-weight? Can't you just use  and ? Sure, but this saves adding the extra tag or two. Moreover, you can use the normal value to override defaults on certain elements.

H2 {
    font-weight:normal;
}
I I { font-style:normal; }

H2 is bold by default, this style says we don't want it to be. The I I says that if you have one  tag inside another, the inside text would not be italic (like 'not' in that sentence)

When Size Matters

The font-size attribute has so many options it gets a section all to itself! They basically fall into two categories: relative and absolute.

Relative font sizes automatically adjust based on the browser font size and whatever other element they are elcosed in (i.e., a font-size of larger is different inside a <H1> tag than in the main body of the document.) Relative sizes can be named (larger and smaller) or percentage (80%, 150%, 300%, etc.)

Absolute, or 'fixed' font sizes can be based on the browser's chosen font sizes, or specified in some fixed unit, usually points (pt.) The named relative sizes are xx-small, x-small, small, medium (normal), large, x-large, and xx-large.

In general, use relative sizes when possible. The most common reasons for using fixed sizes are in duplicating the layout of a printed page or form where text must 'fit' into a certain area and not overflow at all. Also, be careful using large (especially fixed) sizes inline--mixed with normal text. For example, font-size:72pt can overlap lines in some browsers making them harder to read. (Both IE and Mozilla for Windows are affected, but in slightly different ways, so it's not even an effect you can use to your advantage.)

I'll repeat that last sentence using an inline example so that you can see what I mean if you have one of the affected browsers: "For example, font-size:72pt can overlap lines in some browsers making them harder to read."

Fancy-Schmancy

Text-decoration is the CSS version of the  (text-decoration:underline) and <STRIKE> (text-decoration:line-through) tags. Additionally, there is text-decoration:overline. If you want to, you can really decorate your text by doing all three! Note that overline and underline are different from border (red)

Probably the most common use of the text-decoration attribute is this bit of CSS:

A { text-decoration: none }
A:hover { text-decoration: underline }

The first line takes the underline off of the <A HREF> link tag. The second line defines the style for the hover 'psuedo element' and turns the underlining back on when (and only when) the mouse is over it.

Font-variant has only two possible values: none (default) and small-caps. Small Caps is Good for Titles & Special Emphasis It transforms all the characters to uppercase but makes all the formerly-lowercase characters a smaller size. Numbers and puctuation are unchanged.

Text-transform changes the display of text (but not the size). Possible (hopefully self-explanatory) values are none, uppercase, lowercase and capitalize. It is mainly useful when the text you are working with is coming from some other source, such as an HTML form or a database. Note that this changes only the display. The text box below is set to text-transform:uppercase with an initial value of "Hi There". No matter what you type in, it appears in upper case. The button next to it will show you what would be passed if this were an actual form--the 'untransformed' version.

Lost in Spacing

Line-height is... well, just what it says: the height of the line. By default, the value is 1em -- the height of the font in use. line-height can be given in percentage or units (em, pt, px). If there's any chance someone could read the page in Internet Explorer 3.x (why won't some people upgrade?) you shouldn't use em -- a known bug in IE3 renders this as a px value instead. I.e., a 'double-spaced' paragraph (line-height:2em) would render as line-height:2px If you don't yet see the ramifications of this, I'll repeat part of this paragraph below with line-height:2px so you can experience the joy of not upgrading for yourself. BTW, A safer solution is to use line-height:200%.

Whee-la! That's good readin'! As a weird side note: negative values are not allowed, but 0 is, making a paragraph print over and over on the same line!

Line-height can also help you out with one of the problems mentioned earlier. Part of the issue with inline large text overlapping other lines is the line height not being fully adjusted. But if you do it specifically, 72pt text is no problem. ()

Letter-spacing spreads things out (like the headings on this page). Values must be in units (typically em), not percentages. letter-spacing:.5em adds half a character space between each letter. Negative values are allowed, too, but should be used sparingly and in very small values. letter-spacing:-.05em is slightly condensed text. letter-spacing:-.2em (-.2em) is nearly unreadable. Zero is also allowed. Not only is this 'normal' letter spacing, it also prevents text from being justified.

Word-spacing is closely related to letter-spacing. word-spacing:.7em provides extra space between each word but leaves space between the letters unchanged. Combining the two can have odd effects.

Just the font, Ma'am

There is an alternative way to combine several of the font- attributes into one:

P.Wacky {
    font: italic small-caps bold 12pt/24pt Tahoma, Arial
}

Specifies paragraphs of the Wacky class to have italic, bold, small caps tahoma or arial font with a fixed size of 12 points and a line height of 24 points ('double-spaced'). Shorter, and if compact code if your thing, then go for it. Personally, I think readability and maintainability are greatly improved using the individual attributes.

Lagniappe^*

The  tag diehards out there are saying "but the nice thing about the tag was that it was a tag, and I could apply just the effect I wanted to something wherever and whenever I wanted."

Sure. But many times it was a extra tag, wasn't it? With a little thought you'll realize that most of the things you wanted to redefine are already in other tags that you can apply CSS to. A whole paragraph or section? Apply it to the  or <DIV> tags. The whole document? The <BODY> tag. Table Cells? Do 'em all at once by defining a style for the <TD> or <TH> tags. Got text that should be bold and red? Rather than two separate tags, why not use ?

Finally, if you simply want to add color or change the size of a few words without changing anything else, there's still a tag you can use. One that does nothing on it's own: the  tag. For example: .

is dead! Vivá la CSS!