What does CSS look like and where does it go?

CSS is a language that controls the style of a HTML document. CSS describes how HTML elements should be displayed.   The example to the right shows how the style of Heading Type 1 (H1) and (H2) are defined. CSS elements are put inside curly brackets. Like HTML elements, CSS elements have Attributes and Values   e.g. H1 has an attribute called colour which in the case has the value white

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

Note: It doesn't matter whether you write your declarations on the same line or in a list layout. The important thing is that you enclose the declarations within curly braces and that you separate them using semicolons. e.g.

Linking your CCS sheet to your HTML pages

To 'tell' your HTML page which stylesheet to use you need to include the appropriate code in the Head section of your HTML page. Below is an example, in this case the stylesheet is called morgan.css and that is being stored in a folder called css.

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

Example file structure using DreamWeaver

The image underneath shows a typical file structure for a simple website. Make sure you have image and css folder to store your assets in!