CSS Tutorial by Paul Bohman

• Using <div> and <span> elements |
• Complex Style Declarations

Grouping Style Declarations

You can apply style declarations to more than one element:

h1, h2, h3, .side_items, #top_paragraph
  {
  color: red;
  }

In the above example, all of the items specified will have red text. Notice that there are commas between all of the items that will receive the style, and that there is no comma at the end of the list. Also notice that all three methods of applying styles are represented in this example, the first three items are tags, the next item references a class, and the next item references an id. It's ok to mix and match them like this.

In a related idea, you can specify more than one class for any given tag:

<p class="highlight style2 style3">Here is the paragraph, with three classes applied.</p> 

Notice that the class attributes are separated by spaces, not commas. I don't know why they use commas for one technique and spaces for another, but that's just the way it is. Sorry.

You cannot apply multiple id attributes to anything:

WRONG:

<p id="id1 id2 id3">This is wrong.</p> 

But you can apply both a class and an id:

OK:

<p id="id1" class="class1">This is ok.</p> 

Or even an id plus multiple class attributes:

OK:

<p id="id1" class="class1 class2 class3">This is ok.</p> 

If you apply multiple styles to a tag, remember that the last style declared is the one that has precedence in cases where more than one style reference the same property. For example, if all three of the styles above deal with font color, the font color in class3 will be implemented.