I came across an article today on A List Apart written by Joe Clark: Big, Stark & Chunky (it is 18 months old - I know, I should read ALA more often) which was aimed at promoting the use of 'zoom layouts', which are those designed for people with low or impaired vision.

More on Zoom layouts →

'Divitis' is a term used to describe an error common amongst newcomers to building CSS-based sites whereby they use too many divs for everything.

More on What is divitis? →

You may have seen on other sites an effect whereby the background colour of a containing element changes colour when you hover over it. A look at their CSS might reveal something like div:hover or li:hover. This is also how a lot of CSS dropdown menus work too, by applying a :hover to a list item.

More on Why doesn’t :hover work in IE? →

Shorthand CSS is the method of writing related style properties all on one line instead of several. Using shorthand CSS results in files that are smaller in size and easier to read and maintain. Shorthand CSS is most commonly used on font, border, margin, padding and background styles. The easiest way to explain shorthand CSS is to give some examples.

The key feature of Cascading Style Sheets and probably the one not realised by most newcomers to CSS is that certain style properties are inherited. This means that style properties (mostly those relating to styling text including color, font-size, text-alignment etc.) set on a parent element are inherited up by every descendant element (any element contained within the parent whether directly or indirectly).

Classes and IDs are how we create different styles for different elements on the page. IDs are unique identifiers and can only be used once on any one page. Classes can be reused and applied to different elements.

Usually when people have trouble with their links not doing what they want, it's because they've arranged them in the wrong order. Pseudo classes (links) need to be in this order:

• Link
• Visited
• Hover/Focus
• Active

Some people like to use mnemonics to remember this order like: LoVe HAte. Another one I saw once was Lord Vader Has Arrived (or something like that).

So you've set up the styles for the links of your page but you have one section that you want to be different from everything else. To do that, you need to assign a different class or ID.

To centre a CSS layout horizontally, you need to add margin: 0 auto; to either the body or a containing element (it's generally a good idea to wrap your whole layout in a containing element and give it a meaningful ID like #wrapper or #container) and give that element a width. What that does is set the left and right margins to automatically take up the window space not occupied by the specified width.

For IE5 browsers we also have to add text-align: center; to the same element. This also centres anything in descendant elements so if you don't want your text centred, you then have to reset the text-align back to left on a descendant element. So you might set the auto margins and text-align: center; on the body but then set the text-align back again on #container.