I’ve been promoting good User Interface design, usability, accessibility, W3C standards and best practices in various DSI web projects over the past few years. Here I want to introduce a crucial part of the client-side/presentation layer jigsaw: Cascading Style Sheets (CSS).

CSS are a W3C-approved and -standardised way of separating structure from presentation on the client side, encouraging leaner, cleaner HTML (whatever the technology used to generate and serve it) and ease of updating. Background colours, font specifications etc., and even structural layout information can now be separated from the HTML.

Cleaner HTML means faster browser parsing and rendering, cross-browser compatibility, improved accessibility for users of different abilities, better search engine indexing, and faster development and updating times. Ultimately that all adds up to an improved bottom line – and don’t forget that accessibility isn’t ONLY about politeness, fairness, and anti-discrimination, it’s also about maximising a website’s audience and potential customer base.

The great advantages of CSS are marred slightly by different browsers’ non-compliance with W3C standards, in subtle but frustrating ways, especially in the areas of page layout, which I will deal with later. But by and large CSS works extremely well and standards compliance is improving all the time.

DECLARATION

Like HTML, CSS styles are simply declared and offered to the browser for parsing and interpreting; no compiling or validation is required or even possible. CSS essentially involves (semi-colon delimited) name:value pairs associated with HTML elements which define the styles that the markup recommends to a browser or other display technology.

I say recommends as CSS doesn’t rigorously stipulate styles, nor should it. The User is given ultimate control over how content is displayed, so that if a large font-size is required by a User, then her/his browser settings can over-ride the CSS if necessary. This is as it should be and entirely in accordance with Tim Berners-Lee’s vision of the universally-accessible web.

Styles can be declared in three different ways:

1. Inline – using the style attribute within a tag/element, and applied to the tag/element only:<p style="property1:value1;property2:value2">In-line styled paragraph content.</p>
2. Embedded, with rules grouped inside curly braces in the document’s head within a style tag, and applied to the document only:     p {property1:value1;property2:value2;} /* all paragraphs will automatically inherit these styles, unless told otherwise */
3. Externally located in a .css file (simply a text file full of style rule declarations as in 2. above) and linked from the document head, either using the link tag (a venerable but little-used pre-CSS HTML element to designate the relationship between documents) or the @import declaration (which is also available to load stylesheets from inside another stylesheet):
<link rel="stylesheet" type="text/css" href="css/stylesheet1.css" mce_href="css/stylesheet1.css" >

or

<style type="text/stylesheet">
@import url("css/stylesheet1.css")
</style>


External linking/importing has the obvious advantages of centralisation, as every document requiring a particular look and feel and/or layout can link to the same stylesheet. Style updates affecting the entire site only need to be made once to a single file, and is the preferred method in most development situations. But aspects of inlining and embedding can be combined with external css also, as we shall see.

CASCADING

Styles cascade, which means among other things that the most local style “wins” in the case of a conflict i.e. an in-line style inside an element tag wins over an embedded style which wins over an external stylesheet. This can be useful e.g. in the case of a generic style requiring a once-off local modification – simply extend the generic styles defined in the external css file (i.e. simply link/import the css file) and over-ride the particular style by adding a local inline modification.

E.g. to define a generic font-style for all paragraph tags in the external css file:

p{font-family: Verdana, Arial, sans-serif;font-size:100%}

In this case the browser will try and display standard pragraph text in Verdana, then Arial (if the browser doesn’t have Verdana installed), then any generic sans-serif font (if it doesn’t have Arial installed), in 100% of the base-line font size (set in the body style rule, or the browser default). Any HTML element can be generically styled like this, other common style attributes being margins, borders, font-colours, background colours and/or images, content-alignment (left/right/centred)…

A particular paragraph may now be re-styled locally, or inline as a once-off, without changing the external generic style:  
<p style="font-size:80%">80%-sized paragraph content here, which inherits all other externally-defined paragraph styles.</p>
If the above inline style became necessary more than once, a class could be defined for it and added to the external file. 

If there are any requests I’ll look at classes, ids and structural CSS in another instalment.

- Alan Murphy

Technorati Tags: CSS, HTML, xHTML, Web Applications, Good Code, Web Pages, Page Authoring