The Style sheet used to create this document

An example of a linked Style Sheet

This page has been made to demonstrate how to create a simple linked cascading style sheet (CSS). A style sheet is a text document you can create with any text editor, it has the extension "css".

Linking the web page to the style sheet

In your HTML document you need to include a reference to the style sheet. In the case of this page the CSS is called "example.css" which exists in the same directory as the HTML page. The reference needs to go in the head element like this:

<html>



<head>



<link rel="stylesheet" href="example.css" type="text/css">



<title>Worked example of a linked Style Sheet, By Roger Jones</title>



</head>

The "href" bit tells the HTML document the location of the style sheet.

Curly Braces {}

Style sheet statements have a selector (can be an HTML element such as <P>) and a declaration-block {a set of instructions in curly braces}. Here is an example:


P {font-family : "Times New Roman", "Times", Serif;}

In this case " P " is the selector for the <P> (paragraph) HTML element and " {font-family : "Times New Roman", "Times", Serif;} " is the declaration-block.

Setting Page Foreground and Background colours and Background Image


BODY {color : black; background : olive url(ltgranit.jpg); }

NB: color = text colour

Here we declare that the foreground (text) colour is black, the background is olive and the background image is ltgranit.jpg.

Setting the Font


BODY {font-family : "Georgia", "Times New Roman", "Times", Serif;}

We can use style sheets to specify a range of fonts. In the above example if Georgia is not found, Times New Roman is used, if that is not found then Times comes into play, and if no named fonts are available the a serif font will be used. N.B. Serif does not have quote marks (") surrounding it as it is a key term.

Combining the Two

We could express the above in one declaration:

BODY {font-family : "Georgia", "Times New Roman", "Times", Serif;

	color : black; background : olive url(ltgranit.jpg);}

With this all elements within the <Body> tags will have black serif text with an olive background and the background image ltgranit.jpg. (Unless we define them differently)

Getting rid of underlines on links (<A HREF> </A>)

A {

	font-weight : bold;

   	font-family : "Verdana", "Arial", "Helvetica", Sans-serif;

	text-decoration : none; }

In the above example all <A> elements are given a distinctive font, are made bold and and lose their underline with the " text-decoration : none; " statement.

Getting link underlines back "On Hover"

A:hover {

	color : red;

   	background : white;

   	text-decoration : underline; }

Internet Explorer 4 supports the "On Hover" property. If you are in IE4 or higher put the mouse cursor over this link. This allows you to give a distinctive visual clue to your links. Note how the background changes.

Setting link Colours

A:visited {

	color : navy;

	background : transparent; }



A:link {

	color : green;

	background : transparent; }

These are the colours used in this document.

Redefining Headlines

H1, H2 {

	font-family : "Verdana", "Arial", "Helvetica", Sans-serif;

	color :  maroon;

	background : transparent; }





H2 {

	font-weight : 700;

	font-size : 110%;}





H1 {

	font-weight : 800;

	font-size : 110%;

	text-transform : uppercase; }

The first bit sets up <H1> and <H2> to have the same font and colour.

The next sections set the boldness (font-weight) and relative size. (I've never liked very large <H1>'s). <H1> is forced to display in uppercase (only supported on some browsers).

Changing Margins and Background Colour

Pre {

	font-family : "Courier New", Courier, mono, monospace;

	background : white;

	margin: 0em 5em 0em 5em}

The paragraph above is within <PRE> tags. The background is white. The margin is specified in em's as they are a relative size based on the font specifications. Margins are specified as follows: top, right, bottom, and left.

The named colours in CSS:

This table will only produce colours if your browser uses CSS stylesheets

aqua		black
blue		fuchsia
gray		green
lime		maroon
navy		olive
purple		red
silver		teal
white		yellow

The CSS Source for this document

(Apart from the colour table)

P {

   font-family : "Georgia", "Times New Roman", "Times", Serif;}



H1, H2 {

   font-family : "Verdana", "Arial", "Helvetica", Sans-serif;

   color :  maroon;

   background : transparent; }





H2 {

   font-weight : 700;

   font-size : 110%;}





H1 {

   font-weight : 900;

   font-size : 110%;

   text-transform : uppercase; }



A {

   font-weight : bold;

   font-family : "Verdana", "Arial", "Helvetica", Sans-serif;

   text-decoration : none; }





A:visited {

   color : navy;

   background : transparent; }



A:link {

   color : green;

   background : transparent; }





A:hover {

   color : red;

   background : white;

   text-decoration : underline; }





A:active {

   color : black;

   background : transparent; }





.reg {

font-size : medium;}



Pre {

font-family : "Courier New", Courier, mono, monospace;

background : white;

margin: 0em 5em 0em 5em}



BODY {

	font-family : "Georgia", "Times New Roman", "Times", Serif;

   color : black;

   background : olive url(ltgranit.jpg) repeat; }

Click Here if you want to see the style sheet for the colour table