Stylesheets

Introduction

This section introduces a new topic and a new language: the CSS language, or cascading stylesheets. Stylesheets work alongside an HTML page to control its appearance.

Stylesheets can control most aspects of the visual appearance of a page. You can use them to alter appearance either on a general per-HTML-tag basis ("all level-one headings should be in 24 pixel Arial font") or more specifically ("this individual paragraph should be right-aligned").

Why stylesheets?

Stylesheets were developed to provide a simple, powerful way of controlling layout on Web pages. They are intended to replace a wide variety of hacks, workarounds and general abuse of HTML that designers previously resorted to in order to obtain specific effects.

Separating style and content

Stylesheets are usually included in separate files from the HTML content (you include a reference to the stylesheet within the HTML page). This reinforces one intention of stylesheets, which is to separate visual style from content and meaning. Separating visual control (such as font sizes) into a stylesheet, and leaving the HTML to represent meaning (such as emphasis, headings, or a list of points), can result in better-quality HTML which is more likely to make sense in non-visual situations such as on a text-only or speech browser.

Precise layout control

Stylesheets allow more precise layout control than was available with HTML hacks. For example, HTML did not include any mechanism to indent the first line of a paragraph, and it was only possible to include margins by using bizarre workarounds involving large "tables". HTML did not allow line spacing to be specified, and did not allow font size to be specified in pixels.

Encourages consistency

Because one stylesheet can be used for an entire Web site, it can help to ensure consistency. For example, if your stylesheet specifies that level one headings are in green eighteen-pixel high Arial bold font, then this will apply throughout the site. If you later decide to change it, you need only alter the stylesheet, rather than all the individual pages.

Stylesheet syntax

Basic stylesheet syntax allows you to describe a particular type of content, followed by a block of instructions about how to display that content, followed by the description of another type of content, another block of instructions, and so on.

Example

The following stylesheet specifies that level-one headings should be in 24-pixel high Arial font (or sans-serif if Arial is not available). Level-two headings are in 18 pixel Arial, but they are coloured green.

H1
{
font-family: Arial, sans-serif;
font-size: 24px;
}

H2
{
font-family: Arial, sans-serif;
font-size: 18px;
color: green;
}

Explanation

Let's look at the above in more detail.

H1
This is the HTML tag whose appearance we want to alter.
{ ... }
The curly brackets (braces) contain a "block" of commands which alter the appearance of the specified HTML tag.
font-family:
This keyword controls the font used for text. After it, you can specify a list of different fonts - the first is used in preference. Here the list ends with a generic font specification (sans-serif).
;
Each keyword line within the block has to be terminated with a semicolon.
font-size:
This keyword controls the size of the font. "px" is the measurement unit (pixels), which is usually the best unit for specifying font size on-screen.
color:
This keyword controls the foreground (text) colour of the text. Note that it has to be spelt the American way. Also, only a few predefined colour names (like "green") are available; other colours have to be specified using a bizarre format which I'll cover next lesson (hopefully).

The keywords (font-family, font-size, and color) are also known as CSS properties.

Linking stylesheets to HTML

On its own, that stylesheet will do nothing. However, you could save it in a file called, for example, style.css (by convention, stylesheets have a .css extension) and then reference it from within the <head> section of an HTML page using this line:

More properties

Margins

You can add a margin using the "margin-left", "margin-right", etc. properties. For example, this style would give all paragraphs a left margin of 100 pixels.

P
{
margin-left: 100px;
}

Line spacing

You can control line spacing with "line-height":

P
{
line-height: 30px;
}

Width

You can control the width of a block (inside its margins) using the "width" property. This works best with <div> tags (see next page).

DIV.main
{
width: 400px;
}

Specific elements

class and dot

As well as adding style to all occurrences of a particular HTML tag like H1 or P, you can have different "classes" of element, each of which has different style properties. You specify these in CSS using a dot followed by the class name, and in HTML by using the class attribute.

For example, the following style:

P.intro
{
color: blue;
}

would affect the following piece of HTML:

<p class="intro">Intro paragraph</p>

but not any other paragraphs that didn't include class="intro".

DIV

You may sometimes need to control style over larger areas of a page. For example, you may have a main area of the page which includes several paragraphs, and should have a 100-pixel left margin and be 400 pixels wide. For these cases, you can use the <div> tag, which has no meaning other than to divide up areas of the page for styles.

DIV is almost always used with the class attribute, so that you can divide up the page into several different areas (main content and navigation, for example).

This is an example of DIV used to group several paragraphs:

A suitable stylesheet might be:

DIV.main
{
margin-left:100px;
width:400px;
}

Summary

Stylesheets separate style from content

The content, along with tags indicating different kinds of meaning (headings, lists, emphasis), is placed in the HTML file. A separate stylesheet file controls the appearance of that content.

You can specify styles for a particular HTML tag

For example, you could specify the fonts for all headings.

You can be more specific

It is also possible to be more specific by using the class attribute in HTML, which allows you to control the appearance of some occurrences of an element independently of others.

The <div> tag lets you divide a page into larger areas, each of which can have its particular style.