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)