heading problem H1 in CSS

Question

hi..

I'm not able to change the size and color of heading h1 in my site.

I have used an external Css file.

code as below..

h1 {
    Background-color : red;
    Color : green;
}

Answer 1

Try setting '!important' behind it:

color: green !important;

Note that this only applies if there are other styles overriding your external css. You should test that your external CSS-file is read at all. You can do that by making a new paragraph for example. Give it an id (id="foo") and set this in your css

color: green;

If it doesn't turn green you should check your css include path.

Answer 2

Try using Firebug or IE8 Developer Tools to inspect the element and make sure you don't have conflicting styles from another stylesheet or somewhere else in your html document.

Answer 3

An URL would be helpful.

Also, CSS rules are lowercase. (e.g. background-color, not Background-color)

Read about CSS specifity, that is probably the problem: http://htmldog.com/guides/cssadvanced/specificity/

Answer 4

You might also consider using the hex codes for the colors instead of "red" and "green" - I've seen that produce some odd behaviors in some browsers (or be ignored entirely).

Answer 5

Thats looks ok to me.

You may have an issue with the H1 already being set somewhere else in the style sheet.

Either you can search for it or make your adjustments as important ie.

h1{
  background-color: #ff0000 !important;
  color: #00FF00 !important;
}

Hope this helps

Answer 6

h1 {
    background: red !important;
    color: green !important;
}

Also, depending on how your original h1 declaration was written, you can use specificity and cascading to overwrite the previous value(s).

Answer 7

Also, consider the ordering that you call your external stylesheets, you may have a your main css file appear first, and then a second stylesheet after that, which also has styles set on your H1, this may be overriding your first stylesheet - something to look into anyways.

Answer 8

I'm sure you've verified that the external stylesheet is loaded to your site and you are referencing it properly.