Here’s another of the handouts I prepared for a Continuing Ed class in CSS at UNM.
Styling Text
There are many ways to control the typography on your HTML pages.
Fonts
Fonts are chosen in font-families. Usually pick more than one. Pick fonts that are all serif fonts and then end the list with the generic ‘serif’ for good measure.
h1 {font-family: Georgia, "New Century Schoolbook", Times, serif;}
Font names that include spaces need to be quoted. For sans-serif fonts, do a similar thing.
h1 {font-family: Arial, Helvetica, Verdana, sans-serif;}
Font-Weight
The choices for this property are normal, bold, bolder, lighter.
Font-Size
There are a few keywords such as small, medium, and large but generally it is best to use a relative measure such as % or em.
h1 {font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 1.35em;}
Line Height
Line-height can be expressed as a separate value, or in shorthand, given in the font rule immediately after the font size. To add to the rule above and change it to a shorthand font rule with line-height, we’d get:
h1 {font: 1.35em/1.4em Arial, Helvetica, Verdana, sans-serif;}
Indentation and Alignment
The text-indent property will indent the first line of a paragraph.
p {text-indent: 3em;}
Horizontal alignment uses the text-align property. Possible values are left, center, right, justify and inherit. (For left to right languages)
blockquote {text-align: center;}
Vertical alignment uses the vertical-align property. Possible values are baseline, sub, super, top, text-top, middle, bottom, text-bottom, or a value in % or pixels. These properties only apply to text in table cells and inline. It doesn’t affect vertical alignment within a block level element.
Text Transformation
The text-transform property can change text to uppercase, lowercase or capitalize. Capitalize only affects the first letter.
Text Decoration
The values for text-decoration are none, underline, overline, line-through, or inherit. This property is frequently used to remove the underline from links.
a:link {text-decoration: none;}
Text Shadows
The CSS3 property box-shadow can be used to add drop shadows to text or other elements such as images. It’s a nice effect on heading elements. In shorthand, you first give a horizontal offset, then a vertical offset, then a blur distance (if you want blur) and finally a color.
Add this to your stylesheet to see how it works.
img {box-shadow: 4px 5px 3px #999999;}
See also: CSS Selectors 101