How do I assign multiple classes to an element?
Author: Deron Eriksson
Description: This CSS example demonstrates how to apply multiple classes to an element.
Tutorial created using: Windows XP


It's possible to assign multiple classes to an element by setting the value of the element's class attribute to be the names of the classes, separated by spaces. The following HTMLW file demonstrates this. It includes two class selectors, '.classOne' and '.classTwo'. The file contains three <h2> elements. The first h2 is assigned the classOne class, the second h2 is assigned the classTwo class, and the third h2 is assigned both the classOne and classTwo classes.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
.classOne { background: yellow; }
.classTwo { color: red; }
</style>
</head>
<body>
<h2 class="classOne">Howdy One</h2>
<h2 class="classTwo">Howdy Two</h2>
<h2 class="classOne classTwo">Howdy Three</h2>
</body>
</html>

The results match the expected output. The first h2 has a yellow background, the second h2 has red text, and the third h2 has a yellow background and red text.

multiple classes assigned to element example