CSS TEXT

CSS has several options for defining the styles of text.

These options can entirely replace the <font> tag, but there's even more. CSS allows you to define these styles much more powerfully than you could ever do with plain HTML.

FONT PROPERTIES

Property Values NS IE Example font-family font name generic font 4+ 4+ 4+ 4+ font-family:arial font-family:arial, helvetica font-style normal italic oblique 4+ 4+ 4+ 4+ 4+ font-style:normal font-style:italic font-style:oblique font-variant normal small-caps 4+ 4+ font-variant:normal font-variant:small-caps font-weight normal bold bolder lighter 100-900 4+ 4+ 4W 4W 4+ 4+ 4+ 4+ 4+ 4+ font-weight:normal font-weight:bold font-weight:bolder font-weight:lighter font-weight:250 font-size normal length length absolute absolute absolute absolute absolute absolute absolute relative relative percentage 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4+ font-size:normal font-size:14px font-size:14pt font-size:xx-small font-size:x-small font-size:small font-size:medium font-size:large font-size:x-large font-size:xx-large font-size:smaller font-size:larger font-size:75%

4P:problems, 4M:Mac only, 4W:Windows only

ASSIGNING ALL FONT ATTRIBUTES AT ONCE

An example of a typical font definition would be:

B {font-family:arial, helvetica; font-size:12px; font-weight:bold;}

But since all font attributes can actually be expressed with the font property we could actually write it this way:

B {font:arial, helvetica 12px bold}

The above is obviously a shorter way to specify font settings - but in reality it is less useful than one might think. The reason is that you'd be assigning the same font face to all your styles, for example, while you'd want different font weights and sizes for headers and content areas etc.

---

TEXT PROPERTIES

Despite the font properties listed above there are some options for defining text properties such as alignments, underlines, etc.

Property Values NS IE Example line-height normal number length percentage 4W 4+ 4+ 4+ 4+ 4P 4+ 4P line-height:normal line-height:1.5 line-height:22px line-height:150% text-decoration none underline overline line-through blink 4+ 4+ 4+ 4+ 4M 4+ 4W 4+ text-decoration:none text-decoration:underline text-decoration:overline text-decoration:line-through text-decoration:blink text-transform none capitalize uppercase lowercase 4+ 4+ 4+ 4+ 4W 4W 4W 4W text-transform:none text-transform:capitalize text-transform:uppercase text-transform:lowercase text-align left right center justify 4+ 4+ 4+ 4+ 4+ 4+ 4+ 4W text-align:left text-align:right text-align:center text-align:justify text-indent length percentage 4+ 4+ 4+ 4+ text-indent:20px; text-indent:10% white-space normal pre 4+ 4+ white-space:normal white-space:pre

4P:problems, 4M:Mac only, 4W:Windows only

Note: line-height : When using a number (such as 1.5) the number refers to the font size, where 1.5 would mean that a 1.5 lines spacing (using the current font size) will be inserted between the lines. text-transform : Capitalize sets the first letter of each word in uppercase. Uppercase forces all letters to uppercase. Lowercase forces all letters to lowercase. text-indent : Use this to indent the first word of a paragraph. white-space : If white-space is set to pre the browser will show all spaces in the text, rather than ignoring all occurrences of more than one space. This is similar to the <pre> tag in plain HTML. Since the white-space is only supported by NS you should use the <pre> tag instead.

---

The official CSS standard provided by W3C also includes properties for word spacing, letter spacing and vertical align, but these aren't supported by today's browsers.

---

COLORS

As you can see, the above CSS properties can replace all text formatting that can be done with plain HTML with one exception: the color.

The color is not part of the font collection in CSS - rather it has its own definition.

If you want to add a color to the text in the above example you'd do it this way:

B {font:arial, helvetica 12px bold; color:red}

The color property is explained in detail on the next page.