CSS: How to address specific tags

Question

I'm just beginning to learn CSS (and XHTML) and I ran into a problem of assigning different properties to tags which have the same tag name.

For example: I have two h3 headers, but want to address them specifically using CSS because I want to make them different colours.

I believe this has something to do with naming the headers differently (i.e. h3.a), but trying this didnt work. Help would be appreciated!

Answer 1

Besides the tag name CSS can be applied by Class and ID. Note that it's best to make sure the case in your tags matches the case in the tags.

.myClass may not apply to class="myclass"

IDs:

<style>
#FirstHeading {color: red;}
#SecondHeader {color: blue;}
</style>

<h3 id="FirstHeading"></h3>
<h3 id="SecondHeader"></h3>

Classes: .redHeading {color: red;} .blueHeader {color: blue;}

<h3 class="redHeading"></h3>
<h3 class="blueHeader"></h3>

The purpose of IDs are typically to point to one specific element in your page, classes are designed to work with multiple different elements

Classes can also be combined, so you don't need to load all the styles into one class.

<style>
.redHeading {color: red;}
.blueHeader {color: blue;}
.boldHeader {font-weight: bold;}
</style>

<h3 class="redHeading boldHeader"></h3>
<h3 class="blueHeader boldHeader"></h3>