Or: "How separation of presentation and content, aided by semantic HTML, can actually help you write better code."
In 1998, when I first got interested in web design, CSS seemed to be little more than an annoying way to set the default fonts and colors. My design was completely integrated into the HTML.
A project I worked on had a header in each document, with over 3 pages of code. A change in the design would require all of the documents to be edited.
Sometime around 2002, when I first started looking into CSS driven design, Wired had released their website with pure CSS design. I guess I can be excused for not taking the step myself, since the main browser at the time did still not support CSS very well.
But actually, the main reason I didn't use CSS driven design was that I hadn't understood it. Most examples I had seen at that time were ridiculously naďve and even counter productive. To me, it just didn't make sense.
You have probably heard of the importance of separation of presentation and content. The code is easier to work with, and you get accessibility and SEO for free!
Then, how can we achieve this?
By putting all the design into a CSS file, and hooking it together with well structured HTML code, we can achieve separation of presentation and content.
Consider this example:
The HTML:
<p>
<b>Small Headline</b>
<br>
<br>
Some text.
</p>
Can you see how the layout is mixed with the content? The headline is formatted with a <b> tag, specifically telling the browser that it should be bold. To get some vertical margin between the headline and the text below, a double <br> tag is used.
What if I decide I want some more or less margin, or another font for the headline? We need to separate the presentation from the content.
The solution is to stop thinking in terms of design when we write our HTML. Instead, the HTML should communicate the type of the content. This is called semantic HTML.
The HTML:<h3>Small Headline</h3>
<p>Some text.</p>
The CSS:
h3 {
font-weight: bold;
margin-bottom: 2em;
}
The HTML tags defines the structure of the document. The structure provides hooks to where the CSS rules can attach themselves. Read this article on semantic HTML for a deeper explanation.
Now, take a break from this article (but promise to come back!) and visit the css Zen Garden. Check out some of the designs. There is a lot of variety in the layout and design solutions, but all designs use exactly the same HTML code!
Have a quick peek at the HTML. You will find no hints in there, to how the page will actually look in your browser. What you will find is markup that identifies each piece of content. That makes it possible to define CSS rules that completely defines the design.
A site I was working on had a simple horizontal menu. Trying to use the HTML as a design tool, it was constructed like this:
The HTML:<a href="#">First</a>
|
<a href="#">Second</a>
|
<a href="#">Third</a>
The Result:
The first thing we should realize is that the hard blank space and the separator character are not part of the content. Would a person with a screen reader be interested in knowing how far apart I places my menu items, and what kind of separator I used? No, of course not.
It makes much more sense to implement this as a list of links. Lets see what we can achieve with some semantic HTML and CSS driven design:
The HTML:<ul class="Menu">
<li class="First"><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
The CSS:
ul.Menu {
list-style: none;
padding: 0;
margin: 0;
}
ul.Menu li{
display: inline;
border-left: 1px solid black;
padding: 0 9px 0 12px;
}
ul.Menu li.First{
border-left: none;
padding-left: 0;
}
The Result:
Violá. A simple horizontal menu, that can still be styled to any look.
Taking this to a higher level, we can build compound elements, where the code is simple and clear both in the HTML and in the CSS, while still providing total freedom for the design.
Let's say we have a catalog of toys. Instead of thinking about the design when we code the HTML, we should make it structured and clean. But we shouldn't forget to provide enough context and classes to be able to style it later:
The HTML:
<dl class="Toys">
<dt>Barbie doll</dt>
<dd>
<img/>
<p class="Description">Description</p>
<p class="ListPrice">$65</p>
<p class="OurPrice">$50</p>
</dd>
<dt>RC car</dt>
<dd>
<img/>
<p class="Description">Description</p>
<p class="ListPrice">$135</p>
<p class="OurPrice">$119</p>
</dd>
<dt>Crayons</dt>
<dd>
<img/>
<p class="Description">Description</p>
<p class="ListPrice">$4</p>
<p class="OurPrice">$3</p>
</dd>
</dl>
This is pretty much what Toys "R" Us are doing. There is a very good presentation that explains this in more detail: The Elements of Meaningful XHTML. (The section on XHTML compounds begins on slide 27.)
The ability to change the design of the entire website in a single place should be enough to convince anyone of the merits of CSS driven design. But it is not the most compelling reason. The code is simply so much more beautiful.
Imagine a web page with several menus. Maybe a main menu at the top, and a secondary menu at the bottom. You probably wouldn't like them to look exactly the same. (Most big websites do this. Google have 4 different menus.)
The CSS:
#Header ul.Menu a { color: red; }
#Footer ul.Menu a { color: blue; }
The HTML:
<div id="Header">
<ul class="Menu">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
</ul>
</div>
<div id="Footer">
<ul class="Menu">
<li><a href="#">Third</a></li>
<li><a href="#">Fourth</a></li>
</ul>
</div>
Exactly the same markup is be used, but the CSS rules selected by the containing element give us the opportunity to style it freely.
Once you take the step over to pure CSS driven design and semantic HTML, you will not look back. There's a whole new world to enjoy and explore!