Combining CSS properties
I am trying to combine some of my CSS and these are pretty simple questions, but I have some problems, 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 these selectors? The only time I will use h2.post-title
this is the link. Any suggestions, I tried to remove the first one but it made it HUGE.
Thoughts?
source to share
If you remove the h2 font style it reverts back to the default font size, which is quite large. You can customize it separately:
h2.post-title {
font-size:130%;
}
But this will take up more space than just setting both selectors to the same style. My advice is to leave it as it is unless you have a compelling reason to change it.
source to share
The point is that "h2.post-title a" only applies to the <a> element of your code. Browser uses standard css in <h2> -tag!
Let's take a look at your HTML:
<h2 class="post-title"><a href="#">Clickable title</a></h2>
You need rules for both <h2> and <a> -tag. To do this, you need to include both h2 and a in your stylesheet (as you described).
The solution might be to remove the default <h2> style, with some of the reset css - you are using "find it on the web".
Another solution would be to move the spesification class from "h2" to "a" (and style only 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 entirely, just print the <a>. But this can break your semantics.
source to share