Aug 19

CSS ID and Class usage

etienne @ 8:24 pm

I’ve always been slightly confused about when to use an ID and when to use a Class in my CSS. I’ve done some research which clarified my understanding.

The key thing to understand is that ID’s must be unique on a page and identifies a specific element, so you can only use a specified ID once per page. Classes on the other hand can be used multiple times on a page, if you are going to use a style that will be applied to multiple elements then use a Class.

I start by looking at all the sections and subsections on the page and how they work together. I identify all the unique sections on the page and define these with DIV’s and ID’s. Normally a page would consist of the following main sections:

#container { … }

#header { … }

#content { … }

#left { … }

#right { … }

#footer { … }

I then define all the child elements within each of these sections, so for example if I want the links in the header to be different to those in the content section I can easily do so. One of the main benefits of this approach is that when you look at the CSS file you can easily see why and where each style is being used.

#header a:link, #header a:visited {
color: red;
text-decoration: none;
font-weight: bold;
}

#content a:link, #content a:visited {
color: blue;
text-decoration: none;
font-weight: normal;
}

I define any shared look and feel styles using classes which I then use in different sections, In the case of the sidebar I have a left as well as a right sidebar, they have many look and feel things in common so I create a class called "sidebar" which defines the common styles. I share this common class between the left and right sidebar elements.

CSS:

.sidebar {
width: 170px;
margin: 0;
padding: 0;
}

.sidebar p {
font-size: 0.6em;
color: #555;
padding-left: 5px;
padding-top: 3px;}

#left {
float: left;
}

#right {
float: right;
}

HTML:

<div id="left" class="sidebar">
   <p>This is the left sidebar</p>
</div> <!– left –>

<div id="right" class="sidebar">
   <p>This is the right sidebar</p>
</div>

Another interesting point is that You are able to apply multiple classes to an element by space separating the classes, this allows an element to inherit multiple classes.

<DIV id="left" class="class1 class2 class3">Hello World!</DIV>

 

Tags: CSS, classes

Leave a Reply