CSS and you

Browsers:

I tried to make my project look as close as possible in IE/Firefox for PC, and IE5/Safari in MacOS. This proved to be very frustrating. It was very similar to the frustration I felt in the 90's with Netscape and IE incompatabilities. Remember that? It was horrible.

So my suggestion for avoiding as much frustration as possible is to first start out doing CSS per spec, using a per spec browser to check your work. I recommend Firefox. Go back and check your work in alternate browsers, and see if you can make workaround corrections by spec rather than CSS hacks. For example, the box model is different in IE and Firefox (IE has it wrong). You can get around this using a little more HTML than required, e.g. an extra DIV wrapper.

Tables:

I've come across a lot of developers who seem to be CSS Purists, where tables are sloppy and frowned upon. Don't be one of those. Sometimes, tables are still the best solution. Just use them for what they were designed for. You don't need them for lining up images or text any more, but you really should use them for tabular output. For example, I would definately use tables for a calendar layout.

Inheritence:

At first, it might be tempting to wrap everything in a DIV tag, giving it a unique ID. But you can make your HTML more elegant by taking advantage of inheritence. Keep this in mind.

Syntax:

Syntax wasn't as intuitive as I thought it would be. Here's a couple examples that might help you out:

• Say you have the following HTML:

  <div ID="foo">This is a box</div>
  

  Your CSS might look like:

  div#foo {border:1px solid black;padding:10px;}
  

• Given the following HTML, say you wanted the inner span, ID bar, to be red, while the outer one you wanted blue. Yes, I realize this is a dumb example, but I'm just trying to show you some syntax here (how to refer to that inner span, for example):

  <div ID="foo">
  
    Hello
  
    <p>This<span class="bar">is</span>really</p>
  
  </div>
  
  <span class="bar">odd</span>
  
  

  Your CSS might look like:

  span.bar {color:blue;}
  
  div#foo p span.bar {color:red;}
  

Reference:

Most of what you need is on the web. However, it's sometimes nice to have a good book on hand for reference. For that, I'd recommend you pick up Eric Meyer's CSS 2.0 reference book. Regarding web resources, here are a few good ones off the top of my head:

• w3schools.com - css reference, quite helpful. When I'm looking for a quick CSS syntax check, I'll google CSS xxxx, where xxxx is the CSS property (e.g. "css visibility"). 9 out of 10 times, the first result from Google hits this site, and the information is exactly what I need
• csszengarden - This site has been around for a while. If you haven't seen it, do take a look. Looking at the base HTML and some of the different style sheets, you'll get some great ideas as to how you can use CSS in ways you never thought of before.
• listamatic.com - There's a lot of good HTML list/CSS stuff here. Check it out and you'll never look at the <UL> tag the same again.
• aListApart.com - I've read several articals here, and they're pretty good

I'll try to add more links later.