Question

What would be the proper way to style multiple h6 headings differently on one page?
I was thinking of the following:

css:

.content{ width:660px; overflow:hidden; }

.content h6{ margin:25px 20px 0px 35px;
             font-size:32px;
             padding-bottom:5px;
             font-family: 'Arial', sans-serif;
 }

.blue {
     color:#60817a;
     border-bottom:2px solid #99bcb4;
     text-shadow: 1px 1px 1px #99BCB4;
 }

.black {
         color:#000000;
         border-bottom:2px solid #333333;
         text-shadow: 1px 1px 1px #333333;
     }

html:

<div class="content">
<h6 class="blue">Subtitle</h6>

 <div class="content">
 <h6 class="black">Subtitle</h6>

Answer 1

A couple of things:

1. For a selector to take precedence over another selector, you need to consider its specificity. Your .blue selector will not be as specific as your .content h6 selector, based on the rules outlined in that link (try adding color: red to the content h6 selector; other rules will take precedence like this). Try making the second selector .content .blue instead.

2. blue is a bad name for a class; for classes and IDs to be semantic, you should choose a name that describes what it is, rather than what it looks like (i.e. looks a bit daft when you change your CSS and decide that it should be red instead).