CSS Resources and Tests for Web Developers and Designers

Find out when I get around to putting more stuff up about CSS. Don't hold your breath though.

Just Messing Around

These are things I've been playing around with.

CSS Rollovers in a menu - Use CSS to make image rollovers in a menu. No JavaScript required and no problems with browser compatibility.
Form Layout - Basic form layout with CSS. I'm also working on a forms page.
Extra Info Popup - Method of making a small popup within a body of text. Does not work in Opera.
CSS Demo - See how a website should look with and without CSS.
- If you don't want to get the Web Developer toolbar for Firefox (or can't) i've made a CSS Toggle bookmark you can use instead.

I moved these to their own page...

“How To” websites with more resources, techniques, and references.

Eric Meyer CSS Work - He is one of the world's biggest names in CSS. This page has his links for CSS resources. (The css/edge link has some useful demos of some effects you can use CSS for and it also lists problems with each).
The CSS 2.1 Properties Reference - Click on "complete reference" to use a very handy CSS reference. It tells you CSS properties, which browsers the properties work with, and many other useful bits of information. You can also download a copy for offline use.
Sitepoint CSS Reference
Position is Everything - Why is that happening in that browser? Common problems and fixes for CSS problems and bugs.
- Explorer Problems
- Opera Problems
- Gecko based browsers - (N6+, Mozilla, Camino, etc.)

Learn more about how to properly use CSS.

Faux Absolute Positioning by Eric Sol – Great new CSS positioning technique
CSS Design: Going to Print - A reference on how to style your pages differently for printing.
- Also check the updated page at ALA’s New Print Style
Squeaky Clean CSS - A short article on how to arrange your CSS page.
What is CSS? - Articles about the basics of CSS. This may give you a good idea of how to use CSS.
Writing Efficient CSS - fairly technical article on writing efficient code
Digital Web Articles by Topic: CSS - CSS articles
Creating Sexy Stylesheets - Awesome CSS article
Where Our Standards Went Wrong - How any why to sell web standards...
How to Grok Web Standards - Learn how to make the artist in you step aside so you can make a good website.
Why Tables for Layout are Stupid - A pretty good run down of why tables for layout aren't a good idea.
- I'd agree with most of this article except for this section. Mainly the 3rd to last paragraph where they say adding one extra <div> tag is "fluff" code. Well, so is adding a whole table for the same purpose (hmm... <table><tr><td>, that's three tags to one <div>).
- You can also read this article on one page.

Get some inspiration. These are some sites I visit to get ideas and see how things are done.

CSS Zen Garden - (hosted on www.mezzoblue.com.) All the websites on here have the same HTML. The only things that change are the images and the CSS files.
Design Melt Down - A great list of designs broken down by their common design elements and techniques (e.g. tabs, minimal, distressed design).
CSS Production Notes - a great drop down message system for keeping track of notes while developing a site. Check out the other 24 Ways to Impress Your Friends.
Menu Design
- Drop-Down Menus, Horizontal Style - CSS drop down menu with JavaScript backup for IE6 and other bad browsers.
- Hybrid CSS Dropdowns - CSS dropdown menus with a JavaScript backup for bad browsers.

CLEAN CSS - A CSS Optimizer and formatter. This will take your CSS and clean it up a bit. Be careful to test before you get rid of your old stuff though! Depending on the settings you use, you may loose some stuff!
- You can copy and paste this template that I use to format my CSS files.
- View the options I use.

Navigation