Structure

1. Reset
I could as well link one of the many reset.css style sheets, but to save on server requests, I’ve decided to put the reset styles on the top of my main CSS file.

2. Base
The html, body and defaults for other basic html elements go here. This section is usually pretty minimal, because I like to style elements as they come along in the source. That way I have more control over the styles and less overriding to do later on.

3. Structure
You might opt to let this section go, depending on whether you like to separate the container divs from other styles or not.

4. Header
The definitions for styling the header of your site go here.

5. Content
The definitions for styling the content section of your site go here.

6. Footer
The definitions for styling the footer of your site go here and again you might skip this section if your site has no footer.

7. Navigation
The various menus, breadcrumbs indicator, etc.

8. Modules
I use this section to define the separate modules or blocks used on my site. News, polls, events lists, flickr feeds, quick links, and similar sections are usually defined here.

9. Forms
I like to put all the forms in one place, this proved to be a wise decision over time.

10. Custom Classes
I put here various reusable classes that are frequently shared throughout the site. You might not need this section if your site is a simple one, but when it grows too complex, you might find this section handy.

11. Everything Else
All that you can’t fit anywhere above. Usually this section only ends up only having a few classes.

12. Print Styles
If you don’t store your print styles in a separate file, this is the place to define them with a @media print block. You should put this section as the last one, as you potentially want to override any previous CSS declaration.

Sample

Here is some code from a sample style file. I’ve omitted most of the code for simplicity sake, but I’ve left section and sub-section comments in.

/*
 *  Table Of Sections
 *
 *  1. Reset
 *  2. Basic Elements
 *  3. Generic Classes
 *  4. Basic Layout
 *  5. Header
 *  6. Content
 *  7. Sidebar
 *  8. Footer
 *  9. Navigation
 * 10. Forms
 * 11. Modules
 * 12. Print styles
 *
 */

/* Reset  - do NOT modify!
-------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q {	quotes: none; }

/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Basic Elements
-------------------------------------*/
html, body { height: 100%; }

body {
	font-family: helvetica, arial, sans-serif;
	font-size: 62.5%; /* 1em = 10px */
	line-height: 1.5em;
	color: #333;
	background: gray;
}

/* Generic Classes
-------------------------------------*/
/* --- Link list --- */
/* --- News list --- */
/* --- Attachments list --- */
/* --- Links --- */
/* --- Messages --- */
/* --- photo frame & content photos --- */
/* --- Other --- */

/* Basic Layout
-------------------------------------*/

/* Header
-------------------------------------*/

/* Content
-------------------------------------*/
/* external link */
/* --- video --- */
/* --- unsorted list --- */
/* --- numbered list --- */
/* --- tables --- */
/* --- Icons in content --- */
/* --- Search results --- */
/* --- Photogallery --- */
/* --- News --- */

/* Sidebar
-------------------------------------*/

/* Footer
-------------------------------------*/

/* Navigation
-------------------------------------*/
/* --- Breadcrumbs --- */
/* --- Sitemap --- */
/* --- Main Menu --- */

/* Forms
-------------------------------------*/

/* Modules
-------------------------------------*/
/* --- News --- */
/* --- FAQ --- */
/* --- Poll --- */
/* --- Quick links --- */

/* Print styles
-------------------------------------*/
@media print {

	/* Your print styles go here */

}

So, here it is – a nice organized layout for your CSS declarations. I hope you find it useful as much as I did and I’d love to hear from you if you have any comments or suggestions to improve this.

The Box Model

The box model is a term used when referring to the rectangular boxes placed around every element in the page source (source document). It is one of the most basic concepts every web designer should know by heart.

The box model is constructed with the following boxes or layers:

1. Content
The innermost part of the box is the html element itself or content, such as “<div>”, “<p>”, “<h1>”, “<ul>” … etc. The CSS width property defines the width of this element, similar goes for the height.

div {
    position: absolute;
    width: 150px; /* set the div element to be 150 pixels wide... */
    height: 40px; /* ... and 40 pixels tall */
}

2. Padding
Next we have the padding property, which is the first layer you’d encounter going outwards from the actual element covered in the previous point.

