WebReference.com - Part 2 of chapter 1 of Cascading Style Sheets: Separating Content from Presentation, from glasshaus (6/7) | WebReference

WebReference.com - Part 2 of chapter 1 of Cascading Style Sheets: Separating Content from Presentation, from glasshaus (6/7)

To page 1To page 2To page 3To page 4To page 5current pageTo page 7
[previous] [next]

Cascading Style Sheets

Improved Performance

By providing one level of indirection, or abstraction, CSS embedded in the head of a document streamlines document markup, improving download times and speeding up page rendering. Instead of relying on markup to instruct browsers on how to display each separate instance of an element, CSS allows us to declare a style rule once and have that presentational cue apply to all such elements. Let's take the bloated HTML example from early in this chapter and see how much space we can save by applying CSS and the principle of the separation of presentation and structure:

<style type="text/css">
td {
  background: #FFF;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: .6em;
  text-align: right;
  }
td.left {
  text-align: left;
  }
a {
  font-weight: bold;
  }
</style>
<table border="0" 
       cellpadding="2" cellspacing="2"> 
  <tr valign="top">
    <td width="33%" class="left">
      <a href="http://example.com">
        <nobr>
          Dow
        </nobr>
      </a>
    </td>
    <td width="33%">
      9698.30
    </td>
    <td width="33%">
      11.21
    </td>
  </tr>
  <tr valign="top">
    <td width="33%" class="left">
      <a href="http://example.com">
        <nobr>
          Nasdaq
        </nobr>
      </a>
    </td>
    <td width="33%">
      1850.43
    </td>
    <td width="33%">
      -5.10
    </td>
  </tr>
  <tr valign="top">
    <td width="33%" class="left">
      <a href="http://example.com">
        <nobr>
          S&amp;P 500
        </nobr>
      </a>
    </td>
    <td width="33%">
      1092.50
    </td>
    <td width="33%">
      -1.94
    </td>
  </tr>
  <tr valign="bottom">
    <td colspan=3>
      Quotes delayed by 20 minutes.
    </td>
  </tr>
</table>

I've removed all the <font> elements and bgcolor attributes from the table cells, and replaced those presentation directions with three style rules. In so doing, I've cut the size of the HTML markup down from 2456 characters to 954 characters, and that's even after adding in missing quotation marks around attribute values, which were missing in the original markup. Even after including the style rules in with the markup, I've still cut the size of the file by more than half to 1169 characters, and the look of the table remains virtually identical in all major browsers.

In more complex situations, even more file size savings can be achieved. For instance, advanced CSS rules allow us to group selectors, so that one rule can apply to multiple elements, like so:

h1, h2, h3, h4, h5, h6 {
  font-family: Arial;
  color: green;
  }

Furthermore, another level of indirection can be added by using external stylesheets, creating even greater download time reductions. The examples you've seen above have used embedded stylesheets, which are contained within the <head> element of the page to which they apply. Using external stylesheets allows you to link a stylesheet to multiple XHTML pages. This can significantly improve performance on a site, since the stylesheet needs only to be downloaded once per visitor. It is then stored in the visitor's browser cache, and subsequent page loads from the site by that visitor require only the download of the XHTML markup.

Smaller file sizes and cached external stylesheets not only mean a speedier site, which makes your visitors happy, but can also result in lowered hosting costs for you, as your site takes less bandwidth to serve.

In addition to bandwidth savings and the speed increases your site visitors will enjoy when you use well-structured markup and CSS, you as a web professional will have at your disposal a powerful style language that allows much greater control over the appearance of your pages than <font> and <table> elements could ever provide.

As if that wasn't enough, CSS and solid markup are the foundation for DHTML, with which you can add dynamic behaviors to your web documents. With DHTML, JavaScript is used to manipulate page elements and their style properties to create dynamic pages that can react to user input, animate page elements, and provide new and innovative interfaces to your site visitors. We won't be talking much about DHTML in this book, but the skills you'll learn here will set you well on the path to understanding how to build dynamic sites with DHTML.


To page 1To page 2To page 3To page 4To page 5current pageTo page 7
[previous] [next]

Created: June 20, 2002
Revised: June 20, 2002

URL: http://webreference.com/authoring/style/sheets/cssseparate/chap1/2/6.html