CSS Tutorial by Paul Bohman

• Grouping Style Declarations |
• Colors

Complex Style Declarations

Sometimes you need to be very specific when assigning styles. Here is an example:

#main_content #section1 h1.highlight {
  background-color: orange;
  }

If you read this style in a sort of backwards way, the style (background-color: orange) will apply to the item with a class of highlight (class="highlight"), which is inside of the heading level 1 ( <h1> ), which is inside of an item with an id of section1 (id="section1"), which is inside of an item with an id of main_content (id="main_content").

Note: Notice that there is no space between the h1 and the .highlight, but there are spaces between the references to id attributes. Why? I don't know. Just because. That's the way CSS works.

Here is another example:

p a img.special {
  border: none;
  }

This one says that all images with the class of special (class="special") which happen to be inside of links ( <a> ) inside of paragraphs ( <p> ) will have no border.

And here is another example:

.dark_background strong {
  color: white;
  }

This one says that all <strong> tags which happen to be in items with a class of dark_background (class="dark_background") will have white text.