Linked header how to?

I have downloaded cs templates and want to modify them. The headings are not linked headings. I would like to make linked headings which means that the heading retains its css styling but can be clicked (basically I want to enclose the heading in the <a href="">tag) but when make it linked the styling of the links takes over. How do I fix this?

 

Put the heading styling into the anchor section

 

h2 a, h3 a, h4 a {
// your rules for headers here to override the anchor rules.
}

 

You need to put the anchor inside the heading element, as inline elements cannot contain block level elements.

<h1><a href="#">This is a linked heading</a></h1>

Code (markup):

From there, you style the link so that the display is set to block and that a width is specified (in this case, 100%) after removing the underline. You can also set a color and background for the anchor as well, if you want.

h1 a {
    background: #CFC;
    color: #000;
    display: block;
    text-decoration: none;
    width: 100%;
}

Code (markup):

 

Thank you very much. This one problem has been driving me mad. I am very new to CSS. I have always used tables and I know this question may have seemed dumb. Thanks again! Could you also refer me to some resource whether paid or free which I can use to master CSS so that I don't have to ask sillly questions like this?

 

Two books from SitePoint.com may be of interest to you, depending on your level of HTML knowledge.

Build Your Own Web Site The Right Way Using HTML & CSS by Ian Lloyd
HTML Utopia: Designing Without Tables Using CSS, 2nd Edition by Rachel Andrew & Dan Shafer