Separating presentation from content using CSS (Cascading Style Sheets)

Despite tremendous benefits to users, designers and developers along with valiant efforts by organizations such as The World Wide Web Consortium, The Web Standards Project and CSS Zen Garden to spread the word, the reluctance (continuously affirmed by working on recently created websites) some web designers and developers show towards migrating to CSS becomes increasingly amazing.

This post is an attempt to encourage proper CSS use for the separation of style and content by shedding light on what exactly separation of style and content means in the terms of CSS and the advantages it offers website designers, developers, and visitors.

Distinguishing between presentation and content

The most common term for the design/development concept is "separation of presentation and content", but what exactly is presentation as opposed to content?

Content refers to the information as well as its structure. While structure may seem in between the two, presentation becomes meaningless without structure and thus structural elements such as a <div>, a class name, or an identifier must also belong to the content.

Presentation refers to anything related to how the "content" (or structure) is presented. Size, color, margins, borders - anything that relates to how the content appears, rather than what it actually consists of, falls within presentation.

What is CSS

CSS is a way for website designers & developers to add STYLE (colors, fonts, borders, margins, etc.) to web pages. Most importantly, however, CSS is a way for the designers/developers to keep style information separate from the actual content of a website. CSS is perfect for custom website design projects.

It is well known that CSS has long been the recommended way to add style to web pages. However, the philosophy behind separation of content and style - where the true power of CSS lies - often goes misunderstood and thus not taken advantage of.

There are several ways of styling a document using CSS, all with different levels of separation from the content they're styling. I've included a few examples to help demonstrate what we're trying to accomplish:

Examples of varying degrees of separation between CSS presentation and content

In the days before CSS, styling used to be accomplished by applying HTML tags and adjusting the default properties' values. Not only is there no separation, but the following is currently deprecated, invalid HTML.

<body bgcolor="#000000">
    <div border="1" bordercolor="red">
        <p><font face="verdana" color="red">some red text in verdana</font></p>
    </div>
</body>

Using CSS we can style the HTML code in a very similar manner, using the valid "style" property. While this is obviously better than deprecated HTML attributes, the style is still equally ingrained in the content.

<body style="background-color:#000000">
    <div style="border:1px red">
        <p style="font-family:verdana; color:red">some red text in verdana</p>
    </div>
</body>

Using CSS we can completely separate the style information from the content. The power of separating presentation from content starts to become apparent - every <DIV> and <P> element for example will acquire their style information from the CSS in the header.

<head>
    <style type="text/css">
        body { background-color:#000000; }
        div { border:1px red; }
        p { font-family:verdana; color:red; }
    </style>
</head>
<body>
    <div>
        <p>some red text in the font verdana</p>
    </div>
</body>

Finally, by linking to an external CSS style sheet we can see how multiple documents containing nothing but content may all be styled by one single, separate style sheet. (The style sheet "styles.css" contains the style information in the header of the example above)

<head>
    <link type="text/css" rel="stylesheet" href="styles.css" />
</head>
<body>
    <div>
        <p>some red text in the font verdana</p>
    </div>
</body>

What separating content from presentation is not

I've seen the concept of separating content from presentation misunderstood and/or taken a bit too far.

For example, in HTML a <table> is used to display tabular data. Before CSS however, tables were often used to create the overall layout of a web page, menu links, or page elements. While switching from tables to CSS to lay a page out is obviously encouraged, I've seen quite a few developers confused to think that tables shouldn't be used at all. As a result, numerous ridiculous implementations and even tutorials for displaying tabular content in a tabular manner while "avoiding" tables have surfaced.

Although using them for layout is semantically incorrect, tables still serve a purpose and remain an important part of the XHTML specification!

Advantages of style that is separated from content

Having presentational information separate from the content of a web page or web site offers many direct benefits, including:

Full control over several web pages or an entire web site by manipulating a single CSS style sheet
Web sites that are widely accessible across browsers and to users with disabilities
More search engine friendly code
Future compatibility

Adding to the power of a single, external style sheet, using client and/or server side scripting we can also easily alternate between various CSS style sheets depending on many factors, including:

Whether the page should be formatted for a screen, or for print.
If a user clicks a button to change the style sheet to one with larger fonts, higher contrast, etc.
The time of day
Whether or not a user is logged in and the type of account they're logged in with
Which browser a user is accessing the website with

...and many more.

Bjørn Enki’s web design blog