CODEWITHSUNDEEP
css
Aarsh Thakur
Aarsh Thakur

Reputation: 607

heading problem H1 in CSS

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;
}

Upvotes: 1

Views: 14232

Answers (9)

zar
zar

Reputation: 12227

One way you will get this problem is if your css files is in subfolder say styles or styles\pages and you are not providing the full relative path.

say if the site.css file is in styles folder.

This will not load the style (because the path is provided and file is not in root)

<link rel="stylesheet" type="text/css" href="site.css" media="screen" />

This will load it correctly.

<link rel="stylesheet" type="text/css" href="styles/site.css" media="screen" />

Upvotes: 0

Traingamer
Traingamer

Reputation: 1423

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

Upvotes: 0

Schoffelman
Schoffelman

Reputation: 1826

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.

Upvotes: 0

Nick Presta
Nick Presta

Reputation: 28675

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).

Upvotes: 0

Lee
Lee

Reputation: 20934

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

Upvotes: 3

brettkelly
brettkelly

Reputation: 28205

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).

Upvotes: 0

Wolfr
Wolfr

Reputation: 5164

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/

Upvotes: 4

Justin Niessner
Justin Niessner

Reputation: 245429

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.

Upvotes: 3

Erik
Erik

Reputation: 714

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.

Upvotes: 0

Related Questions