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

Łukasz Czuliński
Łukasz Czuliński
8,646 Points
Posted by Łukasz Czuliński
Łukasz Czuliński
8,646 Points

Bootstrap: over-riding it with your own CSS.

I've just started playing around with Bootstrap, but I'm getting a little frustrated as I'm unsure of why my own CSS code isn't applying.

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">

That's my stylesheet order in the markup. However, when I try to change the navbar color in main.css, nothing happens. The same thing has happened in a few other instances as well.

For example:

  nav li{
  font-family:"Oswald";
  font-size:1.1em;
  text-transform:uppercase;
  letter-spacing:1px;
  color: black;
 }

Everything in the above CSS code applies except for color. It stays the same default grey no matter what I do. I also cannot change the background color of the nav either.

Any ideas? I'm assuming that I'm missing something really simple here.

4 Answers

Ethan Lowry
PLUS
Ethan Lowry
Courses Plus Student 7,323 Points
Ethan Lowry
Ethan Lowry
Courses Plus Student 7,323 Points

It's possible that the selector which sets the navbar color in the default bootstrap CSS has higher priority then the selector you are using. In other words it might be something like "#somediv nav li", which has more priority "points" than your selector.

As for why your styles other than color are being applied, this might be because the default CSS does not apply those styles at all within the navbar, so priority is not a concern.

This is just a hunch as I don't have the bootstrap CSS in front of me though. You may want to use the Chrome browser dev tools to check out the exact style rules being applied to the navbar and compare your selector to the default one.

Łukasz Czuliński
Łukasz Czuliński
8,646 Points
Łukasz Czuliński
Łukasz Czuliński
8,646 Points

Thanks. Unfortunately I've only tinkered around marginally in DevTools so far. I do believe you're right as to why the other styles are working.

As for the ones that aren't working, I've even created an id for the list which still doesn't work.

banned banned
PLUS
banned banned
Courses Plus Student 11,243 Points
banned banned
banned banned
Courses Plus Student 11,243 Points 
 nav li{
  font-family:"Oswald" !important;
  font-size:1.1em !important;
  text-transform:uppercase !important;
  letter-spacing:1px !important;
  color: black !important;
 }
Łukasz Czuliński
Łukasz Czuliński
8,646 Points
Łukasz Czuliński
Łukasz Czuliński
8,646 Points

I really want to avoid using !important, but strangely enough it still doesn't work on the color.

banned banned
PLUS
banned banned
Courses Plus Student 11,243 Points
banned banned
banned banned
Courses Plus Student 11,243 Points

Only thing to do is to dig into the css of bootstrap.

Arthur The Dog
Arthur The Dog
16,070 Points
Arthur The Dog
Arthur The Dog
16,070 Points

I'm successfully able to override Bootstrap with my custom CSS, but I use @import to load CSS. I don't copy the Bootstrap files over.