Selectors: Tags, Classes, IDs – WRMF.ca (Transferred)

Which Selector to Choose & Why

There are three main CSS style types: tags, classes, and IDs.

This article will explain the difference between tags, classes, and IDs.

Tag Styles

I’ve started this discussion with tag styles because they’re the most basic and therefore easiest to understand.

When we make a tag style, we are styling a pre-existing “official” html element. These are the basic elements from which we build an HTML page. Such styles could include BODY, H1, H2, H3, H4, H5, H6, P, IMG, UL, LI, DIV, or A (to use the tags we’ve likely encountered already in class). There are many more.

Imagine that I’ve made a style for the P tag. Here’s some CSS:

p {
  font-family: verdana, helvetica, sans-serif;
  font-size: .85em;
  color: #CC99EE;
  }

This means that ALL the P content in my page (or pages) will instantly have these properties.

Class Styles

A class style is a custom style that you make up the name for.

In your style sheet, class styles must start with a period (.) character and have no spaces or “funny” characters.

Classes are applied as attributes to HTML tags.

To illustrate, let’s extend the p tag scenario above. Imagine that I’ve got one paragraph that needs to have a different color (or any other property) from the one above. All I’d need to do is make a class style (for example: .humor-british).

.humor-british {    
  color: red;
  }

In HTML, we’d apply the style in the following manner:

<p class="humor-british">Good morning, gentlemen. This is a twelve-storey block combining 
classical neo-Georgian features with the efficiency of modern 
techniques. The tenants arrive in the entrance hall here, 
and are carried along the corridor on a conveyor belt in 
extreme comfort and past murals depicting Mediterranean scenes, 
towards the rotating knives.</p>

This entire paragraph would have attributes set in the p style, as well as those set in the .humor-british class. If there’s a conflict (as with the two colors in the above example), the class style takes precedence. We can also apply classes to inline elements by using the SPAN tag, as in the following example:



I hadn't correctly divined your
<span class = "mocking"> attitude towards your tenants.</span> 
You see I mainly design slaughterhouses. Yes, pity. Mind you, 
this is a real beaut.

Here’s another typical use of class styles: for image floating. If we put float:left or float:right in our IMG tag style, all images will be floated. Typically, we won’t want to do that.

A better way, then, is to make two class styles (.floatleft and .floatright are obvious names, but you can of course choose whatever you want). The .floatleft style, for example, could be as follows:

.floatleft {
  float: left;
  margin-right: 5px;
}

To apply the floatleft style, we’d write something like

<img src= "celinedion.jpg" class="floatright" alt= "Canadian pop star" >

ID Styles

ID styles are also custom styles that you make up the name for. In some respects, they’re practically the same as classes.

There are two main differences, however.

First, in the style sheet, ID names must start with the # character.

Second, each ID is supposed to be used only once per page.

The typical way they’re used is as attributes that describe sections of the page. For example, a typical ID might be #sidebar (a DIV that we put a bunch of other DIVs into so that we can style them all as a group).

In HTML, the code is like this:




<div id="sidebar">
   Imagine lots of additional HTML here
 </div>

NOTE: a DIV can also have a class applied to it. In fact, it can have a class and an ID, if need be. You can have as many classes as you want on any element: just separate the applied classnames with spaces.

NOTE Part Deux: don’t forget that you can apply IDs and CLASSES to elements other than DIVs. Avoid divitis. For example, rather than wrapping a DIV around a single UL menu, just give the UL the ID, as below:



<ul id = "menu">

<li>item one</li>


<li>item three</li>


<li>item four</li>

</ul>

For the most part, people discourage the use of IDs these days because they introduce styling complexities (as they “weigh” more in CSS than classes do). However, they still have uses in HTML (such as for making links within a page) and JavaScript.

When To Use Which?

If you want all instances of a particular tag to have one or more characteristics, use a TAG style.

If you want to have some instances of an element have a characteristic, use a CLASS style. Classes can add to characteristics set in tag styles. You can even use more than one class on an element, which gives you a lot of styling power and the ability to organize code with precision.

For example, imagine that I want some of the links in my site to look just like basic simple links, some to look like buttons, and some of these buttons to have different colors, I could do write the following CSS and apply the classes as in the example below:


a {
font-family: helvetica, arial, sans-serif
}

.btn {
display: inline-block;
text-decoration: none;
color:white;
font-size: 14px;
padding: 6px 12px;
border: black 1px #2e6da4;
background-color: #337ab7;
border-radius: 4px;
}

.btn-alert {
background-color: red;
}


<a href="#">Normal Link</a>

<a href="#" class="btn">Basic Button</a>

<a href="#" class="btn btn-alert">Alert Button</a>

This is what the result would look like:

We see the cascade (the C in CSS) in action:

All links use Helvetica, whether they are buttons or or just normal links
Some links (those with the btn class) appear in rounded-corner boxes, and have no underlining, etc
Some links (those with the both the btn and btn-alert classes) have a red background, in addition to the characteristics listed in the first two items above

Final Distinction

So why in a stylesheet do we put a dot in front of a class, a # in front of an ID, and nothing in front of a Tag?

So the browser can tell the difference.

If I have a class called “author-bio” for example, the browser thinks it’s a TAG, because there’s no dot.

Remember also, that you need the dot or # only when you make the CSS style. In other words, these two special characters appear only in the stylesheet, and not in the HTML.