Skip to navigation.

So now you know how to make a basic web page. When writing the page, we focused on structure -- how the page was divided up into its various parts (headings, paragraphs, etc) -- but not on style.

In this chapter we'll focus on how to apply style to your page, but without even changing the HTML!

Applying A Basic Style

Right now, our page looks something like this:

picture of the example in a browser

You'll remember that one of the lines in the HTML file said this:

So we shall now create a file called style.css and add some formatting instructions to it.

body {
       font-family: Arial, Helvetica, "Sans Serif";
       background-color: white;
       color: black;
       font-size: 12px; }
h1   { font-size: 18px;
       font-weight: bold;
       font-style: italic;
       text-align: center; }
h2   { font-size: 16px;
       font-weight: bold; }
h3   { font-size: 14px;
       font-weight: bold;
       font-style: italic; }

Let's take a look at the effect that this style sheet has on the page:

picture of the example in a browser

As you can see, the appearance of the page has changed. Look at the body { ... } part of the CSS file. These instructions have been applied to the entire body of the page. All the text on the page has a height of 12 pixels (except the headings), is black in colour and the page has a white background.

The main heading is in a larger font and is bold and italic. It is also centred. Looking at the CSS file, you can clearly see why!

The Beauty of Style Sheets

So what's so good about style sheets?

Traditionally page authors have included formatting instructions, like fonts and colours directly in the HTML. However, if you have say 50 pages and you want to change the background colour of them all from white to pale yellow, this is a big task!

On the other hand, if you don't put the formatting instructions in each page, and instead put all the formatting instructions in one single style sheet, then you only have to edit a single line of a single file and all the pages are automatically pale yellow!

This is a very handy feature of style sheets.

About Classes

In our HTML we had a couple of bits like and

. At the time, they didn't seem to do anything, but we can now use them in our CSS file:

body {
       font-family: Arial, Helvetica, "Sans Serif";
       background-color: white;
       color: black;
       font-size: 12px; }
h1   { font-size: 18px;
       font-weight: bold;
       font-style: italic;
       text-align: center; }
h2   { font-size: 16px;
       font-weight: bold; }
h3   { font-size: 14px;
       font-weight: bold;
       font-style: italic; }
div.introduction { font-style: italic; color: purple; }
span.character { font-weight: bold; }

Let's take a look at the effect that this improved style sheet has on the page:

picture of the example in a browser

Now the character's names are in bold and the introduction is in purple italics

Links

Links are a strange exception to the styling rules, because there are three kinds of them:

  • unvisited links — in CSS, these are referred to as a:link;
  • visited links — in CSS, a:visited; and
  • hovered links — the link that the mouse is currently hovering over — referred to as a:hover

We'll add some style to links now:

body {
       font-family: Arial, Helvetica, "Sans Serif";
       background-color: white;
       color: black;
       font-size: 12px; }
a:link { color: blue;
       text-decoration: none; }
a:visited { color: blue;
       text-decoration: strikethrough; }
a:hover { color: red;
       background-color: yellow;
       text-decoration: underline; }
h1   { font-size: 18px;
       font-weight: bold;
       font-style: italic;
       text-align: center; }
h2   { font-size: 16px;
       font-weight: bold; }
h3   { font-size: 14px;
       font-weight: bold;
       font-style: italic; }
div.introduction { font-style: italic; color: purple; }
span.character { font-weight: bold; }

This will mean that regular links will be in blue with no underline. Visited links will still be blue with no underline, but they will have a cross through them. When the mouse hovers over a link, it will become red with a yellow background and be underlined.

This is all I will say about CSS files, because this is really an HTML tutorial — not a CSS tutorial. However, here are some useful links:

Now, we'll go on to the next chapter.