The dilemma in the decision to create CSS for H1, H2, H3, etc.

Question

I currently have some general-purpose types H1, H2, H3 for my site that are great for most "general" headers, where I need a simple "traditional" heading.

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

I also create some components where I have something like this, that is, I need a header specific to this type of control.

  <div class="titledimage"><h1>Section header</h1><img .../></div> .titledimage h1 { color:red; bottom-border: 1px solid blue; } 

The problem I am facing is that the h1 in the titledimage section titledimage also h1 , as defined earlier, so it inherits all the styles defined by h1 . This is usually undesirable - I just want red and 1px solid blue for the title in the div .titledImage .

I read and tried to answer this question about H1 styles . I came to the conclusion that if you are executing specific header styles (.titledimage h1), you cannot really create 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 noticed that they actually use H6 to style YUI menu controls , and I wonder if they do this 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 (as far as I know)

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

Answer 1

It seems wasteful to me. There should be a clean way to apply the /* lots of style attributes */ tags to the h1 tags that you want to apply to without applying it to h1 within .titledimage .

Say what 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 want your CSS to look a bit 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 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 this material as H1-H5 as possible, and if you have to go with alernative, define a class specifically designed for dumping that does not apply to h1, but to the containing div of any class.

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

Answer 2

Well, a simple solution is not to nest the h1 tag, i.e.:

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

If h1 does not have the desired style, 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 can be styled just like a div (border, width, etc.) anyway.

Answer 3

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

The problem with this approach is that you cannot reuse reset styles for other headers with specific styles, for example.

 <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 the best approach would be to define your discharges in a separate class

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

Then you can reuse these discharges if necessary, for example.

 <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>