In our latest Technology Solutions podcast episode, I spoke a bit about using cascading style sheets (CSS) in designing your website.  I’d like to explore this a bit more.

What essentially do style sheets do?

Style sheets separate the design of your website from the actual website content.  Think of style sheets as a “skin” for your website (similar to the skins available in winamp or Windows Media Player).  You can change the look of your site in one single document without having to modify each page within your site.

I whipped up a little diagram below to show (extremely simplified) how style sheets work with a web page.

Why should I use CSS for my website?

1. You will save time and money - CSS makes any design changes to your website extremely easy.  As I mentionned before, instead of going through each page to make changes, you can make the change to one style sheet which will apply it to any page that uses it. 
   
   This really comes in handy when doing large scale redesigns.  You can essentially launch a completely new design without having to rebuild all of your pages (which would be necessary if your site was built using tables).
   
   Check out www.csszengarden.com to see this in action.  This a one page site where the entire design changes based on the CSS that is used.  Remember…the actual webpage is always the same…it is only the back-end CSS that changes.
   
2. Format content for different media platforms - Using CSS makes it easier to deliver your content across different platforms, such as print, mobile devices, the web, etc.  You can actually apply a completely different and optimized design through your style sheet based on how the user is viewing your site.
   
3. Your pages will load much quicker – Using CSS eliminates much of the extraneous table code that is often used to create a site design.  This allows the actual web page to load much quicker.  Plus, browsers cache style sheets (downoad and remember them), so once they are downloaded…the browser doesn’t have to grab them all over again.
   
4. Your web pages will be more Search Engine friendly – Since a lot of extraneous table code is eliminated by using CSS, search engines will have an easier time spidering your page.  The valuable keywords that appear in your page copy won’t be diluted with extra code.

 There are many other reasons to use CSS when designing your site, including making your site more accessible to the visually and hearing impaired, as well as the fact that it is simply W3C compliant.

Do any of you have any experience using CSS?  Good or bad?  Additional reasons for using it? 

Jeff,

The latest versions of Dreamweaver support CSS very well (MX and 8.0).  They have a very handy "Design" window on the tool bar that codes the CSS for you.  They also offer some free CSS templates that you can use for your site...or a as a good learning tool.  I use Dreamweaver MX myself right now, but I do generally hand code within its editor.

If you are just starting to learn CSS or are a bit rusty, I'd recommend starting off slowly by playing with fonts, borders, margins, and padding.  When you start getting more familiar with the principles of CSS and some of its attributes, other more advanced concepts, like positioning and backgrounds, aren't difficult to start implementing. 

If you just don't know how or want to code, any quality web design company should offer CSS design in addition to the "evil" table method.

Wait until you need to do some site wide changes...you'll be SO happy you went with CSS. 

If you look at the source code for this website, it's pretty much 100% CSS.  (The only exception is actually some pages in the Community that would have been too difficult to completely convert over and still meet deadlines) 

I removed all underlines from sub headers on all our content pages today (articles, key moves, etc) by deleting 1 single line of code from 1 single file.  It's beautfiul!

One other cool application of CSS that you can perform with JavaScript, ASP, PHP, etc...is to detect the screen resolution of your visitors and deliver a different style sheet based on lower or higher resolutions.  If you look at the source code of this page...you'll either see our 1024x768 and greater style sheet (sizes.css) or our 800x600 style sheet (sizes800.css).  This is a great way to take advantage of larger screen sizes...but to still accomodate those that need lower resolutions.

Ok....maybe I should start me weekend now.  As Rich would say....."START IT UP!!!

Following on Brian's last post, our Creative Director, Donovan Myers, has written a rather simple tutorial on how to add a CSS style switcher to your website to provide alternative viewing formats for your visitors. The implementation on our website is just for fun, but there are more practical applications, such as allowing visitors to reformat based on accessibility requirements.

http://www.inetsolution.com/style-switcher-howto.asp

Jason