How to Use Multiple CSS Classes on a Single Element

This would be the text of the paragraph

This sets the following three classes on the paragraph tag:

• Pullquote
• Featured
• Left

Notice the spaces between each one of these class values. Those spaces are what sets them up as different, individual classes. This is also why class names cannot have spaces in them because doing so would set them as separate classes.

Once you have your class values in HTML, you can then assign these as classes in your CSS and apply the styles you would want to add. For example.

.pullquote { ... }
.featured { ... }
p.left { ... }

In these examples, the CSS declarations and values pairs appear inside the curly braces, which is how those styles would be applied to the appropriate selector.

Multiple Classes, Semantics, and JavaScript

Another advantage of using several classes is that it increases interactivity possibilities.

Apply new classes to existing elements using JavaScript without removing any of the initial classes. You can also use classes to define the semantics of an element — add additional classes to define what that element means semantically. This approach is how Microformats works.

Advantages of Multiple Classes

Layering several classes can make it easier to add special effects to elements without having to create a whole new style for that element.

For example, to float elements to the left or right, you might write two classes:

left

and

right

with just

float:left;

and

float:right;

in them. Then, whenever you had an element you need to float left, you would simply add the class "left" to its class list.

There is a fine line to walk here, however. Remember that web standards dictate the separation of style and structure. Structure is handled using HTML while style is in CSS. If your HTML document is filled with elements that all have class names like "red" or "left," which are names that dictate how elements should look rather than what they are, you are crossing that line between structure and style.

Disadvantages of Multiple Classes

The biggest disadvantage of using several simultaneous classes on your elements is that it can make them a bit unwieldy to look at and manage over time. It may become difficult to determine what styles are affecting an element and if any scripts affect it. Many of the frameworks available today, like Bootstrap, make heavy use of elements with multiple classes. That code can get out of hand and hard to work with very quickly if you are not careful.

When you use several classes, you also run the risk of the style for one class overriding the style of another. This collision then can make it difficult to figure out why your styles aren't being applied even when it appears that they should. Remain aware of specificity, even with the attributes applied to that one element.

By using a tool like the Webmaster tools in Google Chrome, you can more easily see how your classes are affecting your styles and avoid this problem of conflicting styles and attributes.