Override CSS with fewer declarations - css

Question

I'm trying to override the css from bootstrap.
I going to design the navbar without color.
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
background-color: #fafafa;
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
background-repeat: repeat-x;
border: 1px solid #d4d4d4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
*zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
with
.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
}
I delete background color replacing it in the bootstrap .css.
Is it possible to just override it with another value?

Answer 1

Short Answer: YES
Long Answer Follows
The way CSS works is called specificity. There's is an order in which styles are applied to an element. Think of it as 4 separate numbers with the default value of each being 0. So 0,0,0,0 is the default
The first number represents inline styles
e.g., <span style="color: red">I'm Red</span>
The second number represents IDs
e.g., #IdSelector
The third number represents classes
e.g., .ClassSelector
The fourth number represents element and pseudo selectors
e.g., div and :first-child
These rules are applied in the order of internal style sheet first, external stylesheet second. If there's a rule defined ANYWHERE that applies to your element and you don't override it with a selector that has a higher specificity, then it will stay the same.
The following will override
.navbar-inner {
background-image: none;
}
Going back to specificity.
If your element is <div id="mainNav" class="navbar-inner"></div>
#mainNav {
background-image: none;
}
.navbar-inner {
background-image: url(img.png);
}
Then the image will be set to none. The ID selector has a specificity of 0,1,0,0 and the class sector has a specificity of 0,0,1,0.
Even if you added 11 classes the ID would still win, the specificity in that case would be 0,0,11,0
There is one last number, a hidden number. so 0,0,0,0,0 The one in front represents !important, which can be added after any style declaration to make it apply no matter what. If you have two conflicting declarations which have !important listed, it falls back to the order of inline vs. embedded vs. external. Generally you should avoid !important at most costs, except where it absolutely makes sense.
!important example that makes sense.
.hide {
display: none !important;
}