div {
    position: absolute;
    width: 150px;
    height: 40px;
    padding: 30px 20px 30px 20px; /* add 30 pixels to the top and bottom, and 20 pixels to the left and right padding */
}

3. Border
The middle layer in the box model is the element’s border. The space used by the border in the box model is the thickness of the border.

div {
    position: absolute;
    width: 150px;
    height: 40px;
    padding: 30px 20px 30px 20px;
    border: 1px solid #EFD5B4; /* add a solid 1 pixel thick border with the #EFD5B4 color */
}

Above I’ve used a shorthand notation to define the border’s thickness, style and color. If you wanted, you could break down each of these three properties into their top, right, bottom and left components, but I’m not going into that in this tutorial. You can read more on shorthand notations in the first Back to The Basics article, The Shorthand CSS Notation Explained.

4. Margin
Then we have the margin, which is the space just outside the border.

div {
    position: absolute;
    width: 150px;
    height: 40px;
    padding: 30px 20px 30px 20px;
    border: 1px solid #EFD5B4;
    margin: 30px; /* add a 30 pixels margin around the element */
}

Perhaps it is in order to mention that there are some bugs associated with proper margin handling in certain browsers, particularly IE 5 and 6. One of the nastiest bugs is the doubled margin bug, which basically doubles the left and/or right margin if the element is floated. Thankfully this bug has been squashed in IE 7. For a quick fix to this bug, take a look at the last tip in the article 5 CSS Tips to Make IE (You) Happy

The sum of the layers above – left and right margins, border, padding, and the content width – defines the total box width. Similarly, the sum of the top and bottom margins, border, padding, and the content height defines the total box height. Take in consideration this model when specifying margins, borders and paddings to elements – basically, everything adds to the width/height of the element.

5. Position
Lastly we have the position of the element, which is measured from around the bounds of the margin of the element. The position is set with the top, right, bottom and left CSS properties.

div {
    position: absolute;
    width: 150px;
    height: 40px;
    padding: 30px 20px 30px 20px;
    border: 1px solid #EFD5B4;
    margin: 30px;
    top: 10px; /* move the element 10 pixels down from the parent element box */
    left: 10px; /* move the element 10 pixels right from the parent element box */
}

Conclusion

I recommend you to install Firebug, a great web development plugin for Firefox. Firebug has a useful box model view represented in the image above.

There are tons of details if you want to dig deeper into the box model. If you want to know more, visit The Box Model document and the Visual formatting model details document, both located over at W3.org.

Thanks for reading!

The Regular Notation

To begin with, let’s look at all of the four margin properties written the standard way, long and time-consuming:

div {
    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 5px;
}

Also, let’s write down a more complex definition – an element’s background property – in its glorious five components.

div {
    background-color: transparent;
    background-image: url(background_image.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left top;
}

While writing the properties the long way is simpler and more descriptive to beginner web developers, you’ll soon find out that you are writing a lot of redundant code that way. That’s why there is a standard shorter syntax designed to overcome this issue.

The Shorthand Notation

Let’s try now to write down the margin and background properties the short way to save some space and keyboard mileage.

div {
    margin: 10px 5px 10px 5px;
}

One thing to learn here is the order of the properties written in the shortened statement above. They always run clockwise, starting with the top property (twelve o’clock), then right (three o’clock), then bottom (six o’clock) and lastly left (nine o’clock). Be sure to remember that basic rule!

That’s short, yet we can make that margin definition even shorter, taking advantage of the particular values our properties were set to, like this:

div {
    margin: 10px 5px;
}

The margin definition above can be shortened like that, because of the matching top & bottom and left & right values. This is valid for any CSS property which has a top, right, bottom and left value, like padding, border, etc.

You could shorten the margin property even further if all of the four margin sides were identical, say 10px like so:

div {
    margin: 10px;
}

Note, that you can also drop the trailing semicolon from the last property in a block. It’s not much, but just so you know that you can let it go if you want. Another space saver is to write a one-property block, like the one above in a single line. Let’s take a look now at our final super-short statement:

div { margin: 10px }

What about the background property? Using our new knowledge, we can make it really short:

div { background: white url(background_image.gif) no-repeat fixed left top }

That’s all I’ve prepared for you in this first part of Back to The Basics. Make sure to follow this series as I have many things to show you as we move along.