By Testering on

So, I am trying to get my h3 titles to be displayed in a different color, but for some reason the following code does not work.

I confess I don't know much about CSS, but this seems fairly straightforward. Can anyone figure what I am doing wrong? I am using the Four Seasons theme, by the way. Also, obviously I am editing the style.css file. 

h1, h2, h3, h4, h5, #headline a {
  font-family: Georgia, "Times New Roman", Times, serif;
  margin-top:0px;
  margin-bottom:0.5em;
}

h1 {
  font-size:200%;
  color:#FF9900;
}

h2 {
  font-size:160%;
  color:#FF9900;
}

h3 {
  font-size:130%;
  color:#006699;
}

Thanks!

⋅ Categories: Drupal 6.x

Comments

3cwebdev’s picture

3cwebdev commented

The current H3 CSS rule that you're trying to override probably has a more specific CSS rule applied.

I would highly suggest that you use FireFox with the FireBug plugin. Then you can use it to find the CSS that is applied to the current H3 element. Once you find the CSS you should use a CSS selector that is at least as specific to override the current one.

For instance, it might be something like:

h3.title
{
    color:#006699;
}

...then you would need to use the same selector (h3.title)

Testering’s picture

Testering commented

Thanks, that is really helpful. I'll try it out.

xmacinfo’s picture

xmacinfo
he/him
Primary language French
Location Canada
commented

Here is an article about CSS Inheritance: "http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css" You can skip directly to the examples.

Basically, CSS defines an order in which CSS rules take precedence over other rules. In your case, h3 is lower in the list since other CSS rules are taking precedence. In Drupal a lot of themes use specific rules bypassing basic ones.

You can use the Firefox Firebug extension (getfirebug.com) to look at the CSS inheritance in the CSS panel, from top to bottom. With this extension, you will be able to see which CSS rule takes precedence over other defined CSS rules, and in your case, which rules takes over your h3.

/*_*/
http://www.xmacinfo.com