Learning CSS Part 2: Classitis/Divitis and Font Control

Last week I described the basics of XHTML and CSS. This week I am continuing with "Classitis and Divitis"

"Classitis" / "Divitis"

Classitis is a term for the overuse of unnecessary classes on an element. Such as in the example below, where the h1 is the only tag within the div.

<div> <h1 class="headerText">Heading</h1> </div>

It is best to directly target the h1.

Divitis is a term for the overuse of unnecessary divs in the markup. For example:

<div> <div align="center"> <h1>Heading</h1> </div> </div>

The <div align="center"> adds unnecessary markup to the HTML, when it can just be applied to the h1 CSS style.

Font Control

Below are style properties used in styling text:

• font-weight: declares bold or normal
• font-style: declares italic or normal
• font-size: declares the font size (10px)
• font-family: declares the font used. This uses a comma-separated list so that if one font is unavailable, then the next font is read, until it has the declaration of a sans-serif (Verdana, Arial, Helvetica, sans-serif;). If your font name has two words separated by a space, you need to enclose them in quotes ("Lucida Grande", "Arial Black", "Century Gothic";)
• line-height: declares the line height of the font. It is best to set this to 50% more than the font size as this provides the user with visual "comfort" while reading. ie: 12px/18px, 10px/15px, 18px/27px
• text-decoration: declares whether text has an underline, overline, line-through, blink, and none
• text-align: declares whether text is aligned left, right, center, or justified
• letter-spacing: declares the width of the space between letters
• word-spacing: declares the width of the space between words

Most of these can be declared in one line:

font: normal 12px/18px Verdana, Arial, Helvetica, "Century Gothic", sans-serif;

The order being: (font-weight or font-style) font-size/line-height font-family.