Separating Content and Appearance

We have two different technologies for content and the way it looks: HTML and CSS. The idea behind these is that the two different roles are kept separate using the two languages.

If you have been following the advice in Semantic Markup, then this shouldn't be too hard. The way you write your HTML should still be about content: choose markup based on what the pieces mean and what are they for.

Basic Ideas

We have covered the basic ideas of separating content and appearance already when discussing HTML and CSS.

… and what this means when writing CSS:

We haven't talked much about the third compontent: behaviour. We will do this when introducing JavaScript, and will add another point:


Hopefully the benefits of creating web pages this way will become clear as you do it.

Since we have separated content and appearance into separate files, it's easier to work on them independantly. That could simply mean you can start creating content before really deciding what it will look like: it should be fairly easy to go back later and style the pages. You may have to add some tags or class and id attributes, but shouldn't have to make major changes to the HTML.

And later if you find you don't like the way your pages look, you can change one CSS file to update the apparance of your entire site.

On larger projects, there could be different people responsible for creating the content and the style for it. It's probably not realistic that they will work totally independantly, but they can mostly get on with their jobs without constantly coordinating with the others.

It is also possible to create entirely separate stylesheets for the same content. For example, you might want to create content for a presentation that looks one way while you are giving the presentation, but is reformatted if it is printed by participants.

It is also possible to use HTML content in very different contexts. For example, the EPUB format for ebooks is basically HTML+CSS wrapped up in a ZIP file. Having content and not styling information in HTML makes it easy to convert content to an ebook format, even though the way the reader interacts with it is very different (turning pages instead of scrolling, different shaped screen, maybe no colour, etc.).