Introduction

This page explains the concepts of CSS. If you have not already done so you should read the following 2 articles first ...

Click here to read an article on style sheet concepts .

Click here to read an article on why using XHTML and CSS is a good idea.

What is a cascading style sheet (CSS)?

Cascading style sheets (CSS) are style sheets for web pages. A CSS is a collection of 1 or more styles (also called Rules). Cascading style sheets can be used with web pages which are HTML3 (or XHTML) compliant (all current versions of Dreamweaver do this).

Here is an example of a simple style sheet containing 5 styles ...

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color: #003366;
font-weight: bold;
text-align: left;
}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;

}
a:hover {
color: #FFCC00;
font-size: 10px;
}

a:visited {
color: #66FFFF;
font-size: 10px;
}

a:link {
color: #FFFFFF;
font-size: 10px;
}

What is a style (also called a rule)?

HTML uses a system of tags. A sentence of text wrapped in the paragraph tag will look like this ...

<p>This is a sentence.</p>

A style selects a tag and applies one or more attributes to it . For example, the following style, selects the <p> tag and styles any text within it with some attributes ...

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

What is a selector?

In CSS terms, a style is known as a selector because a style selects the tag it will apply attributes to. You can read about the different categories of selectors here.

In the example above, "p" is the selector (this rule will style all text formatted with the p - paragraph tag), and "font-size: 10px;" and
"color: #000000;" are the attributes.

What is an attribute?

An attribute is a formatting option. Attributes include things like ...

Font
Size
Weight
Colour
Position
etc

Here is an example of some CSS style attributes ...

font-size: 10px;
color: #000000;

What can CSS control?

Most features of CSS control typographic formatting but CSS can do more ...

Format typography including fonts, size, colour, background, leading etc
Format links
Format images and other objects
Create backgrounds, boxes and borders
Control positioning (also known as Layers) of objects such as images and text and boxes
Allow the layering of objects on top of each other and the ordering of those layers

3 types of CSS style sheet

There are 3 basic types of Cascading Style Sheet (collections of styles) ...

Inline An inline style sheet is positioned within a single instance of an ID or tag which means it cannot be applied to multiple elements on a page or multiple pages.
Internal A collection of styles can be stored internally within the <head> tag of an html page and used to format text on that page.
External A collection of styles can be stored externally as a separate document, a so-called external .css file, which is linked or "attached" to html pages. This is the simplest type of style sheet to understand as it functions in the same way as other types of style sheets. In fact using an external CSS is recommended if you want to separate content from formatting.

MORE ON EXTERNAL STYLE SHEETS

An external CSS is a separate file, stored within the local and remote site folders and which is linked or "attached" to a single or number of HTML pages.

(the external CSS file in this sites remote site folder)

External CSS's must be named in accordance with ISO naming conventions and end in the .css extension.

External CSS files can contain any type of selector styles (discussed below) and can be attached to any number of html pages. If you change a style in the CSS file, all all html pages which contain elements that have been formatted with that style will update to reflect the changes.

Click here for advice on how to create and attach a CSS in Dreamweaver.