∑ Home ◇ Math ◇ Computing ◇ Arts ◇ Words ◇ Literature ◇ Music ◆

More Than One Class for HTML Tag

Xah Lee, 2010-10-06, 2011-02-04

This page is a tutorial on HTML. You can specify more than one class for a html tag, using space as separators, like this:

<span class="bk1 bk2">Alice In Wonderland</span>

You should NOT use multiple “class” attributes.

<span class="bk1" class="bk2">INCORRECT! INVALID! WRONG!</span>

The order of your class values does not matter.

If you have styles that conflict, such as:

.bk {color:blue}
.bk {color:red}

The last css takes effect.

In general, css conflicts are resolved by complicated CSS priority rules. But basically, the priority, from most important to less:

① the css embedded in the tag for that tag. e.g. <p style="…">.
② the css embedded in the file header for the page. e.g. <style type="text/css">…</style>.
③ The css flie, e.g. <link rel="stylesheet" type="text/css" href="main.css">. If there's a conflict within the file, the last one rules. And if you want to override the priority, you can put !important, like this p { text-indent: 1em !important }).

Here's code you can test yourself:

<!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=utf-8">
<title>Test HTML</title>
<style type="text/css">
.bk1 {color:blue}
.bk2 {color:red}
</style>
</head>
<body>
<p class="bk1 bk2">Something</p>
</body>
</html>

✍