CSS3.com - A comprehensive CSS 3 reference guide, tutorial, and blog

@Sandy
You only have to say (via css) the “this code goes for “X” box only” meaning. To do that you need a class. For example if you have MANY boxes with e.g red borders and you want ONLY ONE box with a blue border… you must do this:

Red boxes code:
.red-box {border:1px solid red;}

The above code means:
1)
.red-box = this is a class… it’s name is “red-box”. You recognize it by the dot (divs have an: “#”…. without quotes)

2)
{border:1px solid red;}
These are the properties of the class. The width of the border is a just 1pixel, it is solid (instead of dashed, or dotted e.g) and the color is red.

Blue boxes code
.blue-box {border:1px solid blue;}

The above code means:
Exactly the same. The only difference is the class name and the blue border instead of red. Of course you can choose various properties for your borders. This article shows one.

Let’s continue.
Imagine a class as an “X” point that a friend just told you to look when you were sitting on a bench in a park. Will you be able to understand this “X” point without any help? e.g “There… on the left corner”… or, “near the white car”…. or, “below the pine tree” or something?… No… You need a corner, a car, a tree. For css (“X” point) you need html (e.g car). Here is an example:

Css part:
.class-name {properties}

Html part:

Example:
Css part:
.red-box {border:1px solid red;}

Html part:
Content here
Divs as the boxes and class is the style which styles the box. This div will have red borders. Another one may have blue or whatever.

Css are easy to learn. Html also. Don’t hesitate to learn them. Extra knowledge is always good. Especially when things are so easy!

Hope I helped!