CSS: Use ID Selector or Classes?

Mar, 19, 2008

Posted by George
2 Comments

When should you use an ID Selector or a class in CSS?

There are many of answers, some more technical than others, but here’s a fast and dirty answer.

Use an ID selector when it will be used only once on the page. For example, DIVs for header, body and footer are just begging to be ID selectors.

Use a Class name when an element will be used more than once on a page. As an example, if you have styles for external links and a different style for internal links you should use a Class name.

SAMPLE: What it Looks Like

<html>
<head>
head code here
</head>

<body>

<div id=”header”> Header stuff here </div>

<div id=”content”> Page content here including an <a href=”something.html” class=”ilink”>internal link</a> and an <a href=”http://www.somewebsite.com” class=”elink”>external link</a>. </div>

<div id=”footer”> Footer stuff here </div>

</body>
</html>

RELATED POSTS

This entry was posted on March 19, 2008 at 7:44 pm. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Posted in Web Design by George | 2 Comments

2 Comments "CSS: Use ID Selector or Classes?"

  • Eyebee says:
    April 6, 2008 at 10:39 pm

    I was always of the understanding that you can (or at least should) only use an ID once on a page anyway.

  • George says:
    April 7, 2008 at 8:24 pm

    Exactly. As a matter-of-fact if you have two elements on the same page with the same ID name you will end up with a conflict only one of them will be styled as you specified. I guess depending upon the browser maybe neither wold work if you used an ID 2x or more.

Leave a Comment