By way of review for everyone, here is a quick post going over the basics. These are the things you need to know when using style sheets.
1: Use an external style sheet. This file is going to be named just like any other web file, but with a .css extension. In theory, you will only need one .css file per Web site.
2: Minimize the number of divs you use. We all know the pain that is the Creighton CSS assignment. Break down your layout into a minimal number of divs, with a minimal amount of nesting. Create the divs to follow the flow of the page (container, navigation, sidebar, content, footer, etc). I recommend almost always using a #container div to surround your layout.
3. Give your divs IDs, not classes. Format your divs using IDs. Remember, classes are for small, nitpicky changes that can happen to any element on a page. Divs with IDs are all unique elements, and need their own rules.
4. IDs always start with “#” in your style sheet. A pound sign tells the browser that the rule is to be applied to the element with that ID. No pound sign, no formatting.
5. Classes always start with “.” in your style sheet. Again, the leading dot tells the browser the following is a class. Classes should be rare.
6. Redefined tags don’t have any leading character at all. You will need to redefine at least a few HTML tags in any site, specifically the body, a (including the pseudo-classes), and likely many p and heading (h1, h2, etc) tags.
7. If you want divs to be “side by side,” they will need to float. If you want two columns, both divs will likely need to be floated.
8. Spaces mean something. Don’t use spaces in the names of IDs or classes.
#content p
In the above example, the space tells the browser that the rule will format any paragraph inside of the #content div.
9. Less is more. Try to work with a minimal set of divs and classes. This does not mean, however, that you will only have a few rules. Within those divs create as many text styles as you need by redefining paragraphs, headings and unordered lists (ul and li tags). This entire blog really only uses five divs.
10. Test your site in all browsers. Make sure you check your site in Safari, Firefox and Internet Explorer 6. IE6 is famous for breaking sites, and still, sadly, quite popular. This will require finding a Windows computer with that browser installed. One day, if all the planets align, I might be able to get a copy of Windows with IE6 in the Murphy lab.
Good luck. Be patient. This is not rocket science.
