Make your own free website on

Dreamweaver and Practical CSS:
Separating Content from Presentation

GRMMUG Meeting, 10/14/03

Reasons for Using CSS

What CSS Can Do

Real World Examples

  1. (discussion of redesign)

  2. …table-free CSS layout and XHTML structure cut page weight by over 50% in the markup alone” (
  3.’s home page file size (HTML alone)...
    "went from 52K down to just 24K. Removing the 3 or 4 deep nested table stucture was extremely satisfying. It’s darn fast now."
  4. PGA Championships
  5. Wired Magazine

  6. Example (from Digital Web Magazine):
    Layout type HTML file size CSS file size(s) # of HTML tables # of spacer GIFs # of images used
    HTML-based Layout 20k 1.8k 8 35 56
    CSS-based Layout 12k 7.6k 0 0 25
    For a look at the final version, click here and click here for the HTML-based example that was used in the comparison.

Dreamweaver & CSS:

  1. Can’t natively view the actual CSS design in Dreamweaver- have to preview it in the browser to see the CSS formatting
    (the new Dreamweaver MX 2004 will offer much better CSS support, including CSS preview within Dreamweaver)
  2. Can use Code View or the Design>CSS Tab to edit the stylesheets

Further Reading