Styling Text 101

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

Leave a Reply