css properties do not bootstrap effect

Asked

Viewed 599 times

1

I’m trying to do a simple thing in css that is change the font color of my link and colors are being nullified by some motiv that I don’t know which is

 .navbar-inverse .navbar-nav>li>a {
    color: #9d9d9d;
}

galera consegi solve the problem, the error was pq loaded the bootstrap first than my stylesheet

html5 css3 bootstrap

  • Could also put the snippet in HTML?

  • Make sure your css are imported into html after bootstrap

5 answers

6

As mentioned by @Joãoluiz, avoid using !important, Because in the future you may want to overwrite your own styles, and in addition, developers who have legacy your code will have difficulty changing it. According to Stephanie Sullivan [Rewis], designer, This is a very selfish act.

Each selector in CSS has one score, score or weight. The more specific the selector, highest will be your priority, as your score will be higher.

The !important is only recommended when some class must be hard code, practically immutable, only loses to the declarations inline.

This way, the best way to override the CSS of Twitter Boostrap is declaring their own classes and putting them after the inclusion of the framework in question.

To best way to do this is as follows:

Include your styles

<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/seu_css.css">
</head>

Use the same names as the Twitter Bootstrap classes

.container{
    max-width: 50%;  
}
  • 1

    +1 (if interested, I left a reference here on the website of how to calculate selector priorities http://answall.com/a/143893/70 - has the explanation of how it works, and link to a calculation tool)

  • 1

    thanks for responding I think the problem caused was I loaded the bootstrap first than my css style sheet

  • @Fernandoalcantara Ms is exactly what you have to do. First Bootstrap and then your custom styles.

5

Check whether in the <head>your CSS was inserted after the bootstrap. The rules are executed sequentially.

4

Maybe the way you put it <link href="css/bootstrap.css" rel="stylesheet">

or you can change it directly from the bootstrap library but the way Guilherme Alvez mentioned putting the !important

4

Your CSS must be declared after bootstrap.

Try to avoid ! importants.

2

Try:

.navbar-inverse .navbar-nav>li>a {
    color: #9d9d9d !important;
}

Try to add !important on the property CSS to force the CSS to use the property described on that line.

Browser other questions tagged html5 css3 bootstrap

You are not signed in. Login or sign up in order to post.