Making your text look different

Normal text

One of the most obvious usages for CSS is to change the way text is rendered by the browser. Here is a list of common CSS properties for changing the text layout:

color: Gives the color for the text, it can be either a name like "red" or an RGB value given as a function like this: rgb(0,0,66) which will be a dark blue.
font-size: Gives the size of the text. This can be specified in point (unit pt), pixels (unit px), relative size compared to the size it would have otherwise (unit %) or some other, less useful units.
font-weight: Determines if the font is bold or not if you use the values bold and normal here. Other values are possible but not supported well.
font-style: If set to italic the text will be in italics. Again: other values possible but not supported well.
font-family: Specifies a list of font-families that should be used. This is a list since the page has to be displayed on different machines and the author can not know which font families are available. The families given will be tried in the order given, the list should end with one of the generic family names like: serif, sans-serif or monospaced.

For a more complete list of options take a look at CSS references, e.g. the reference of W3Schools.

Here are some examples how to use these options:

  p,ul,dl,ol,td {
      color:rgb(89,89,89);
      font-family:Arial, Helvetica, sans-serif; 
      font-size:10pt;
  }
  pre,tt {
      color:rgb(89,89,89);
      font-family:Courier, monospace;
      font-size:10pt;
  }
  p.header {
      color:rgb(89,89,89);
      font-family:Arial, Helvetica, sans-serif;
      font-size:32pt;
  }

This example taken from the CSS for this manual tells the browser to use a specific type of gray for different kinds of text, to render all text in paragraphs, lists and table cells with some kind of font without serifs (preferably Arial or Helvetica) with the size 10 points. Preformatted text in separate paragraphs or as inline text should be similar but with a monospaced font (Courier if possible), while all paragraphs marked with class="header" should be far bigger (32 points).

Note that there a number of different elements that can contain text, make sure that you change the text on all elements you use. This example still ignores the markup in a paragraph like <emph> or <strong>, only the way <tt> should be formatted is declared. Since the given font properties on a paragraph will be reused one way to define the formatting of this markup could be:

  emph {
      color: rgb(100,100,0);
  }
  strong {
      color: rgb(150,150,0);
  }

These rules will keep the normal font in the paragraph but change the color used. The default to change the style or weight will be overridden.

Links

Links are worth a separate look since they offer four pseudo-classes which give the option to control their looks in every state they can have. These pseudo-classes are:

link: Used whenever none of the other states is true
active: Used when the link has the keyboard focus
hover: Used when the mouse is over the link
visited: Used for links already visited

These pseudo-classes can be used to integrate the links better into the look of your pages, but be cautious: you can completely hide them this way, relying on the feedback the browser gives by the mouse cursor shape and the focus box to give the feedback that there is a link. Here is again an example from the CSS for this manual:

  a:link, a:visited {
      color:rgb(255,50,0);
      text-decoration:none;
  }
  a:hover, a:active {
      color:rgb(255,50,0);
      text-decoration:underline;
  }

This drops the distinction between visited and not yet visited links by giving them the same format: a red color and the usual underline is suppressed by setting the text-decoration property to none. This might already be consider a decrease in usability since some visitors might rely on the underlines to pick up links. On the other hand the underlines break the text layout, so you have to do compromises here.

Underlines will appear if the links get any kind of focus, either if the user tabs to one with the keyboard or if he puts the mouse over the link. The color will stay the same but we reactivate the text decoration as long as the link has the focus. Again we drop a distinction here: the keyboard focus and the mouse over effect are the same.