Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

jason limmm
jason limmm
7,791 Points

problems with background color

i think i put the correct code in but my website wouldn't turn it's background color orange

i put normalize css and bootstrap into this project if that happens to have something conflicting

body{
    background-color:#ffc067;
}

1 Answer

Rohald van Merode
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff

Hi jason limmm 👋

It's hard to tell what is causing this to happen without seeing your code in it's entirety. I'd recommend to check the dev tools and inspect the element to see what styles are being applied to it. Most likely you have some conflicting styles elsewhere with a higher specificity causing it to overwrite this specific rule you're adding.

Hope this helps! 🙂

jason limmm
jason limmm
7,791 Points

ok, i checked the devtools and it says that the background color was overridden by something else but i don't quite know what is it being over ridden by. how can i check the thing that is over riding my background

Rohald van Merode
seal-mask
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff

In the Styles tab when inspecting the element. The selectors are ordered by specificity level, so if it's being overwritten there must be a rule above the body selector that is also setting background value.

jason limmm
jason limmm
7,791 Points

oh ok i see, it's another background-color property, but it's in a file called _reboot.css so i don't know how to change it.

Rohald van Merode
seal-mask
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff

That is a file that is being added by Bootstrap. You'll want to ensure that your custom stylesheet is linked after the Bootstrap stylesheet in your HTML file. This allows your styles to override the Bootstrap styles due to the CSS cascade

If that doesn't work try to use more specific selectors to increase the specificity of your styles to override the Bootstrap styles. For example, instead of targeting body, use body#body

Hope this helps!