CSS - cascading style sheet concepts by Matt Ottewill

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.

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 ...

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

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

1. Create an HTML/XHTML document and add text
2. Format the page with tags (p, h2, a href, ul etc)
3. Prepare for layout and positioning by creating <div> tags with unique IDs
4. Create an external CSS and link it the XHTML page
5. Re-define the property/values of tags in the CSS
6. 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 ...

h2 {
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 ...

1. A selector which targets a tag (in the below example the selector is "p"
2. 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) ...

1. 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.
2. 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.
3. 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 ...

• Safari 1 and above
• Mozilla's FireFox
• Opera
• Chrome
• etc

Read about CSS browser bugs here.

Types of selector

Now you understand the principals of style sheets you will need to know about the range cascading style sheet selectors.

Read about the different categories of selectors here.