Assigning multiple classes to an element

Elements can have multiple classes, as in the example below

normal <p> element

<p> is a block element and always corresponds with the width of the parent element. The <p> element may not contain other block elements like headers, paragraphs tables or lists.

<p>Contents</p>

<p> indented element

<p> will be indented with the class "cite"

<p class="cite">Content</p>

<p> with olive text

<p> will have its text color changed via the class olive.

<p class="olive">Content</p>

<p> with olive text and indented

<p> have its text color changed via the class olive and indented via the class cite.

<p class="olive cite">Content</p>

Ids and classes can be combined

You can use an element's ID with one or several classes as well.
You can change background images in a banner, for instance, without having to specify the ID and its dependencies for each background image.

Example: The background image is changed via the class
Xhtml
<div id="banner" class="products">
<div id="banner" class="about-us">

CSS
.products { background-image: url(images/products.jpg); } .about-us { background-image: url(/images/about-us.jpg); }