Lesson: CSS, Creating Style with Standards, Part II

What if I told you that today, your site's source code could be reduced by two-thirds, saving you an equal amount of your bandwidth every month?

Your site would be more accesible to non-sighted users and alternative browsing platforms such as PDAs, indexed more efficiently by search engines, and would load faster by orders of magnitude, making for happier customers.

Site-wide design changes would take minutes rather than days.

This is all possible by designing with standards and CSS.

Part II: Behaviour, Presentation and Structure

There's just a little more theory before we start coding. Bear with me!

One of the key philosophies of standards-based web design is the separation of Behaviour from Presentation and Structure.

In most pages today, presentation and structure are handled by HTML. Sadly, FONT tags, tables for layout and spacer images from the hoary nineties remain the stock-and-trade to this day.

The web is moving in a direction to separate the following components from each other for a number of reasons:

Accessibility: If your site is written semantically, alternative browsing platforms that cannot display CSS can still use it
Allows for Easy Site-Wide Changes: Every page that refers to a stylesheet is affected by changes you make to it
Alternate Styles: You can provide the user with alternate styles, to provide a larger type size or even entirely different look
Modularity: XHTML can be read by XML and, in turn RSS
Reduces Redundant Code and Images: Why say it more than once? This also saves bandwidth
There are more reasons to take a standards-compliant approach to web design, but they are too numerous to cover here

Behaviour

Behaviour is more than linking between documents, one of the core concepts of Hyper Text first envisioned by Vannevar Bush. Behaviour, controlled by a scripting language such as JavaScript or the DOM, can be used to create complex, web-based interaction rivalling that of packaged software applications.

DHTML has also been used to create complex behaviour with arguable success.

Structure

Structure is the backbone of your web page. This is controlled by a markup language such as XML or XHTML.

Markup refers to the shorthand language used by newspaper editors to communicate with typesetters how a certain line of copy should be presented. XHTML works in much the same way with CSS.

For our purposes, we'll be using XHTML Transitional, a subset of XHTML that marries the foreward-looking advantages of XML, with the familiarity of HTML.

Presentation

This is what we're here for.

Presentation, controlled by CSS, is not the most important part of the three, neither can it function well without them. We're discussing CSS as the killer-app for web designers as a way to have your accessible site, and have it look good too!

What's Up DOCTYPE?

Have you seen this before in the source code of a web page?:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

What is all this complicated hoo-ha? The DOCTYPE is simply a self declaration a page makes to a browser. It says, "I'm this type of page. I can do these things but not those things."

You may find that certain DOM or CSS techniques will not work without a complete DOCTYPE, so do yourself a favour and include the above code before the <head> of each of your pages. You can simply cut-and paste this, or have a text editor like BBEdit create one for you.

Where's Your Head At?

You already make web sites, so I don't need to describe to you what the <head> of a page is.

Suffice it to say, the XHTML page needs to know where the external style sheet it is referring to lives. This reference lives in the <head>.

There are two ways – to my knowledge – of linking external style sheets to your page. They are:

and

The "c/" in the above lines refers to a folder called "c" that the CSS documents live in. If your stylesheet(s) occupies the root level of your folder, the "c/" is not neccessary.

The link method works well in older browsers (pre-version 4.0), that had limited support for CSS. The @import method is only supported by modern browsers.

You can use both of these techniques to your advantage. It's possible to feed a basic style sheet to older browsers with the link method and a more advanced one to a more compliant browsers with the @import method as I've shown above.

No browser detection scripts are needed to feed multiple styles to multiple browsers. Browsers are getting more and more standards-compliant. Soon, we wont have to create multiple stylesheets at all.

So we've got the housekeeping out of the way. Starting next week, we can style up our pages in earnest.

In Review

Separating your site's Presentation from its Behaviour and Structure can facilitate easier maintenance and less code.

If your HTML doc is written semantically, alternative browsing platforms such as PDAs and text browsers can display your content in a usable fashion.

The W3C recommends writing semantic markup in your XHTML doc. This means that tables are to be used to display tabular data such as statistics. Lists are to be used to, uh, display lists of items. Headers are to be used to convey importance and meaning, rather than to simply alter text size.

DOCTYPEs tell browser how to treat you page.

It's possible to feed a basic style sheet to older browsers with the link method and a more advanced one to modern browsers with the @import method.