Occasionally I’m called upon for advice and tips related to using CSS to style web pages. The use of CSS, short for Cascading Style Sheets, is a modern and powerful design technique used to help separate the design of a web site from the site’s content. Style sheets control how a web site looks, but they are completely separate from the words and images posted on the site. This has some advantages, as outlined below.
The best way to see the power of CSS is to visit the CSS Zen Garden. Here you will find a large number of web pages, all with the same content and differing only in design. It’s really amazing to browse through the wide variety of designs and realize that the only thing that’s really changing from design to design is the CSS control file.
Using CSS in this fashion means one can setup their web site using one design, and later change the design, all without changing a single line of the actual content of the site. Using CSS all the words and images you’ve previously prepared for your site can almost magically appear quite differently only by changing the CSS file. I’ve actually cycled through a number of designs for this site, simply by editing the CSS file to reflect the new design.
If you are a web designer, visit the CSS Zen Garden site for inspiration, and then review the following list of CSS related sites to get you started using CSS in your web designs. If you’re hiring a web designer, review the CSS Zen Garden site and then ask your designer about the feasibility of using CSS the next time you redesign your web site.
Besides making it easier to change your site, the use of CSS offers another critical feature: accessibility. An accessible site makes it easier for visitors to your site who may use alternate means for consuming your site. As an example, consider the use of screen readers for the blind and so on. Plus, search engines such as google and yahoo have an easier time “digesting” css styled pages (designers, think of how the search engine has to work to keep track of all your nested tables) which means of the 100 factors google uses to score your page, you’ll be slightly better off if your page uses CSS.
Mike’s Top 10 List of CSS Resources
- CSS Zen Garden Many excellent examples of creative CSS use.
- Raggett’s Writeup A Very Good Beginner’s Intro to Using CSS.
- Box Design Two and 3 column designs.
- Glish on CSS Good place to get started.
- Webcredible Covers CSS Useful tips, including how to do rounded corners.
- Menu Tabs Using CSS Surprisingly easy!
- Menus, Menus, Menus!
- CSS PLaY CSS code examples w/descriptions.
- Comprehensive List of CSS Resources
- More on “Why Use CSS?“