Have Geek Brain

H1 heading problem in CSS

I cannot change the size and color of the h1 header on my site.

I used an external Css file.

as shown below.

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


a source to share


8 answers


The url would be helpful.

Also, CSS rules are inline. (for example a background color, not a background color)



Read about the CSS specifics, maybe this is the problem: http://htmldog.com/guides/cssadvanced/specificity/

+4


a source


Try using Firebug or IE8 development tools to validate the element and make sure you don't have conflicting styles from another stylesheet or elsewhere in your html document.



+3


a source


This looks good to me.

You might have a problem with H1 already set somewhere else in the stylesheet.

Either you can find it, or make your settings important, i.e.

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

Hope it helps

+3


a source


Try putting "! Important" behind it:

color: green !important;

Note that this only applies if other styles exist that override the external css. You should check that your external CSS file is readable at all. You can do this by creating a new paragraph for example. Give it an id (id = "foo") and set that to your css

color: green;

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

0


a source


You may also consider using hex codes for colors instead of "red" and "green". I've seen some odd behaviors occur in some browsers (or are completely ignored).

0


a source 


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 previous values.

0


a source


Also, consider the order that you call external stylesheets, you can first specify your main css file and then a second stylesheet that also has styles set on your H1, this might override your first stylesheet - something in anyway watch.

0


a source


I'm sure you've confirmed that the external stylesheet is uploaded to your site and you are linking to it correctly.

0


a source






More articles:


All Articles