Scott Andrew - lo-fi acoustic pop superhero!

CSS is for separating structure, not content, from presentation.

This is content:


PROSPERO:

For you, most wicked sir, whom to call brother
Would even infect my mouth, I do forgive
Thy rankest fault, -- all of them; and require
My dukedom of thee, which perforce, I know,
Thou must restore.


This is content with structure:


<quote>
<character>PROSPERO:</character>
<text>
For you, most wicked sir, whom to call brother<br/>
Would even infect my mouth, I do forgive<br/>
Thy rankest fault, -- all of them; and require<br/>
My dukedom of thee, which perforce, I know,<br/>
Thou must restore.
</text>
</quote>


Note how the markup simply gives some generic structure to the content. The markup is not the content. Notice also how, even though we now have structure, we don’t really have any presentational information, with the possible exception of the BR elements to denote line breaks.

Now, let’s translate this into something a browser can understand.


<div class="quote">
<span class="character">PROSPERO:</span>
<p class="text">
For you, most wicked sir, whom to call brother<br/>
Would even infect my mouth, I do forgive<br/>
Thy rankest fault, -- all of them; and require<br/>
My dukedom of thee, which perforce, I know,<br/>
Thou must restore.
</p>
</div>


This is semantically similar to the earlier example, except we’re now using generic XHTML elements in place of the arbitrary XML markup. This decision is not without consequences though, as we’ve decided that quote and it’s embedded text are to be treated as block-level elements DIV and P, and will be displayed in the browser as such. If we wanted to keep all text inline (i.e, with no line breaks), we could have specified SPAN tags across the whole of the structure. More on that tomorrow. Now we have something a browser can parse.

Now, by applying CSS, we have have structured content with presentation:


div.quote {
  background-color:#ccffff;
  border:1px solid #cccccc;
  font-family:Georgia;
  font-size:12px;
  color:#993333;
  padding:10px;
  margin-bottom:16px;
}

p.text {
  font-style:italic;
  margin:10px;
}


This might look something like this (sorry, NS4 users):

PROSPERO:

For you, most wicked sir, whom to call brother
Would even infect my mouth, I do forgive
Thy rankest fault, — all of them; and require
My dukedom of thee, which perforce, I know,
Thou must restore.

This illustrates a common misunderstanding about CSS. CSS is for separating structure, not content, from the presentation. Markup is meant to give meaningful structure to content. The content can come from a database or text files; the structure from page templates, a CMS or XSL transformation. Keeping your content free of meaningless structural elements allows you to pour your content into another structure suitable for different devices. CSS allows you to apply client-appropriate and easily-varied visual style to that structured output, without having to alter your markup.