If you've ever created a complicated Web site with a lot of specialized styles to determine the look and design of your site, you will find that your stylesheet will become complex and unwieldy very quickly. But if you organize your CSS file you can create a document that makes sense and is even easy to maintain and update even years later.
Order Your CSS Sensibly
The first thing you should remember is that the first letter in CSS stands for "Cascading". This means that the styles that are applied to a document are applied in a cascade - something like a waterfall. As the browser reads through the document, the last properties that are defined are the ones that take precedence (with some exceptions). That means that you should order your CSS document to take advantage of that cascade. Put the most general properties first, and your most specific properties last.
General CSS Properties
CSS properties that I like to think of as "general" are ones that cover the most elements on your pages. For example, on a Web site, usually you would define the default font family, color, and size, as well as the background color and/or image, and page margins. These style properties you should put first in your stylesheet to define your entire site. For example:
html, body { margin: 0px; background-color: #fff; }
p, h1, h2, h3, h4 { font: .8em Arial, Helvetica, sans-serif; color: #000; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.2em }
h3 { font-size: 1em; }
h4 { font-size: .8em; }
This insures that even if you have no other definitions on a page, they will have the same background color and font as the rest of your site. General styles are styles that are applied when there is no other specific information about the element.
Positioning CSS Properties
Usually, positioning properties are a general style, because you would want all of your pages to have the same look and feel, perhaps with a navigation on the left and the main body on the right, with specific widths. I consider positioning CSS to be a little less general than the properties above, because most sites have a different layout for their homepage than they do for the rest of the site, so there would need to be some differentiation on the pages to say "this is the homepage" and "this is a sub-page". Usually this is done with an id tag on either the <body> element or on an enclosing <div> element around the contents of the entire page.
<body id="homepage">
or
<div id="page">
Navigation CSS Properties
Navigation is another set of properties that is usually pretty general, such as having all the links in the navigation column be bold and have a border around them to look like a button, rather than a bulleted list. To get your navigation elements, you might put your navigation in a div with an id to indicate that it's navigation, or just give the unordered list itself an id.
<ul id="navigation">
On the next page we'll take a look at more specific CSS styles. This page will also cover how to write context specific styles so that you can have headlines that change depending upon where they are.
