How to make a H1 tag in CSS into a link

[shanediffily]

On the homepage of Diffily.com : "The Website Manager's Handbook" I have a headline "The Website Manager's Handbook". I want to use as much semantic markup as possible, so I have marked as a H1 using the following tag

h1.homepage_bannerarea {
font-size: 300%; color: #ffff00; font-family: Georgia, Verdana, Arial, Helvetica, serif; font-weight: normal; line-height: 80%; BORDER: #cccc00 0px solid; margin-bottom: -0.25em;
}

However, I now want to make this a hyperlink, with states for LINK, HOVER, ACTIVE and VISITED. How do I do that?

Is is something like

h1.homepage_bannerarea a.link { etc }
h1.homepage_bannerarea a.hover { etc }
h1.homepage_bannerarea a.active { etc }
h1.homepage_bannerarea a.visited { etc }

If so, will it still remain 'semantically' as a HEADING 1?

Thanks

 

[louie]

you need to give it an id:

<h1 id="h1_link"><a href="#>your text</a></h1>
then in your stylesheet you set it up:
#h1_link h1 a{your style here;}
#h1_link h1 a:hover{your style here;}

 

[RedCardinal]

On the homepage of Diffily.com : "The Website Manager's Handbook" I have a headline "The Website Manager's Handbook". I want to use as much semantic markup as possible, so I have marked as a H1 using the following tag

h1.homepage_bannerarea {
font-size: 300%; color: #ffff00; font-family: Georgia, Verdana, Arial, Helvetica, serif; font-weight: normal; line-height: 80%; BORDER: #cccc00 0px solid; margin-bottom: -0.25em;
}

However, I now want to make this a hyperlink, with states for LINK, HOVER, ACTIVE and VISITED. How do I do that?

Is is something like

h1.homepage_bannerarea a.link { etc }
h1.homepage_bannerarea a.hover { etc }
h1.homepage_bannerarea a.active { etc }
h1.homepage_bannerarea a.visited { etc }

If so, will it still remain 'semantically' as a HEADING 1?

Thanks

A little bit easier:

#homepage_bannerarea h1 {
border: #cccc00 0px solid;
color: #ffff00;
font-family: Georgia, Verdana, Arial, Helvetica, serif;
font-size: 300%;
font-weight: normal;
line-height: 80%;
margin-bottom: -0.25em;
}
#homepage_bannerarea h1 a:link, #homepage_bannerarea h1 a:visited {
...
}
#homepage_bannerarea h1 a:hover {
...
}

Sorry forgot to mention you can then remove the id you are using in the <h1> element (and in the <p> if you use the same logic above) - not requied with above.

Links in header elements can give you a slight boost also

 

[enzo]

WHy id? Wouldn't it be better to use classes instead of id's just incase you want to reuse the link styles?

 

[louie]

You use id when you want just one h1 tag per page to look different.
Use classes when you have more then 1 per page.

id is also very important if you ever want to make changes to the css and if you ever need to add some sort of Javascript to the h1 tag.