CSS Resources

Learning CSS, and how to structure my HTML to use it properly, has been a long process of trial and error. I've learned some things from books, but mainly it's been websites where I've gleaned the vital information. Here are some of them.

A good starting point for newcomers to any web technology is W3Schools. This amazing site has extensive tutorials for HTML, XHTML, CSS, Javascript, and much else besides. They have a nifty little gadget called the TryIt Editor which displays the text of any example, then lets you edit it and see the effect of your changes. I've used this more for Javascript than CSS, but it's still amazing.

The most convenient reference sites I've found are Brian Wilson's Index DOT Html and Index DOT Css. If I need to know the exact syntax of the CSS background property, that's where I look. The comparative information about which browsers supported what, and how well, used to be really valuable, but these sites haven't been updated since 2003, so they don't have information about current browsers. They are still good on the differences between HTML and XHTML, though.

Another reference site that looks good, and is certainly more up-to-date, is SitePoint.

HTML/CSS design is a lot easier than it used to be, because of the much wider acceptance of standards. Coding for different browsers has not disappeared altogether, unfortunately, but we don't need to do nearly as much as we used to! One man who has done much to promote the acceptance of modern ways of doing things is Jeffrey Zeldman. His book "Designing with Web Standards" has been enormously influential, as have the various websites that he runs. The on-line magazine A List Apart is full of technical how-to articles, and has been responsible for promoting some techniques that have now become widely used, such as the sliding door technique for adjustable backgrounds and CSS-only dropdown menus.

Now that we code with standards, we generally test our pages first in Firefox, and only when they work beautifully in Firefox do we try them out in Internet Explorer. This isn't only because Firefox supports the standards better than IE, although it does; it's because Firefox has Firebug. This amazing tool really lets you see what's going on with your HTML and CSS: exactly how big each element is, where its margins and padding are, and much else besides. Before we had Firebug, the only way to see why your page wasn't laid out the way you expected was to make temporary changes to your stylesheet. If you wanted to see where a particular element reached to, you had to add a background colour or border to it, and re-load the page. Repeat for the next element, and keep going until you've tweaked every element on the page! Firebug has changed all that. You can adjust the CSS property values by hand until your page looks exactly the way you want it, and then copy the values back into your stylesheet. Laying out a web page is much quicker than it used to be!