2

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; }
6
  • @daniel - done. it posted before i wanted it to but i'm not sure how a dupe occured. Mar 15, 2009 at 4:26
  • Can you post the general structure of your HTML? I don't think having many H1's is very useful in most cases.
    – strager
    Mar 15, 2009 at 4:47
  • @strager - did you see question 503925? so you're suggesting what - h2 ;-) ? i'm leaning towards what yahoo does with their <h6> thing. if its legitimately a header it should be H something at least. i need to install a screenreader one of these days to see how accessiblity works Mar 15, 2009 at 5:08
  • @Simon, Generally, headers should be able to create a table of contents. (Opera: View->Style->ToC) SO isn't a good example of this, but Wikipedia is.
    – strager
    Mar 15, 2009 at 5:46
  • @strager - good point. take a look at Yahoo's homepage (I'm assuming you get the new version). they have panels with headers such as 'Today's Top Searches'. These are the kind of things i'm talking about. these probably are good candidates for table of contents Mar 15, 2009 at 6:25

3 Answers 3

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

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.

1
  • @cletus - i like the conciseness of <h1>. it would still logically be a header and i'd like to still call it one. the answers in the question i linked to also agreed that this is a good practice. i did wonder about <h1 class="..."> but thats just a little clunky too - but may be best solution here Mar 15, 2009 at 4:28
0

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>
2
  • @don - thats looks a little hairy to be, but I love the BBC owl icon you have :-) takes me back... Mar 15, 2009 at 4:46
  • you could put the hreset class on the div: .hreset h1 { /* reset */ }
    – nickf
    Mar 15, 2009 at 9:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.