How to chose which CSS rule to use from multiple style sheets - html

Question

I have bootstrap.css and login.css attached to index.php. Within index.php there are several form elements such as input type['text']. However, both attached CSS files target input type['text']. I have bootstrap.css linked above my other css file:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
How can I specify that I want input type['text'] to use the rules specified within login.css rather that using the rules from bootstrap.css? I generally require bootstrap.css more, but do with to now and then, implement my own rules which I cannot since the rules from bootstrap.css are rendered first since it is listed first.

Answer 1

The more specific you define your css, the more priority it gets in CSS.
You need to define your custom rules more relevant than the bootstrap ones.
Example:
p.test {
color: green;
}
.test {
color: blue;
}
<p class="test"> teststring </p>
You see that p.test is stronger than .test though .test comes after p.test.
hope that helped.
if your remove the p from p.div you will see the color gets blue, because the order is only relevant if both rules are equal in specificty.
.test {
color: green;
}
.test {
color: blue;
}
<p class="test"> teststring </p>

Answer 2

well, there is something like "CSS Rule Hirarchie" in you can use for your disired effekt. In short: The most "upper" CSS Rule wins the Game.
If you Develop with Chrome or FF you can Debug anything with the Developer Tools (i love the chrome one in this case) and look why it's getting overwritten by Bootstrap. Mostly it's a CSS Level Rule or somthing like this.
I would suggest you using your own Class on the Wrapper Element and override the styles as you wish. Give a look on my Example below to get an Idea how I mean it.
Sidenote: I think this Tutorial from CSS-Tricks describes well whats going on with the Rules of CSS and how the most specific rule comes in to the game.
/* Just a Basic Styling */
ul { list-style:none; }
a { text-decoration: none; font-family: Verdana; color:black; }
/* Lets make all list elements Blue. This should be familiar for you,
* this is the standard overwriting of css classes (is this called so?).
*/
.list li a { color: blue; }
/* Look at this Example now, we specify the 3rd list Element.
* As this rule is more specified as the rule from line 9,
* this rule takes effect on the 3rd line, the other ones will stay blue.
* +
* As a proof that you can't "override" this rule, I have put one
* line below to show you, that even another low lvl rule can't override it.
* Line 20 is still more specified then Line 21, even it is comes after it.
*/
.list li:nth-child(3) a { color:pink; }
.list li a { color:blue; }
/* Another Example of higher CSS Hirarchie would be this line.
* We go one DOM Element even higher, and guess what:
* If you comment out this line here, it will take effect.
*/
/* .wrapper li:nth-child(3) a { color:seagreen; } */
<div class='wrapper'>
<ul class='list'>
<li><a href='#'> Magic Link </a></li>
<li><a href='#'> Another Link </a></li>
<li><a href='#'> Rule over the wrapper Link </a></li>
</ul>
</div>