Two different h1 styles

I have styled my h1 as a heading for my middle column with CSS. Know I want to have a different style for another h1 which will act as a heading for a table which will go in the <th><h1></h1></th>

How do I design a second h1 style?

You can apply a specific class to each H1. For your main heading you can leave it as default H1 or give it a class.

So for your main page title you could do

<h1 class=“title-page”>My heading</h1>

and for your table heading you could do

<h1 class=“title-table”>My table title</h1>

then in your stylesheet add two classes…

h1.title-page {}
h1.title-table {}

…just add your styles for each H1 between the curly braces

or instead of adding classes to the H1 you can just specify styles by its location in the code.

You can style one this way
h1 {}

then the other this way
th h1 {}

No need for extra classes and code. Although not sure why you are putting an H1 in the TH. You can simply style the TH if you want to.

Alternatively, for the sake of semantics, you could use h2 instead.

OR give your middle column an id then use something like…

#ColumnId h1{color:#992288;}

That way you can have a general h1 style applied to all the others…

h1{color:#000000;}
#ColumnId h1{color:#ff0000;}

<th id="ColumnId">
   <h1>Eat at Joes!!</h1>
</th>

Good point, but then he’d have to have a differentiation between all the <h2> 's anyway.

he he - lots of different way for you Hospitable - take your pick!

Why would you want a heading within TH? TH means “table heading” – it being a heading is implied and having a heading element just creates a bogus section.

Perhaps what you want is <caption>?

Wow, thanks for all the replies!

I want an h1 in there as I saw it on freeonlinegames.com and think it bodes well for SEO even though it may not make sense in a <th> tag.

I think it makes little difference SEO-wise. The secret of a well composed page is that it does make sense - which is why I don’t think you should use <h> tags within <th> tags as zcorpan says…

Unless you saw it recommended somewhere on a reputable website dealing with coding/SEO practices, I wouldn’t just be copying any old site.

Well, I decided to just have a row with colspan and not put the h1 in <th> tags - that would really be a bit pointless. I think that having two or three or even more h1s on one webpage is not a problem as long as each one denotes a major category of content. Only if they didn´t you would need to drill down to h2, h3 etc.

The web-design pundits will tell you that you’re only allowed ONE <h1> [FONT=“Georgia”]per web-page, or else the sky will open up and hell and brimstone will rain down on all humanity.

Personally, I don’t make it a point to follow rules like this… I do what’s convenient and most efficient at the time.

Just thought I’d point that out to you… you’ll encounter stuff like that all the time.

I WILL however also point out that you could style your[/FONT] <h2>'s to look like your <h1>[FONT=“Georgia”]'s.

At the end of the day, once you have a solution, that’s all that matters.[/FONT] :tup:

The web-design pundits will tell you that you’re only allowed ONE <h1> per web-page, or else the sky will open up and hell and brimstone will rain down on all humanity.
IT’S TRUE! Hope you’ve got a reinforced umbrella handy :weyes:

You should be doing what works best for visitors and search engines alike, not what’s most convenient.


Convenient for all… sometimes you just need to get things done and fussy details must be ignored. It happens.

Off Topic:

This is referring to the great Tables Vs. Divs debate… Things like SEO always take first priority, trust me.