css classes and id’s

July 25th, 2007

css classes and id’s – which to use?

An id is used to define a unique element in a page, this is a requirement of xhtml and should be observed. In the xhtml we name it by stating the following:

1
id=""

and in the corresponding css we select it with the hash symbol(#item{})

A class may be used as many times as desired in a page. In the xhtml we name it by stating the following:

1
class=""

and in the corresponding css we select it with the full stop symbol(.item{})

here comes the science….

below is a basic well structured xhtml document with a link to an imaginary stylesheet. Have a quick look at where “id=” and “class=” are being used.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>title</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>Page heading.</h1>
<p>Brief description.</p>
</div>
<div id="menu">
<ul>
<li><a href="#" title="" class="active">menu item</a></li>
<li><a href="#" title="">menu item</a></li>
<li><a href="#" title="">menu item</a></li>
<li><a href="#" title="">menu item</a></li>
</ul>
</div>
<div id="pageContent">
<div class="content">
<p>i am some content</p>
</div>
<div class="content">
<p>i am some more content</p>
</div>
</div>
<div id="footer">
<a href="http://www.eastcoastinteractive.co.uk" title="©2007 east coast interactive">©2007</a>
</div>
</div>
</body>
</html>

Id’s are being used here to define the parts that will only exist once and which form the structure of the document. As you can see, this includes, in hierarchical order from the opening of the body tag, the “container” element which holds everything below it. Firstly the “header” element, then a “menu” element, a “pageContent” item, (am deliberately ignoring the two items with classes and will get to this in a minute) and finaly the “footer” element. These items make up the page structure and will never have more than one instance on the page…perfect candidates for the ID selector. The corresponding CSS for a couple of these elements could look like this:

1
2
3
4
5
6
7
8
#container
{
position:relative;
width:746px;
border:7px solid #fff;
background-color:#fff;
margin:0 auto;
}
1
2
3
4
5
6
#header
{
position:relative;
height:109px;
background:#fff url('../images/head.jpg') no-repeat top right;
}

So…classes! In the xhtml example above, you can see two items with class=”content”. As there are multiple instances of these “content” areas, we give them a class definition to deal with them. An example could be:

1
2
3
4
5
6
.content
{
border:1px solid #fff;
padding-top:1.3em;
background-color:#ccc;
}

As we can see, classes have scope for re-use where id’s are fixed to one element per document and hopefully it’s now easier to determine which one to use in your own code.

There is much more that can be said about id’s and classes, including pseudo classes etc but this is just a very brief introduction to answer a specific question we were asked. We will aim to expand on this with further articles.

Entry Filed under: xhtml/css

Leave a Comment

Required

Required, hidden

Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackback this post  |  Subscribe to the comments via RSS Feed

Calendar

April 2017
M T W T F S S
« Feb    
 12
3456789
10111213141516
17181920212223
24252627282930

Categories

Most Recent Posts

Feeds