I'm trying to do something simple in css and change the font color of my link and the colors are being overridden by some motiv that I do not know which
.navbar-inverse .navbar-nav>li>a {
color: #9d9d9d;
}
I have a problem with the problem, the error was because I loaded the bootstrap first as my stylesheet
As mentioned by @JoanLuiz, avoid using !important , because in the future you may want to override your own styles, and in addition, developers who have inherited your code will find it difficult to change it. According to Stephanie Sullivan [Rewis] , designer , this is a very selfish act.
Each selector in CSS has a score , punctuation, or weight. The more specific the selector, the greater your priority , the higher your score will be.
!important is only recommended when some class should be hard-code , practically immutable, only misses for inline statements.
That way, the best way to override the Twitter Boostrap CSS is to declare your own classes and place them after the inclusion of the styles framework in question.
The 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 of Twitter Bootstrap classes
.container{
max-width: 50%;
}
Verify that <head> its CSS was inserted after bootstrap . Rules are executed sequentially.
Your CSS should be declared post bootstrap.
Try to avoid! importants.
Maybe the way you put <link href="css/bootstrap.css" rel="stylesheet">
Or you can change directly from the bootstrap library but the way that Guillermo Alvez mentioned putting !important
Try:
.navbar-inverse .navbar-nav>li>a {
color: #9d9d9d !important;
}
Try to add !important to the CSS property to force CSS to use the property described in this line.