Website Anatomy
Website CSS Style Sheets
Cascading Style Sheets (CSS) provide a mechanism for styling the layout of a web page outside of the page itself. This means that the web page can be designed as a semantic document. The Wikipedia definiton of Sematic reads:
Semantics (Greek sēmantikos, giving signs, significant, seebma symptomatic meaning, from sēma (σῆμα), sign) refers to aspects of meaning, as expressed in language or other systems of signs. Semantics contrasts with syntax, which is the study of the structure of sign systems (focusing on the form, not meaning). When analyzing languages, an analysis can be said to cover both the "syntax and semantics" concerning both the format and meanings of phrases in a language. The term semantics can apply not only to natural languages, such as English, German or Latin, but also to technical languages, such as a computer programming language.
Well that's cleared that up then hasn't it? Basically semantic web design means that the document stores the information while the layout is dealt with elsewhere. The great thing about styling output using CSS style sheets means that the same page can be displayed in different ways depending on the platform being used by the visitor. For example we can build a style sheet that formats our page for printing so that the user is delighted by the lack of menu links, useless ink draining images and non informative stuff! Try a print preview on any of the pages on this site.
If PDA users are using a standards following browser then we can build CSS sheets to display our pages nicely on these tiny screens:
If we had not created a CSS style for handheld devices then our page would have looked a bit like this:
As you can see the PDA would only display the top left corner of the page with the main navigation menu overlapping the logo - yukk!
CSS style sheets allow us to style our pages for output on multiple devices without having to alter our base documents.