Lesson 10

Cascading Style Sheets

Introduction
Cascading Style Sheets are a method of adding attributes to tags on a group of web pages, a single page or a single tag. The advantage of an external CSS file is that it makes the individual pages smaller and therefore quicker to load. Also, you only have to alter one file to change the style of your web site.

Three methods of using CSS
These three methods share a common syntax. E.G.

Tag { attribute: value; }

Note the colon , semi-colon and curly brackets!

When applied to a single tag, known as an inline style, the tag and brackets are omitted.E.G.

<h3 style="color: red;">

When applied to the whole of a single page, known as an embedded style sheet, 'style' becomes a tag in its own right within the 'head' section. E.G.

Some older browsers will display the text between the style tags so it is good practice to put this in html-comment tags e.g. 

When applied to a whole group of web pages, known as an external style sheet, it becomes a text file with the extension css. Web pages link to the style file using the 'link' tag.E.G.

An additional attribute is media. This can have values "screen" or "print". To see the effect of this click on 'Printer friendly version' which puts the content on a browser page of its own. Now click on the 'File' menu and then on 'Print Preview'. Note the disappearance of the background image and the printer link. Also note the change of font!

An inline style takes precedence over an embedded style sheet which, in turn, takes pecedence over an external style sheet. Style editor Top Style Lite from Bradsoft (www.bradsoft.com)is a freeware version of Top Style Pro. It is a text editor with semi-automated features to write external style sheets. It presents the user with a menu which can be double-clicked to insert the selected feature.

More CSS

Here is a specimen css file:-

body {
   background-color: transparent;
   color: #003300;
   background-image: url("bg.jpg");
   background-repeat: repeat;
   background-attachment:fixed;
   font-family: "comic sans ms", arial, verdana, helvetica, sans-serif;
   margin-right: 25px;
   margin-bottom: 15px;
   margin-left: 15px;
   }
a:link {
   color: #000066;
   }
a:visited{
   text-decoration: none;
   color: #003300;
   }
a:hover {
   text-decoration: none;
   color: #003300;
   }
a:active {
   text-decoration: none;
   color: White;
   }
h1 {
   text-align: center;
   font-style:italic;
   font-size: 2.5em;
   font-weight: bold;
   background: #c0c099;
   color: #003300;
   }
h2 {
   text-align: center;
   font-size: 1.7em;
   font-weight: bold;
   font-style: italic;
   background: transparent;
   color: #003300;}
h3 {
   font-size: 1em;
   font-weight: bold;
   background: transparent;
   background-color: #003300;
   color: #ffffcc;}
h4 {
   text-align: center;
   font-size: 1em;
   font-weight: bold;
   background-color: transparent;
   color: #006666;
   text-align: center;
   }
h5 {
   font-size: 0.7em;
   font-weight: bold;
   font-style: italic;
   background-color: transparent;
   color: #000066;
   text-align: center;
   }
h6 {
   background-color: transparent;
   color: #000099;
   text-align: center;
   font-weight: bold;
   }

The meaning of the items is as follows:

Body
The background color is transparent. This does not mean anything as a bit further down a background image is given (bg.jpg). However, by specifying the background color we stop the user from applying their own, and possibly discordant, background color. This can sometimes cause problems with the W3C CSS Validator.

The color is specified as a darkish green. This refers to the text; again specified further down, but given for the same reason as the background color.

The background image is in the same folder as the pages it appears in. It is tiled (repeated) over the whole page. It is also fixed, so that although the content may be scrolled, the background may not. Alternatively it can be applied only once (repeat: no-repeat;), applied as a strip across the page (repeat: x-repeat;) or down the side of the page (repeat: y-repeat;).

The font is specified in the same way as it would be in HTML. The alternative fonts, given in the preferred order, are separated by commas. Where a font has a name of more than one word, it must be in quotes.

The margins can be specified separately or as one.

a:link a:visited a:hover and a:active
It is usual that text links are coloured. Blue for unused links and magenta for links that have been visited (used). However a bit more variation is allowed in CSS. The text-decoration refers to the underlining of the links.

h1 to h6
The background for some of the font sizes is specified as transparent for the same reason as in body above.

The remainder of the attributes are fairly obvious.

CSS Validation

CSS files can be validated by CSE HTML Validator, which can be downloaded from http://www.htmlvalidator.com.

Alternatively, CSS files can be validated by Style Studio (http://www.style-sheets.com)

CSS Play
A great website which showcases the Power of CSS is www.cssplay.com.

Previous Lesson

Next Lesson

A layered menu for Lynx users