The Idea

Take a look at this page. You can see that these boxes have a lot in common like "border:" and "background-color:". In fact, the only differences are the content and positioning.

When styling a lot of similar boxes like this we can put the common elements in a CSS custom CLASS. The things that vary from box to box we can code in an ID.

CLASS & ID

There is one big difference between CLASS and ID. CLASS can be applied to any HTML tag that the styling is appropriate for. The same class can be used many times.

An ID can only be used once. Each ID must be unique to the page. If the same name were assigned to two IDs, the page wouldn't work right and would possibly cause a browser error.

In short, common traits to used in more than one item can be put in class. Styling that applies to only one item should be put in an ID.

By putting common elements in a CLASS instead of each ID, we can save ourselves a lot of coding and trim down our file sizes. It also makes your code a little easier to read and a lot easier to edit.

Making & Applying The Class

In coding the previous example, I put all of the common characteristics into a class I called "boxes". The common traits are the border styling, the background and foreground colors, and dimensions of the boxes.

Here's the CSS class I made for each box:

.boxes{
position: absolute;
border: solid #000000 2px;
background-color: #ffff00;
color: #000000;
width: 20%;
}

Notice that I put the "position: absolute" in the CLASS. Each box is absolutely positioned so I can put it here. You can put any declaration in a CLASS that you can put in an ID. Just make sure that it is common to all of the boxes you're styling with the CLASS .

Oh, and don't forget to precede the CLASS's name with a dot (.). This tells the browser it's a CLASS as opposed to something else.

To apply the class to the boxes just add the CLASS attribute to each <div> tag:

<div class="boxes">

That's all there is to setting the common styling to each box.

Making & Applying The IDs

The only unique styling to the example's boxes are their positions -- "top:" and "left:". You must code a separate ID styling to position each box, but you don't have to add the elements from the CLASS we just made.

Here's Box #1's ID:

#box1 {
top: 0px;
left: 20px;
}

See how much smaller that ID is than the ones we've been coding with full styling? We apply this style with the ID attribute in the <div> tag:

<div class="boxes" id="box1">

This little time and code saver will come in very handy as you begin coding pop up menus in <div> boxes. The menus mostly look the same, only the positioning is different.

Using CLASS Alone

We don't even need to use ID in some cases. We can fully style and position our boxes with CLASS alone in a single style rule.

Look at this example. In this case, we can position each box with a "float: left" and use <br> tags to make them go beneath each other.

Since every box has identical styling, we can just use and apply a class instead of making individual IDs:

.boxes {
position: relative;
border: solid #000000 2px;
background-color: #ffff00;
color: #000000;
width: 20%;
float: left;
}

Note that I used "position: relative" (the default) here. This is so the boxes can float. They can't float if you give them an absolute position.

This was applied with the CLASS attribute in each <div> tag:

<div class="boxes">

The <br> tags that make the vertical alignment and spacing go at the end of each box right after the closing </div> tag:

</div>
<br clear="all">
<br><br><br>

The "clear='all'" part of the first <br> tag is needed to clear the margins of the box just like when your placing something below an <img>. The other <br> tags add extra vertical space.

Summary & Exercises

You can use a CSS CLASS to style common properties of a box, or anything else. Use ID to style individual characteristics. You can apply both CLASS and ID by simply using their attributes in your <div> tags.

Whenever you need a straight row or column of boxes, you can use CLASS alone in conjunction with the "float:" property to style and position all of your boxes at once. The <br> tag is needed to make columns.

Make the sample pages from scratch. Make a column to the right of the page. Move the boxes around and check out how they overlap. That's going to be the topic of our next tutorial.

Make a row and column of small <div> boxes using only CLASS, "float:", and <br> tags. You may have to use "border:" to put some space between a row of boxes.

To Next Advanced CSS Lesson

Back To Advanced CSS Index