Divs

One of the most useful features when making the jump from full html to css was the div container. This element, previously unknown in html (although strictly it’s a html element) gives you the option to put elements of your page into containers. Divs end the reign of tables, and do not just a far better job of it, but surpass tables in every way imaginable. No more figuring out your page using a 20×20 table, no more hoping things will fall into place, with divs you have pixel perfect placement options.

The html for placing a div container is simple. Just encase the code in the <div> tag

<div>This is one part of my page</div>
<div>This is the other part of my page</div>

The real power of divs is not in the fact that you can place them, since on their own like this they do nothing. You need to use css to bring them to life, and to pretty much anything to them. The best way to think of divs is a box that contains everything you put into them. If you put lengthy text in a div it will span the whole page. You can tell the div to be only 500px wide though, which will make the text wrap after 500 pixels. You can also assign other properties to a div, which will be inherited by items contained in it.

If you place a paragraph in a div container, and specify that the color in the container should be red, the paragraph text will be red, even though it is contained in a paragraph (unless the paragraph is styled otherwise). Divs can be floated left and right, they can be positioned pixel perfectly any place and can have other properties, specifically geared toward flexibility. We will be talking a lot more about divs and structure in the future, so keep an eye out!

Class and Id

classes and Ids are ways to identify elements of a page. They come in handy when you have many div containers for example, but want to style them in different ways. Say you have some divs positioned left and some positioned right. You want the left ones to have a green background, and the right ones to have a purple background. Well, you have weird taste then, but nevertheless, the way to goabout this is to use classes and/or ids. Let’s take a look at an example with classes. The html code would look something like this:

<div class="leftside">
Content here
</div>

<div class="rightside">
Other content here
</div>

As you see, we are distinguishing between the two divs by assigning different classes to them. Let’s take a look at our stylsheet now.

div.leftside
{
background-color: green;
}

div.rightside
{
background-color: purple;
}

You can see that we use the name of the element and class is written as “.classname”. Now let’s take a closer look at the differences between id and class.

The difference between class and id in css is that class refers to a set of elements, while id refers to a specific one. More down to Earth, one class can be assigned to any amount of elements, while one id can only be assigned to one element. I used class in the above example because when I originally described it, I said you have divs positioned left and right. This means that for all divs on the left, you would use the same class. You could do it with ids, but then you would have to give each left side div a different id, and separately assign background color to all of them, a much longer, and more complicated process. As you saw, classes always have a preceding period, while ids have a preceding hash (#).

When writing all this in css it is not necessary to actually put the element name in front. In our example I could have written

.leftside
{
background-color: green;
}

This would mean that all elements in the class “leftside” would have a purple background. If you want this than fine, but if you have different types of elements with the same class, this may prove to be undesirable. If you have paragraphs, divs and lists with the same class, you may want only the divs to have the purple background, in this case if you write the element name in front, the background styling will only apply there.

When using divs, classes and ids you have a load of ways to create what you want. In the end it also gives you the tool to simplify your code and make a more elegant job than competitors. At first you will be a bit overwhelmed, but with practice you will know which to use and when.