CSS concepts

This page explains the concepts of CSS. If you have not already done so you may wish to read the following articles first ... Style sheet concepts

Separating content from styling

The current thinking in accessible web site design is that data/content (HTML pages with images, boxes, animations etc) and styling (presentational look) should remain separate whenever possible. Data should retain logical semantic flow however it is styled.

Click here for a presentation on the concepts of Semantic mark-up.

Web sites styling should therefore be performed by a linked external CSS (cascading style sheet) document.

Let's be clear about this ...

An HTML/XHTML or dynamic content web page document will contain tags which define structure (div), text, and links to media (images, Flash, video etc) ... but the presentational look (styling) of it will be handled by a separate linked CSS.

Separating the content (html and media) from the formatting (CSS) has 5 primary purposes ...

It helps make the site accessibility compliant (the text can be read in a logical order by screen readers for example)
The same CSS can style multiple pages
Style changes effect every page when the CSS is edited
Separate style sheets can be created to redefine the look of a page for different devices (printers, computers, TVs, mobile phones etc).
Sites are easier to update.

The building of an XHTML / CSS page could follow this order ...

Create an HTML/XHTML document and add text
Format the page with tags (p, h1, a href, ul etc)
Prepare for layout and positioning by creating <div> tags with unique IDs
Create an external CSS and link it the XHTML page
Re-define the property/values of tags in the CSS
Define the property/values of your ID (div) tags in the CSS

What is a cascading style sheet (CSS)?

A Cascading Style Sheets (CSS) is a style sheet for web pages which are HTML3 (or greater) compliant (all current versions of Dreamweaver can create them).

A CSS can contain 1 or more style selectors (or rules). Here is an example of a simple style sheet containing 5 style rules ...

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 to format (or markup) content. For example, a sentence of text surrounded by the paragraph tag <p> will look like this in HTML code view ...

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

If no further instructions are present, the browser will apply some default property/values (size, typeface, leading etc).

A style rule is a set of "instructions" which overrides the browser defaults to determine the precise appearance of the content in the browser window (normal non code view).

A style rule comprises 2 elements ...

A selector which targets a tag (in the below example the selector is "p"
A declaration (between these brackets "{ }") which contains one or more properties (or attributes) and an associated value.

A style rule applies one or more property/value pairs to a tag. For example, the following style rule styles text within a <p> tag with some properties ...

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

Styles are usually collected together in a style sheet (CSS) which is attached to the html pages.

What is a selector?

All style rules have a selector which selects the tag it will apply properties/values to.

In the example above, "p" is the selector (this style rule will style all text formatted with the p - paragraph tag), and "font-family: Verdana, Arial, Helvetica, sans-serif;", "font-size: 10px;" and "color: #000000;" are the property/values which make the style rule.

What is a property (attribute)?

A property is a formatting option. Properties include things like ...

Font
Size
Weight
Colour
Position
etc

What can CSS control?

CSS can control the appearance of a wide range of page elements ...

Format typography including fonts, size, colour, background, leading etc
Format links
Format images and other objects
Create backgrounds, boxes and borders
Control positioning 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
etc

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.

CSS and browser compatibility

CSS works in most version 4 or later browsers such as ...

Netscape Navigator 4.5, 5 and 6
Netscape Communicator
Internet Explorer 4 and 5 (but version 7 and above are recommend because they are relatively bug free)
etc

(NOTE: Pre version 5 browsers can handle CSS erratically).

and ...