Planning XHTML for CSS

Why is it important, from the perspective of design/style of a webpage, to critically think about the structure of your content, navigation and other sections?

Cascading Style Sheets (CSS) are external style sheets which provide a “means of separating the content of an HTML document from the style and layout of that document” [2]. CSS is an incredibly useful and effective tool, but can only be truly maximised through creating a well structured HTML page first. Thus, it is absolutely essential to think about the structure of your content, navigation and so forth if one wishes to benefit from the numerous advantages of CSS.

Some of the main advantages of style sheets are their ability to save the designer of a webpage a lot of work through making it very easy to change the style of a document compared to the difficulties you would face with table based design [2]. Aside from the other advantages resulting from the reduced file size and so forth, CSS means that the “layout and position of navigation can be completely consistent across a site” [2] which was previously not as easy to achieve.

W3Schools sees CSS as “a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once” [3]. The advantage of CSS is that the designer can set styles for each HTML element and then apply this easily to numerous Web pages. In this way then, “style sheets can save a lot of work” [3] through clearly separating the document’s presentation layout from the HTML content of the document.

However, as I have said, CSS is only truly effective if the HTML content is well-structured. Thus in order to maximise the potential of CSS there needs to be a shift from thinking about the look of the webpage first to thinking in terms of the structure. One must divide the page into content blocks, think about what the purpose of these blocks will be, and then “design an HTML structure that supports the meaning and purpose of your content” [1]. After this one can add the appropriate content in the appropriate divisions of the page, and only then should one start conceiving of the layout of the page.

Ultimately, if the HTML is well-structured, the page can be made to look like absolutely anything. This has been proved by the revolutionary CSS Zen Garden [4], whereby unlimited variations of the page were presented through using the exact same HTML page. In order to achieve this, one needs to just ensure content is clearly and neatly organised into and named attributes which “creates the context needed to write pinpoint accurate selectors for each individual element” [1]. The aim is to create a carefully structured HTML page, within which each element is used for its logical structural purpose.

Virginia DeBolt’s (2004) article, The Early Bird Catches the CSS: Planning Structural HTML, stresses the importance of creating well-organised and well-structured HTML pages which are structurally-ready for CSS [1]. While CSS takes some getting used to because it’s presentational attributes are different to that of HTML, there are many clear reasons for making the switch to CSS. Thus, there is clear reason to change the way in which one creates HTML content and to think about the end product through building it from the basic content up.

Works Cited

[1] DeBolt, Virginia. 2004. The Early Bird Catches the CSS: Planning Structural HTML. Retrieved from the World Wide Web on 02 March 2007:
http://www.wise-women.org/tutorials/cssplanning/

[2] Vord Web Design. Advantages of CSS. Retrieved from the World Wide Web on 05 March 2007: http://www.vordweb.co.uk/css/advantages-of-css.htm

[3] W3Schools. 2007. Introduction to CSS. Retrieved from the World Wide Web on 05 March 2007: http://www.w3schools.com/css/css_intro.asp#top

[4] CSS Zen Garden: The Beauty in CSS Design. http://www.csszengarden.com/