Cascading Stylesheets are the standardized way to create format and layout of Web pages instead of using HTML tags, attributes and tables. CSS produces more usable, accessible, visually appealing and easier to maintain pages because presentation (formatting and layout) is separated from structure (content).

Usability and Accessibility | Visual Appeal | Design and Maintenance | Arguments Against | Related Links

Usability and Accessibility

• Pages load and render faster.
  • There are no complex nested tables, fewer lines of code and fewer, smaller files.
  • Stylesheets can be cached by the browser so only the unique part of the document, the content, needs to be downloaded.
  • The server load is lighter and less network bandwidth is used.
  • Pages will load considerably faster for users with slow connections.
• Pages are more likely to work for a larger percentage of users.
  • The site is more likely to work well and consistently with the large number of past, present and future browsers that support CSS standards.
  • The site is more likely to work with a variety of screen resolutions and output technologies (computer monitor, printer, screen reader, handheld device, etc.).
• Multiple views of an HTML document
  • The site can supply alternate stylesheets for different output technologies or groups of users.
• • A print stylesheet can be optimized for print, e.g. hide navigation bars and background colors.
  • Users can turn off some of the stylesheet's attributes (font sizes, styles and colors).
  • Users can turn off the default stylesheet entirely to get a text-only version of the site.
  • User-created stylesheets can format the content in a way that best suits their needs.
• Search engine optimization
  • The site is more likely to be correctly indexed and receive a higher ranking by search engines such as Google, since a larger percentage of the document contains content related to the search keywords.
  • Search engines can easily ignore external stylesheets, whereas they must parse HTML formatting to find the content.
• Correct ordering of content
  • HTML code in CSS-formatted documents can (and should) be presented in the order a user would want to read the content, independently of the page layout.
  • This is especially important for text-based browsing like screen readers and search engines, which do not need the formatting information in most stylesheets and can simply follow the content in the HTML document sequentially.
• Dynamic effects
  • Stylesheets can produce or simplify dynamic effects like rollovers, tabbed layers, drop-down menus and animations that would otherwise require complex scripting in a language like JavaScript, or an external plug-in like Flash.
  • A significant percentage of users do not have JavaScript and/or Flash installed or activated.
• Graphic effects
  • Styles can produce many of the graphic effects for which web designers often use images (such as button backgrounds and borders).
  • Images are less accessible because they take longer to load, cause problems for visually impaired users and output technologies such as screen readers, and cannot be changed as flexibly by a stylesheet.

Visual Appeal

• A stylesheet helps provide a consistent visual style across multiple pages.
• CSS provides more precise and consistent control over fonts, colors, positioning and borders than HTML.
• CSS formatting and layout usually looks exactly the same in all standards-compliant browsers.

Design and Maintenance

• Process determines product. A site that is easier to design and maintain is likely to be better designed and maintained.
• CSS-formatted HTML code is smaller, cleaner and simpler than HTML-formatted code.
• CSS code is modular and object-oriented. It can be reused in multiple files, it can include other CSS files, and it can be applied to groups of HTML elements.
• CSS code is centralized. Formatting and layout information for multiple pages can be kept and updated in a single external CSS file.
• Site redesign and maintenance is faster and less likely to introduce errors and inconsistencies because there is little or no data redundancy (repeated code in multiple files).
• Formatting and layout information is separated from content. This helps prevent damaging formatting/layout while editing content or vice-versa.
• CSS is a non-proprietary W3C standard. This assures that pages will work in the future, even though browsers will change. The need for browser detection scripts and browser-dependent coding hacks is minimized.
• Web development team members can specialize and better perform tasks based on their strengths.
  • A web designer with a powerful CSS-friendly editor such as Dreamweaver can focus on creating/maintaining the site formatting/layout.
  • A subject matter expert with little or no knowledge of CSS or HTML and an inexpensive WYSIWYG editor like FrontPage or Netscape/Mozilla Composer can focus on creating/maintaining the content.

Devil's Advocate: Arguments Against CSS

• Browser Support: Different browsers, especially older versions of browsers like Netscape 4 and Internet Explorer 4, may not render CSS code identically or at all.
  Response: This used to be a big issue, but browser support of CSS has been very good for the past few years. The display may not be perfect in older browsers, but at least it will be usable. HTML formatting is unlikely to be as usable and accessible to as many users. Adherence to accepted standards like XHTML and CSS is one of the most important steps for ensuring usability and accessibility.
• Coding: Coding in CSS is not easy, and an expensive editor like Dreamweaver or knowledge of CSS code is important for creating accessible pages. This adds to what a web author needs to know and use to create a page.
  Response: Web authoring tools like Dreamweaver are becoming more CSS-friendly and allow you to use a graphical interface to use styles without having to look at CSS code. Even FrontPage has some features to create and edit styles. Also, if a web designer for a group creates the stylesheet, other authors in the group only need to know basic Web authoring and how to apply styles that have been defined for them. The HTML code of a CSS-formatted document is considerably less complex, and therefore more difficult to break and easier to fix, than a purely HTML-formatted document.
• Existing pages: It will take a lot of work to convert the billions of existing pages on the Web to meet standards like XHTML and CSS. The results of conversion may be largely unnoticed by most users and therefore not worth the cost, time and effort invested.
  Response: Maintaining current pages in their existing non-standard format may have a higher cost due to maintenance work and usability/accessibility problems than changing the pages to meet the standards. Federal agencies and public universities are legally required to meet accessibility standards.

Related Links

• CSU Assistive Technology Resource Center: Web Design That's Modern, Efficient & Accessible
• Max Design: Web Standards: Why use CSS to separate content from presentation?
• Westciv: Why Use CSS?
• Depiction.net: Why Use CSS?