Reasons for Using CSS
- Consistent, site-wide style that can change instantly
- Less code = faster downloads = cost savings
- Accessibility across different browsers, platforms
- Reduced maintenance/upgrade time
- forward compatibility (XML for the future)
- Page reduction (est.): 50KB
- Page views/day: 40,000,000
- Projected bandwidth savings:
- 2 terabytes/day
- 61 terabytes/month
- 30 terabytes/year
Example
ESPN.com Redesign |
What CSS Can Do
- Highly styled mouse-over buttons (Macromedia navigation menu)
Example:- Using CSS on unordered lists to create a navigation menu
Original article and further discussion of this topic: www.alistapart.com/stories/taminglists/ - Separate content from presentation so content can be modular
- Users can change the site’s font sizes and colors
Real World Examples
- ESPN.com (discussion of redesign)
- Inc.com’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." - PGA Championships
- Wired Magazine
“…table-free CSS layout and XHTML structure cut page weight by over 50% in the markup alone” (zeldman.com)
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 |
Dreamweaver & CSS:
- 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) - Can use Code View or the Design>CSS Tab to edit the stylesheets
Further Reading
- CSS Zen Garden- demonstrates the power of CSS:
- Layout-o-Matic- used for creating CSS-based design templates:
- List-o-Matic- used for creating navigation menus:
- http://www.stopdesign.com/CSS Image Replacement- using <h1> tags around CSS images:
- CSS in Dreamweaver MX 2004