Cascading Style Sheets CSS - Introduction

CSS Cascading Style Sheets allow for much greater control of the style and layout of a web page. Using CSS allow definition of fonts, sizes, margins, colours, links, alignments.

If a separate style sheet is made it can be linked to other pages within the site so that a consistent format is given to the site, which also means if you wish to change the look of the site it can be done by just editing the style sheet. Style Sheets usually have the extension .css.

There are three methods of implementing style sheets:

Inline - Added to standard HTML tags.
Embedding - Added to HTML code between the <head> and </head> tags.
Linking - Located within a separate CSS file.

When using CSS, it is important to understand the way in which precedence works i.e. which method overrides which. The following table shows how this precedence works.

Priority	Precedence
1	HTML tags override all other tags.
2	CSS inline tags override embedded and linked tags.
3	CSS embedded tags override linked tags.
4	CSS linked tags won't override any other tags.

CSS format

The CSS format is selector {property: value;}

The selector is a browser command and is followed by a property. The property is a word describing the selector, which further instructs the browser. The value specifies the value of the property.

Does this sound confusing? Not really as CSS is formatted in a similar manner to standard HTML.

HTML: <font size="3">

CSS: p {font-size:14pt;}

Basically the HTML Element is equivalent to the CSS Selector and the HTML Attribute is equivalent to the CCS Property and the Values are the same.

Inline Style

Inline style tags are used within standard HTML code using the STYLE parameter. The following example will remove the underline of an individual link:

<A HREF="http://www.mydomain.co.uk" style="text-decoration: none">my link</A>

Note: Although you can use upper or lower case for CSS, lower case should be preferred as if you move to XHTML all tags and attributes are requires to be lower case.

Useful Sites

Top of Page

Page built in 0.0004 seconds