Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Shashi Kumar
Shashi Kumar
977 Points

bootstrap and external stylesheet

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>LearnNLearn</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="styleSheet" href="StyleSheet.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

Here I am using my custom stylesheet Stylesheet.css after bootstrap CSS effects. so by cascading rule styles of Stylesheet.css Should override styling effect of Bootstrap on my webpage. But it is not happening. Styles of Bootstrap CSS is not getting overridden why?????

1 Answer

andren
andren
28,558 Points

Do your rule have the same Specificity as the bootstrap rule?

Rule precedent in CSS is not determined entirely by where a rule is defined, the location of the rule only matters if the two rules have the exact same specificity. If they don't then the rule with the higher specificity will win out regardless of whether the second rule was defined after it.

The specificity of a rule is primarily determined by how specific the selector is. Element selectors have a low specificity, class selectors have a higher specificity, and id selectors have the highest specificity. Combining selector using something like a descendant selector will also increase the specificity of a rule.

That means that if say bootstrap has a rule with the selector .class1 .class2 and you have a rule with the selector .class2, then the bootsrap rule will win out since it contains more class selectors.

I'd recommend playing around with the website Specificity Calculator, it does a good job of visualizing what specificity score various selector will have.