Before we move on, this is a good time to clean up the mess we've made with our document. No, it's not your fault. I intentionally coded the CSS without any structure in order to show that if we kept going, this document could get quite confusing to read not only for the author but for any other developers that need to use it. The first thing we need to do is cut all the code that is between the open and closing stylesheet tags in the document head.
Before (Note: cut all the code in black)...
And after...
Now take the code we just cut from our document and paste it into a new document. Save this document in the same folder that the "index.html" file resides and name it "default.css".
Next, we need to replace the <style> tags with a line of code that calls the external CSS file into our document. (Note: delete the code in black)
Replace the code we just removed with...
Awesome, now we should have two documents named "index.html" and "default.css" in a single folder. Also, make sure all the images we've been using are in the same folder with these documents. If you lost track, feel free to download the complete folder.
Alright, now let's trim down this CSS using some shorthand properties. Instead of going one by one with this, I'll just give examples and the final folder to download. It's pretty straighforward so I doubt you'll have any trouble with this. CSS shorthand is simply grouping related properties like font-size, font-weight, font-family into one line. We'll take on the h1 selector for example. Right now it should look like this...
That's a mouthful, so to trim all the font properties using shorthand to...
Easy right? Just make sure you keep the values in that particular order or it may not render correctly on some browsers.
How about the margins and padding? As you see there's only one value for the top padding these in our h1 selector. What if we wanted different padding for the top, right, bottom and left of the h1. It would look like this:
We can change that to be simplier as well. The values are in clockwise order starting from top (top, right, bottom, left). So the shorthand will look like this:
It's getting cleaner right? The last one we'll take a crack at is the "background" properties. So here's how it goes using the body selector...
We go from this...
To this...
If you did your homework and checked out background positioning you could go from this...
To this...
Hexidecimal color values can also be shortened. So if you have the value #ffffff, it can be shortened to #fff. Another example is #99ccff can be shortened to #9cf. You get the idea. Inconsistent values like #20323C can be shortened as well but I've never found it very necessary since you'll use RGB instead of hexidecimal colors. If the value doesn't follow the #AABBCC pattern, just use the full value. You'll avoid more headaches than you need.
Now we're starting to clean house. Still there are those code nazis out there whining that we ain't clean enough. Stop crying, here's a tissue. You first want to try and be consistent with the order of your CSS selectors. So either create your own order or feel free to use the one I feel comfortable with...
Obviously you're not going to have use all of these properties, it's just an example. Use only what's necessary.
If you thought that wasn't anal enough I'll take it a step farther. Time to give each property with values it's own line to make it more readable. I also like to add the semi-colon (;) to the end of every property: value no matter if it's not the last one used. That way, when I have to add more of these to the selector. I won't have to remember to add a semicolumn to the preceeding value. If I didn't mention it already, all property: value must be separated by a semicolon property: value;property: value; but I thought you knew that already.
selector
{
margin: value;
padding: value;
border: value;
background: value;
font: value;
color: value;
text-align: value;
width: value;
height: value;
}
That should do it, but no! Coders love their heirarchy in CSS as well as HTML so it's time to add some indents. After the selector, "tab" one space in with your text editor and add the curly brace ({). Everything that follows before the next selector should all be tabbed in once ending in another tabbed in curly brace (}).
selector
{
margin: value;
padding: value;
border: value;
background: value;
font: value;
color: value;
text-align: value;
width: value;
height: value;
}
selector
{
margin: value;
padding: value;
border: value;
background: value;
font: value;
color: value;
text-align: value;
width: value;
height: value;
}
Righty-O! You think you're out of the woods but oh hell no. This clean CSS coding went even further in the past few years with commenting the code. Not only was commenting up for discussion but the format and indentation as well. Personally I dig it, but it's up to you whether or not to use it. Everything under the comment should be tabbed in once more making the properties tabbed in twice. Here's how it looks:
/* YOUR COMMENT
----------------------------------------------- */
selector
{
margin: value;
padding: value;
border: value;
background: value;
font: value;
color: value;
text-align: value;
width: value;
height: value;
}
If you're still awake I give you a ton of credit. Trust me I know this is the boring part but in the end you'll thank me for it. Feel free to double-check your web page and download the sample.
A great resource on squeaky clean CSS can be found at:
http://www.huddletogether.com/2006/02/16/practical-web-development-tips/