CSS Text Properties

TOC

If no special rules are given in a stylesheet for text, it appears in black, "roman" orientation (vs. italic) at the size and thickness (weight) set by the user in ems in the browser defaults. The designer has a large amount of control over the appearance of text, however using several attributes:

Style

Modern browsers assume "roman" or upright text presentation unless you specify the only other alternative, "italic" or "oblique". 

  font-style: normal;
  font-style: italic;
  font-style: oblique;

The first rule results in the same as not having a font-style rule: roman presentation. The second rule slants the text using a built-in subfamily of the font. The third rule makes the browser try to find an italic subfamily, and if there is none, it tries to compute a slanted face from the normal face.

Color

Browsers will assume black for text unless it is specified otherwise. To apply different colors, you can set the color for the entire document body, or set it for specific instances of text, such as with class selectors or any HTML text container element: 

  .red {
    color: #0f0;        /* red text class */
    }

  a {
    color: #0f0;        /* red anchors */
    }

  h1, h2, h3, h4 {
    color: #0f0;        /* red header text */
    }

To use the ".red" class, simply put the text to be red into a container with its class set to ".red":

Web page:Markup:

Coloring Text

In amongst this black text is some red text. Only the text in the container using the .red selector is red.

 
<head>
<style type="text/css">
h4 {
  color: #0f0;
  }
.red {
  color: #f00;
  }
</style>
</head>
<body>
  <h4>Coloring Text</h4>
  <p>In amongst this black text is some 
  <span class="red">red text</span>. 
  Only the text in containers using the 
  <span class="red">.red</span> selector 
  is red.</p>
</body>

Weight

You are probably used to thinking of font weight in terms of regular or "bold". In CSS you use a number from 100 to 900 in 100 increments to set the thickness of the rendered font. Normal weight is expressed as "400", while "bold" would be "700". In MSIE 6,7 and Mozilla browsers, these are the only settings that have any effect. 

  .bold {
    font-weight: 700;        /* bold class */
    }

Variant

This property is basically used to define small-caps text. It is theoretically possible for a browser to compute a small-caps font face from the normal face. 

  .sm_caps {
    font-variant: small-caps; 
    }

Text Decoration

It is normal for anchor text to be underlined, making links easy to spot on a page. You can inhibit this default behaviour using the the text-decoration attribute: 

  a {
    text-decoration: none; 
    }

Similarly, you could underline plain text with: 

  .underlined {
    text-decoration: underline; 
    }

The other text-decoration settings are: overline, line-through and blink.

Styling Text

Aside from changing colors, the most professional ways of emphasizing or calling attention to portions of text in a document can include using the <em></em>, <strong></strong> -- with accompanying style rules for those element tags, or setting the text apart in a box or "sidebar". Discussion of this latter technique can be found in Floating and Positioning. Before that discussion, though it is best to gain an understanding of the concept of "boxes" and visual formatting.

<< Fonts | Index | Visual Formatting: Boxes >>