The CSS Style Section

You might get tired of the default "serif" font in black on a white background. The previous "HTML-only" pages were starting to look very plain and boring.

In old HTML the formatting tags were mixed right in with the HTML content. But it turns out that it's much easier to maintain a website if you use HTML just for the content part of the page and separate all the design specifications into a section called a Cascading Style Sheet, or CSS.

The style section

You had a brief look at "inline styles", when I added style="..." to a few of the HTML tags we learned earlier. "inline" styles are poor practice because they mix the formatting with the content. Now we'll learn the right way.

In the head section of your page, you add beginning and end style tags as shown below:

<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>This is the page title</title>

   <style type="text/css">  
      body { font-family: Arial, sans-serif; }
   </style>
</head>

Note that I've put my first style rule between those tags. I've set the entire body of the page to use either Arial or the sans-serif font. That rule "cascades" down and is applied to all the other tags between the body tags on your page.

We'll add LOTS more stuff between those style tags!

Adding More Rules

In the following example I've added a second rule:

<style type="text/css">  
   body { font-family: Arial, sans-serif; }
   h2 { font-family: Georgia, "Times New Roman", serif; }
</style>

It says that the entire body should use the Arial or sans-serif font, BUT the h2 tag should use one of the serif fonts that I've listed. The second rule overrides the first rule for the one type of tag (h2).

If you "View Source" you'll see those are the exact rules I used in the head section of this page. Note that the subheadings here use a different font than the main heading and the paragraphs.

Click here to continue

Valid HTML 4.01 Strict