CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
psychicmachinist
psychicmachinist

Reputation: 188

Why is CSS not styling this Bootstrap webpage?

I'm trying to change the color of the link with the class "navbar-brand" in my Bootstrap website. No matter how I structure my css selector I can't seem to change the text color. However, I know the css is being loaded because I'm able to change the background color of the navbar. Here is the shortened code:

My index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Foobar Brand</a>
        </div>
      </div>
    </div>
  </body>
</html>

My main.css:

    // change the color of the navbar to a dark blue
    .navbar {
        background-color: #3c4c66;
    }

    // some of the selectors I've tried to get the text to be white.
    // why are they not working?
    .navbar-brand {
        color: white;
    }

    .navbar-header a {
        color: white;
    }

    a {
        color: white;
    }

End result: a dark blue bar with the gray text that came with the default navbar. Thanks for your help.

Edit: the similar question here didn't help me. I was able to change the elements of the navbar-nav, but not the navbar-brand.

Edit 2: In response to Abhinav Guaniyal's comment, I inspected the element in Firefox. Indeed, somehow the .navbar-brand rule in Bootstrap is overriding (sorry if that is the wrong term) the .navbar-brand in my css file. Why is this? Shouldn't my css file override Bootstrap's since I linked main.css after Bootstrap?

Upvotes: 1

Views: 277

Answers (2)

TheIronCheek
TheIronCheek

Reputation: 1139

Try something like this:

.navbar .container .navbar-header a.navbar-brand {
    color: white;
}

Think of it this way. Imagine you have 10 different places in your code where you use <a class="navbar-brand">link</a>. Using .navbar-brand{ color:white } in your CSS will work on all 10 of those a tags. If you decide that you want to apply a different style in 1 of those 10 places without affecting the other 9, rather than having to delete the CSS rule entirely or add an extra id/class, you can override just the one you want by being more specific. The browser recognizes that you were more specific and assumes you want the more specific style to override the generic style.

Upvotes: 1

MMM
MMM

Reputation: 7310

Bootstrap's

.navbar-default .navbar-brand {

is more specific than your

.navbar-brand {

and

.navbar-header a {

You want to keep your code more specific.

Upvotes: 2

Related Questions