Cascading Style Sheets

Use (X)HTML to structure your Web pages, not to design them. For example, don't use <font> tags to specify the face, size, and color of text. In fact, presentational elements like the font element are deprecated. Instead, use Cascading Style Sheets (CSS) to design your Web pages.

A great advantage of CSS is that it allows you to separate style from content. This makes sites easier to maintain. For example, to style the paragraphs in a Web page, you can create a style sheet (a set of rules):

p {
 font: 1em verdana, sans-serif;
 color: #363636;
}

To apply the above rule to the p elements in your Web page, put the style sheet in the document's head and use the style element to embed the style sheet. You must also set the value of that element's type attribute to text/css to specify that you are using CSS to define your styles:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>A Sample Page</title>
  <style type="text/css">
   p {
    font: 1em verdana, sans-serif;
    color: #363636;
   }
  </style>
 </head>
 <body>
  . . .
  <p> . . . </p>
  . . .
 </body>
</html>

Using CSS to style text is much better than cluttering your document with <font> tags. For example, suppose you later decide to change the color of the text forming your paragraphs to a lighter shade of gray. Then, simply change the value of the p selector's color property in your style sheet:

p {
 font: 1em verdana, sans-serif;
 color: #2f4f4f;
}

Nonetheless, if you want to apply CSS rules to an entire Web site, embedded style sheets are still not ideal, since you would have to embed the style sheet in every page of your site. In such cases, external style sheets are best. To create an external style sheet, put your style rules in a plain text file and save it with a .css filename extension. Use the <link> tag to link the style sheet to an (X)HTML document. The tag must appear in the document's head:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>A Sample Page</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
 </head>
 <body>
  . . .
  <p> . . . </p>
  . . .
 </body>
</html>

Another (and the least favorable) way to insert a style sheet into your document is to use the style attribute to set an inline style:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>A Sample Page</title>
 </head>
 <body>
  . . .
  <p style="font: 1em verdana, sans-serif; color: #363636;">
   This a paragraph.</p>
  . . .
 </body>
</html>

Inline styles mix content and presentation and, thus, are not much better than <font> tags. So, use inline styles sparingly, if at all.