CSS

Ł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
PRO
Ethan Lowry
Pro 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

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.

 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

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

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

Arthur The Dog
Arthur The Dog
15,318 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.