<link href="bootstrap.min.css" rel="stylesheet">
/* Example selector defined in Bootstrap */
.jumbotron h1 {
<link href="custom.css" rel="stylesheet">
100 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements
<body id="bootstrap-overrides">
.jumbotron h1 {
/* 10+1=11 priority scores */
line-height: 1;
line-height: 1;
color: inherit;
}
/* Your initial take at styling */
h1 {
/* 1 priority score, not enough to override Bootstrap jumbotron definition */
/* 1 priority score, not enough to override Bootstrap jumbotron definition */
line-height: 1;
color: inherit;
}
/* New way of prioritization */
#bootstrap-overrides h1 {
/* 100+1=101 priority score, yay! */
line-height: 1;
color: inherit;
}
