This page shows you how to specify more than one “class” attribute for a HTML element (html tag).
To specify more than one class for a HTML element, you should 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:
.bk1 {color:blue}
.bk2 {color:red}
The last CSS takes effect.
rough list of CSS priority.
<p style="…">.<style type="text/css">…</style>.<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 }).Sample testing template:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> .bk1 {color:blue} .bk2 {color:red} </style> <title>test: html multiple classes and css</title> </head> <body> <h1>test: html multiple classes and css</h1> <p class="bk1 bk2">Something</p> </body> </html>
test here: test: html multiple classes and css.