CSS Techniques & Resources

Making the transition from tables to CSS (Cascading Style Sheets) can be a frustrating process, with cross-browser compatibility one of the major stumbling blocks. But in my opinion it is all worth it. It separates the presentation from the content, and leaves your Html cleaner and easier to read from a spider standpoint.

Changes to the presentation such as font styles, column positioning and dimensioning, border thicknesses and colors, margins, and wide variety of other element attributes are all handled through one external file. Do a View Source on the page you are reading right now, and you will see that there are no tables in this document. You can actually almost read the content with some degree of ease -- and so will the spider. The spider will see more content and less garbage cluttering it's way.

I have found three sites that will get you well on your way to understanding a little more about CSS. The first one is a little old, but the techniques used still apply. What is unique about it is that the CSS is displayed in a text box at the bottom of the page so that you can study it and compare to the actual page. The second one offers a variety of common and useful applications of CSS. And the third, is for more advanced techniques and offers CSS masterpiece showcases to demonstrate just how far you can go with this style of coding.

glish.com - CSS Layout Techniques
If you are looking for help making the transition to CSS layout (Cascading Style Sheets), then go to Eric Costello's glish.com - CSS Layout Techniques. Eric is cataloging many useful cross-browser CSS layout techniques that he can find. All the examples on this site have been reduced to only their essential code, and you will find the source displayed on each page to hopefully make it quick and easy to understand the inner workings of the CSS.

Eric started this collection because of the lack of resources he tried to find when he went looking for information on how to translate typical table based layouts to CSS layouts. You will also find links to various online CSS resources and tutorials, appropriate for both the novice and the seasoned CSS veteran.

The Imposter's Fun with CSS
A well organized list of some of the more common everyday uses for CSS, such as roll-over menus and trees, box positioning, and dynamic stylesheet switching. This gallery of CSS demos can be found at Fun with CSS : Experimental.

There is one bad CSS demo in this collection and that would be the Rounded Edges page. While it is true that CSS will remove the presentation from the page, there are some limitations to it. This demo states that it is a relatively painless way of creating image-free rounded edges with just CSS. It is far from painless, actually it is downright ridiculous when you look at it. You will see what I mean when you see the coding for it. Let's just say that this is a good CSS example of a bad CSS example.

Mezzoblue's CSS Zen Garden Resources
For the intermediate coder, there is Mezzoblue's CSS Zen Garden -Resource Guide. By no means exhaustive, this list has been put together to reconcile helpful CSS tips web-wide in one spot. Expect it to expand over time.

The CSS Resource Guide is just the tip of this iceberg. You will have to visit the their Zen Garden - The Beauty of CSS Design site, it will rock your world. An awe inspiring showcase of what CSS is capable of. Look over on the right side of this page for a list of other CSS showcase sites of which are equally amazing.

Where to go from here
It would be advisable to procure a CSS editor of some type to facilitate the creation of your stylesheets with. I use BradSoft's Top Style Lite which is integrated into my Html authoring software. It does not have as many features as their Pro Version, but it gets the job done and makes a lot of hand typing process easier by auto-filling it in for you. Top Style Lite download page. Top Style Pro is also available for purchase on this same page.

Finally, after you have fooled around and experimented with CSS for a while and you need some advice -- visit the Band of Gonzo's Web Design Support Forum where there are several people around who will be able to answer any of your questions.