The Structure of a CSS File

To use CSS, your HTML files need to specify the location of the CSS file that contains the formatting rules. This is done by adding a link element to the header section as shown below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="/styles.css"
  type="text/css">
</head>

<body>
  <h1>This is a Heading</h1>
  <p>And this is a paragraph.</p>
</body>

</html>

A simple accompanying CSS file might then look something like this:

h1 {
  font-family: Verdana;
  font-size: 12pt;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
}

p {
  font-family: Verdana;
  font-size: 10pt;
  text-align: justify;
}

The format of the rules in a CSS file is very simple: they're composed of a selector, one or more properties, and a corresponding value for each property.

In this example, the first part specifies rules for level 1 headings (h1), and the second for paragraphs (p). The properities and values are fairly self-explanatory: level 1 headings will use the Verdana font, the text will be bold, underlined, 12 point in size and center aligned. Similarly, paragraphs will use the Verdana font, and the text will be 10 point in size and justified (right and left aligned).

<-- Previous Page

Intro to CSS

Next Page -->

CSS Selectors