Dilemma in deciding how to create CSS for H1, H2, H3 etc.

Question

I currently have some general purpose H1, H2, H3 styles for my site which work great for most 'general' headings where I need a simple 'traditional' header.

 h1 { /* lots of style attributes */ }
 h2 { /* lots of style attributes */ }
 h3 { /* lots of style attributes */ }

I am also creating some components where I have something like this, thats to say I need a header specific to that particular type of control.

 <div class="titledimage"><h1>Section header</h1><img .../></div>

 .titledimage h1 { color:red; bottom-border: 1px solid blue; }

The problem I'm encountering is that the h1 under titledimage is also an h1 as defined earlier so it inherits all the styles defined by h1. This is generally undesired - I just want red and 1px solid blue for the header in the .titledImage div.

I was reading and trying to answer this question about H1 styles. My conclusion is that if you are doing specific header styles (.titledimage h1) you cant really do generic header styles (h1) unless :

 a) you reset every style attribute in the '.titledimage h1' style
 b) you just use a class name instead of h1
 c) your `h1` style is defined with very few attributes that you'd 
    be overriding anyway

I've noticed that for styling the YUI menu control they actually use H6 and I'm wondering if they are doing that to avoid such conflicts.

Should I

a) be using <h6> like yahoo does?
b) reset every attribute defined by `h1` when I define `.titledimage h1` ?
c) just use a class name for `.titledimage header`, and leave 
   `h1`, `h2`, `h3` for 'traditional more logical headers' 
d) something else

ideally i want to say this, but theres no such thing (to my knowledge)

 .titledimage h1 { inherit: none; color:red; bottom-border: 1px solid blue; }

Answer 1

Well the simple solution is not to nest an h1 tag ie:

<div class="different-header-style">Some Header</div>

If h1 doesn't have the desired styling you want then why use it?

Also, better than nesting it in a div just for style I would do this:

<h1 class="special-header">Some Header</h1>

h1 is a block element that you can style just like a div (border, width and so on) anyway.

Answer 2

b) reset every attribute defined by h1 when I define .titledimage h1 ?

The problem with this approach is that you can't reuse the reset styles for other headers with specific styles, e.g.

<div class="titledimage"><h1>Section header</h1><img .../></div>
<div class="titledimage"><h2>Section header</h2><img .../></div>
<div class="otherimage"><h1>Section header</h1><img .../></div>

I think a better approach would be to define your resets in a separate class

.hreset {
  /* Reset the header styles here */
}

You could then reuse these resets whereever necessary, e.g.

<div class="titledimage"><h1 class="hreset">Section header</h1><img .../></div>
<div class="titledimage"><h2 class="hreset">Section header</h2><img .../></div>
<div class="otherimage"><h1 class="hreset">Section header</h1><img .../></div>

Answer 3

To me resetting seems wasteful. There must be a clean way to apply the /* lots of style attributes */ to the h1 tags you want it applied to while not having it apply to the h1 within a .titledimage.

Say you had:

<div class="top"><h1>PageName</h1></div>
<div class="leftNavigation"><h1>Cat1</h1><h1>Cat2</h1><h1>Cat3</h1></div>
<div class="rightMarginNote"><h1>Username</h1></div>
<div class="content">
 <h1>CONTENT</h1>
 <div class="titledimage">
  <h1>title</h1>
 </div>
</div>

Then you'd want your CSS a little like:

.top h1, .leftNavigation h1, .rightMarginNote h1, .content > h1 {
  /* lots of style attributes */
}
.similarly h2 { /* lots of style attributes */ }
.similarly h3 { /* lots of style attributes */ }
.titledimage h1 { color:red; bottom-border: 1px solid blue; }

Instead of the alternative

h1 { /* lots of style attributes */ }
h2 { /* lots of style attributes */ }
h3 { /* lots of style attributes */ }
.titledimage h1, .otherCase h1, .anotherCase h1, yetAnotherCase h1 {
  /* lots of style backtracking */
}
.titledimage h1 { color:red; bottom-border: 1px solid blue; }
.otherCase h1 { color:blue; bottom-border: 1px solid blue; }
.anotherCase h1 { color:green; bottom-border: 1px solid blue; }
.yetAnotherCase h1 { color:mauve; bottom-border: 1px solid blue; }

Also group as much of that H1-H5 stuff together as possible, and if you must go with the alernative define a class specifically for the resetting that is applied not to the h1 but to the containing div of any class.

<div class="titledimage hReset"><h1>title</h1></div>