Wrox Home  
Search
Professional Web 2.0 Programming
by Eric van der Vlist, Danny Ayers, Erik Bruchez, Joe Fawcett, Alessandro Vernet
November 2006, Paperback


Using Cascading Style Sheets to Create Clean and Simple Pages

Appropriately using CSS is the single most important measure you can take to get on the path to simple and clean pages. Unfortunately, it is not a simple one: you need to learn about the capabilities of CSS, but also its limitations, and in particular the limitation imposed by different browsers that often implement a very incomplete subset of the CSS specification.

There are cases where using CSS is obvious: say your site contains reviews of books, and as the title of book appears in the text, you always want that title to be in the brown color and in italic. You could certainly write every book title this way:

<font color="maroon"><i>Professional Web 2.0 Programming</i></font>

Instead, you might want to write:

<span class="book-title">Professional Web 2.0 Programming</span>

And then define the CSS book-title class as:

.book-title {
    font-style: italic;
    color: maroon;}

With the CSS class book-title you move the declaration of the font style and color out of your HTML, leaving the HTML code simpler. The HTML gets simpler but also richer, as the name of the style, book-title, adds semantic to the string Professional Web 2.0 Programming.

Choosing Appropriate Elements

Choosing the appropriate HTML elements will make your page easier to understand, not only by you or other web developers who will be working with the code, but also by other software that will try to make sense of the content in your page, like search engines, screen readers, or browsers on mobile devices. Consider this example: you have a table of contents, without links for the sake of simplicity. Once displayed, it could look something like:

Introduction: Web 2.0, Why?
Before We Start... The Hello World of Web 2.0
Client side
    Page Presentation
    JavaScript and Ajax
Between Clients and Servers
    HTTP and URIs
    XML and alternatives

Avoid picking HTML elements based on how you want the page to be rendered. With this approach, you might write code like this:

Introduction: Web 2.0, Why?<br>
Before We Start... The Hello World of Web 2.0<br>
Client side
<blockquote>
    Page Presentation<br>
    JavaScript and Ajax
</blockquote>
Between Clients and Servers
<blockquote>
    HTTP and URIs<br>
    XML and alternatives
</blockquote>

Another extreme is to consider that since everything can be styled with CSS, in HTML you can just use the <div> and <span> elements and tag them with the appropriate CSS class. This might result in:

<div class="chapter">Introduction: Web 2.0, Why?</div>
<div class="chapter">Before We Start... The Hello World of Web 2.0</div>
<div class="chapter">Client side</div>
<div class="section">Page Presentation</div>
<div class="section">JavaScript and Ajax</div>
<div class="chapter">Between Clients and Servers</div>
<div class="section">HTTP and URIs</div>
<div class="section">XML and alternatives</div>

It goes without saying that neither of those two extremes is appropriate. Instead, you want to look at your content and ask: what would be the most appropriate construct in HTML I could use? Here you have a table of contents, which essentially is a list of chapters or sections organized in a hierarchical way. So you could use HTML lists and lists within lists to represent the hierarchy. HTML has two types of lists: ordered and unordered. In this case, chapters and section have been placed in a given order for a reason. So those are ordered lists:

<ol class="toc">
    <li>Introduction: Web 2.0, Why?</li>
    <li>Before We Start... The Hello World of Web 2.0</li>
    <li>
        Client side
        <ol>
            <li>Page Presentation</li>
            <li>JavaScript and Ajax</li>
        </ol>
    </li>
    <li>
        Between Clients and Servers
        <ol>
            <li>HTTP and URIs</li>
            <li>XML and alternatives</li>
        </ol>
    </li>
</ol>

Note the class="toc" on the outer <ol>; this is all you need to style the table of contents with CSS. Finally, this last iteration used HTML elements that match the semantics of the content.

This article is excerpted from Chapter 2, "Page Presentation," by Alessandro Vernet, from the book Professional Web 2.0 Programming, by Eric van der Vlist, Danny Ayers, Erik Bruchez, Joe Fawcett, Alessandro Vernet (Wrox, 2006, ISBN: 978-0-470-08788-6). Alessandro Vernet has been involved with web and XML technologies from day one. Prior to co-founding Orbeon, he worked at Symantec Corporation as part of the VisualCafe team, working on the next-generation RAD for web applications. He is the co-author of The Best of Java, received the 1998 Logitech Award for his master's thesis on Jaskell, and is one of the architects of the open source Orbeon PresentationServer (OPS) project. His current interests lie in XML technologies and web applications. He recently implemented an XForms engine using Ajax/JavaScript, co-authored the XML Pipeline Language specification published by the W3C, and is active in two W3C Working Groups: the XForms and XML Processing Model Working Groups. He holds an MS/CS from the Swiss Institute of Technology (EPFL) in Lausanne, Switzerland. The other recent Wrox.com excerpt from this book is Future-Proofing Your URIs.