CSS Help

[Lee]

I have a question about CSS.

I have one element that I am styling. Lets say something like:

h3 {
background: blue;
padding: 10px;
font-size: 1.1em;
}

I then have another element that I want to inherit the previous classes style but also have its own style information. For example:

h3.classname {
background: pink;
}

When I apply this class name the background colour of my H3 tag remains blue. How can I tell the class to override the default styling of the element?

Cheers,
Lee

 

[Paul B]

Are you using <h3 class="...."> when creating your markup?

 

[Lee]

Yeah, sorry should of said that.

 

[Paul B]

That should work as I use classes like that on my Pages.
Presumably the h3.classname is after the h3 in the stylesheet?

You could always use the !important attribute, but you shouldn't need to; for example:
h3.classname {
background: pink !important;
}

 

[Lee]

Weird, doesn't work.

But, I have found a solution. If I use h3#classname and change from a class to an id in the CSS it works. This is okay as I am only using one instance of the class on the page. But I'm not sure if this is the best way to achieve what I am after. Basically, I am using this class to change the background of the h3 tags in the sidebar. Each sidebar "block" will have its own class and own unique background colour.