CSS Benefits

...important to note that while CSS allows good document structure, it does not enforce good structure.

— Mark Pilgrim

• Ease of updates.

  Most people familiar with style sheets consider this the greatest benefit. For example, if you have a ten-thousand-page web site and you need to change the colors, it’s a simple change to one CSS file. With full CSS-P and semantic markup, you can completely redesign a site with one style sheet change.

• Separation of content from style.
  • Alternate Visual Styles
    • Different graphic designs

      Dave Shea’s CSS Zen Garden is the best example of complete redesigns using only style sheets. Design submissions from people around the world demonstrate how the same bit of data can be drastically repositioned and styled.

    • More accessible designs

      Using the same technique to supply a different graphic design, you could also provide a more accessible design for your site. For example, larger fonts and high-contrast colors may help low-vision users.

    • Different views

      This presentation contains two main views: web and presentation. The presentation view is set up like a PowerPoint presentation and only contains the main points of information. The web page view has a different layout and the full notes (including presenter’s notes).

      This technique could be also be used on a company intranet to display only relevant information to individual viewers. For example, a large table of project management data could filter which information was relevant to each department. There could be a view for developers, designers, managers, client representatives, etc. Each of the departments would receive the same file, but need only view the information relative to their specific job.

  • Print CSS

    With full use of CSS-P and semantic markup, there is no longer a need for separate “printer-friendly” pages. In all recent web browsers, a user can print as normal and automatically receive a stylesheet set up specifically for printing. For example, information not essential to the content (like a navigation menu) can be hidden and the page could be printed with a different font. This presentation’s content prints with a serif font for easier reading, it prints without the navigation menu, and even displays URLs of links in CSS2-compliant browsers.

    For more information on print style sheets, see Going to Print, an ALA article by Eric Meyer.

  • Aural styles

    To the best of my knowledge, only one browser, Emacspeak for Linux, currently supports the W3C’s ACSS Specification. Aural styles do for screen readers and speech browsers what screen styles do for GUI browsers. Once they are well-supported, an author will be able control various aspects of the screen reader’s speech, such as voice-family, speech-rate, and volume.

    For more information on aural styles, view the ACSS Specification.

• Lightweight, semantic, code

  In the previously noted quote, Mark Pilgrim says that CSS allows good document structure. The benefit of this is that you can strip down your markup to the bare metadata essentials. Therefore, the file size is much smaller and the files download a lot faster.

  This page (in web page view) is about 9k. If you include all cacheable items like the style sheets and images, it’s still under 20k. An equivalent page in presentational HTML could easily be 60k or more. In fact, I’ve seen web sites that contained over 60k of whitespace and comments. Yikes! Less bandwidth equals happier readers. On an enterprise scale, less bandwidth equals more money.

  Read Eric Meyer’s Interview With Mike Davidson of ESPN. Although I don’t agree with Mike’s views on validation, the point is that ESPN saves 2 terabytes of bandwidth per day because of their CSS redesign. If you’re not sure how much that is, just know that it’s a huge amount.

• Ability to override styles (user styles)

  User Style Sheets will be discussed in more detail on the following page.