This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by FeatherFingers
almost 10 years

When do you use class, and when do you use ID?

What’s the difference? Is it to keep your styling organized? Or is one solely for text? As far as I can tell they’re interchangeable. If anything, looking for some good practices tips.

Answer 53acb28b8c1ccc0acf00168d

1 vote

Permalink

An id (identifier) in HTML is analogous to a variable in a program. They both identify a specific reference. In JavaScript an identifier is immutable. The same cannot be said of HTML id, but the specification suggests we treat them as though they are. Immutable means unique, no duplicate. It also means it cannot be altered in name. Once a variable is out there, it is out there until the session end.

As @stetim94 suggests, id attributes are best given to containers that are single and unique. The header and footer are good examples. The id also makes for a good parent wrapper, and when used as a selector in conjunction with its children, gives the children an extra boost in specificity when we wish to match them.

element specificity = 1
.class specificity = 10
#id specificity = 100

An element like an img might have shared properties in the page or across the site. Say it has consistent border and border-radius, width, height, margin and placement, as well.

.photo {
    margin: 1em;
    float: right;
    border: 3px double #d9d49a;
    border-radius: 9px;
}
.photo img {
    width: 400px;
    height: 300px;
    margin: 2px;
    border-radius: 5px;
}
#marquee {
    float: left;
}
#marquee img {
    width: 800px;
    height: 200px;
}

Now in the HTML we can classify all photos and assign them base properties, and we can identify one key photo and override some of the base properties and keep the rest.

<div class="photo" id="marquee"><img src="#"></div>
<div class="photo"><img src="#"></div>

We’re assuming the parent element is wide enough to contain #marquee (~810 pixels). It overrides the float property declared in the .photo class. It also overrides the width and height properties declared for .photo img children.

CSS, as you will learn, has lots of really interesting characteristics, many of which are fundamental to understanding this further. We can’t put it all in one post. Lots of books are written on the subject, and they don’t often repeat each other on much except the basics.

To conclude, think of id as a unit object reference, and class as a group object reference. A class object reference can apply on its own, and also can apply to a specific element type in a modified way:

.class {
    font-family: Calibri, Arial, sans-serif;
}
p.class {
    font-family: "Lucida Sans", Arial, sans-serif;
}

All elements of the .class class, will have Calibri text face, except paragraph elements of the class. They will have Lucida Sans.

We can define base properties for a class, then refine them and add to the list in specific element types, and further refine/add to/cancel them for the children of these. Not so easy to do with id. Clearly, the two have fairly discernible roles on the surface. As we peer deeper in on larger projects, these roles begin to stand out.

points
Submitted by Roy
almost 10 years

Answer 53ac7a2d548c351ebb000e62

0 votes

Permalink

Id selector should be use for a single element on the page. classes are used if you have multiply items. for example if i have menu like this:

<div id="header">
  <div class="headermenu"></div>
  <div class="headermenu"></div>
  <div class="headermenu"></div>
  <div class="headermenu"></div>
</div>

so simply said: id single element, class multiply elements. use id selectors for the footer and header, and other very (single) elements on the page.

feel free to google it, there are lot of great answers out there, or other post on the forum here. it is you call which to use. http://www.w3.org/ makes the internet standars, they have the official rules.

points
Submitted by stetim94
almost 10 years

1 comments

Roy almost 10 years

Small point: HTML and CSS don’t have ‘rules’. They have ‘specifications and recommendations’.