Neo-Faerie Wings: Your source for high quality neopets graphics

As you probably know...divisions can have classes and id's. But what are classes and id's?

We classify our divisions into classes and/or id's if we want a certain attribute to be applied only on a specific part of the page. For example, if you want your menus to have a completely different link color from the rest of the page. Or if you want your headers to be of different font.

Q. But when do we use classes? And, when do we use id's?

A. We use classes when we have more than one element/attribute to be used in the same class. And we use id when we give a unique attribute to a single tag! Id's are usually used once per document as for classes, you can use them multiple times in your document!

Classes

For example I want the first row on my table to have this attributes:

tahoma font,
a font-size of 10,
I want my text to be bold,
I want my text to be centered,
the background should be black and the text should be white,
and i want my text to have a double white bottom border,

Hmmmm... let me see...so how will the code look like? Lets name this class tr1 for the first table row!

.tr1{font-family:tahoma; font-size:10; font-weight:bold; text-align:center; background-color:black; color:#ffffff;border-bottom: double #ffffff;}

Now, I want my second row to have the following attributes:

a comic sans ms font
a background color of lightblue
text should be on the left
text color should be red
a border around my text
there should be a padding of 3px;

Now the code for the second row would be:
.tr2 {font-family:comic sans ms; background-color:lightblue; text-align:left; color:red; border:1px solid #000000; padding:3px;}

My third row will be a lot simpler. I just want to have:

text on the right
text color of blue
and background of yellow

The code will look like this for our third row:
.tr3 {text-align:right; font-family: arial; color: blue; background-color: yellow;}

Now let's see how our table looks like when we put all the attributes together!

THIS IS THE FIRST ROW

THIS IS THE SECOND ROW

THIS IS THE THIRD ROW

The code we've placed on the table are as follows:
on the first row: <div class="tr1">THIS IS THE FIRST ROW</div>
on the secong row: <div class="tr2">THIS IS THE SECOND ROW</div>
and on the third row: <div class="tr3">THIS IS THE THIRD ROW</div>

ID's

Let's continue with our table....I want all links on the table to be in color red and purple when hovered! Let's name the id navcontainer!

The code will be:
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer li { margin: 0; }

#navcontainer a
{
color: red;
background-color: none;
text-decoration: none;
}

#navcontainer a:hover
{
background-color:none;
color: purple;
}

The code we need to add would be:
<div id="navcontainer">
(put your table code here! including links!)
</div>

So now our table will have to be like so if we placed the codes just before everything!

THIS IS THE FIRST ROW

THIS IS THE SECOND ROW

THIS IS THE THIRD ROW

Notice how the links in the divisions are different from this LINK which is outside of the divisions!

Better Understanding

To better understand the difference of Classes and IDs, study the code of the table above:

Notice how often we used classes. We used it 3 times to apply our preferences. The ID on the other hand, can only be found at the beginning and end of the entire code. IDs are therefore used to set an attribute to the entire document while classes are used to set attributes to the different parts of the document!

Share |

Labels: basic, classes and ids, css, tutorial

May 14, 2010

Classes and IDs