CSS Tutorial

Here we describe how to construct a css style sheet. The file would typically be saved as styles.css and is created in a text-based editor.

CSS Basics

You create rules for each HTML element that you are going to apply a style to. Each rule consists of a selector such as H1 and a list of declarations. Each declaration has two parts consisting of property: value pairs.

Example CSS Rule

Here's an example of suggesting the style of the H1 tag:
H1 { font-size: 18pt; text-align: center; color: #000099 }

Another way to express this rule is like this:

H1 {
   font-size: 18pt;
   text-align: center;
   color: #000099;
   }

Grouping

You can group tags in lists to save space like this:
H1, H2, H3 { font-family: Arial; font-weight: bold }

Inheritance

You can add extra style rules following previous rules that affect a particular tag. The previous rules are remembered or over-written. For example, following the previous example you might define the font sizes of the heading tags.

H1 { font-size: 18pt; text-align: center; color: #000099 }
H2 { font-size: 14pt }
H3 { font-size: 11pt }

Class as Selector

All elements inside the body of the web page can be assigned a "class" reference. This allows a modification to the usual style for a particular element to be applied.

If we have a class called "small" that sets the font-size to 8pt it is defined in the style sheet with:
.small { font-size: 8pt }

In this case, the class can be applied to any elements that have a font-size property. If we only want it to be applicable to paragraphs, we would define it like this:
P.small { font-size: 8pt }

To apply the class style in our html we do this:
<p class=small>Our paragraph of small text</p>

ID as selector

This is used in the same way as the class selector. Replace the dot with a hash (#) in the definition and replace "class" with "id" in the html.

The ID selector has a unique value and is normally used with the "DIV" element to apply styling to sections of html such as header, menu area, content and footer. In particular, it may be used for positioning purposes instead of html tables.

To apply the ID in our html we do this:

<div id=footer>
The bottom of the page text.
</div>

CSS Box Model

Each displayed element is surrounded by rectangles of area. The element content is optionally surrounded by padding up to a surrounding border. The border is then surrounded by a transparent margin.

The sizes are set by the margin, border and padding properties. The colour and style of the border is set by the border properties. The margin has the same colour as the element background.

CSS Properties

There are a large number of style properties with various ways to express the value of the property. The main groups of properties are:

Font properties
Colour and background properties
Text properties
Box properties
Classification properties

More CSS Stuff

CSS Parameters

To understand the full details of CSS it is suggested that you study the documentation published by the World Wide Web Consortium. Cascading Style Sheets