Combining CSS properties

Question

I am trying to combine some of my CSS and it is kind of an easy questions but I am kind of having some trouble, i have this code:

h2.post-title, h2.post-title a{
    display:block;
    background-color:#000;
    padding:3px;
    color:#ffffff;
    text-decoration:none;
    text-transform:uppercase;
    font:lighter 130% Georgia, Arial;
}

Do I need to have both of those selectors there? The only time I will be using the h2.post-title it will be a link. Any suggestions, I tried removing the first one, but it made it HUGE.

Thoughts?

Thanks,

Ryan

Answer 1

If you remove the h2 font styling, it will revert to it's default font size which is pretty big. You could set it up separately:

h2.post-title {
    font-size:130%;
}

But it will take up more space than simply setting both selectors to the same style. My advice - leave it as it is unless you have a good reason to change it.

Answer 2

The thing is that "h2.post-title a" only applyes to the <a>-element of your code. The browser uses standard css on the <h2>-tag!

Lets have a look on your HTML:

<h2 class="post-title"><a href="#">Clickable title</a></h2>

You need rules to both the <h2> and the <a>-tag. To do that, you need do include both h2 and a in the stylesheet (as you described).

A solution might be to remove the default styling of <h2>, by some of the many reset css-rules you'll find on the Internet.

An other solution would be to move the class-spesification from "h2" over to "a" (and style just the "a.post-title" attribute in CSS):

<h2><a class="post-title" href="#">Clickable title</a></h2>

Or maybe you can remove the <h2>-tag completely, just print out <a>. But this might break your semantic.