Colours wont change in CSS!

Hello every1

im tyring to add colour to my background on any h1, h2, h3 heading and change the font but it wont do it on css using notepad on windows 7. im learning from the book How to build a website the right way using html and css 2nd edition. im on page 102 trying to make the website Bubble Under.

If i want to change the font to italics and or bold and size it will jus not wit colour. I have read to make sure wat i have done is correct and checked over and cant see any mistake there so please help!!!

Thankyou very much

Something like this will work:

h1, h2, h3 {
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    background-color: navy;
    color: white;
    [COLOR="Red"]font-style: italic;[/COLOR]
}
<h1>This is a header</h1>

Is that what you are trying?

Show us the code you are suing so we can check it.

thnakyou for your help GHOwner

To answer your questions yes the css page is styling the website and is linked to my html page. Everything on the css is styling the page correctly apart from the last code of h1, h2, h3 being all styled and the <p> jus before the emphasis code near the end of the page wont make the font navy in colour for that paragraph. So thats why im puzzled cos the background is correct, the sizing, the font everythging apart from these little things.

Try removing (temporarily):

h1, h2, h3 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
background-color: navy;
color: white;
}

And you should see different styling on h1 and h2 tags similar to what you wanted, yes?

Basically, check your order in your CSS selectors.

The last defined rule that’s already defined before it, will overwrite it.


h1 {
color: white;
}

h1 { 
color:black;
}

Basically, the h1 tag will style black, cause it’s the last definition given, even if it was already specified before.

Anyways, if the CSS styling the page at all? Have you saved the filed? Do you want all the headers to be white colored?

If not, the issue is the:


h1, h2, h3 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
background-color: navy;
color: white;
}

To fix this, if you want the h1 and h2 to have different colors, move the h1 and h2 CSS selectors AFTER the above code.

That is, move


h1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: x-large;
}

h2 {
color: #6600ff;
font-size: medium;
font-weight: normal;
}

To be after:


h1, h2, h3 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
background-color: navy;
color: white;
}

The reason is because the code above is overwriting h1, h2, and h3 tags. Since that section of CSS code is after the individual h1 and h2 selectors before it, it will overwrite them (for any properties that you do so, in this case it’ll keep overwriting with white text/etc). So, put those h1 and h2 selectors after that to overwrite it.

Just remember, the last rule (reading top to bottom) will be the winner, sorta. (unless you use !important, but that’s another topic for later)

This is the code i have in css

/*
CSS for Bubble Under site
*/

body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 15px
}

#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;

h1 {
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size: x-large;
}

li {
font-size: small;
}

h2 {
color: #6600ff;
font-size: medium;
font-weight: normal;
}

p {
font-size: small;
color: navy;
}

em {
text-transform: uppercase;
}

h1, h2, h3 {
font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif;
background-color: navy;
color: white;
}

I have linked the CSS page to my html page to make use of the easiness to change the style of the website. I got it from the book im using and its the same code in the same place and the colour wont change but the styling does.

i have jus tried to change the style of the css code with italics and boldness and it didnt change at all. As ive looked my h1, h2, h3 headings in css already have seperate styles individually, so is this affecting the process of changing them in whole under one piece of code if you see what i mean.

the code is being used in css using notepad and its the same in book and looks like

h1, h2, h3 {
font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif;
background-color: navy;
color: white;
}