How to remove and override CSS attribute from parent class?

css, html, twitter-bootstrap

Solution

Don't use `!important` unless you really, really have to.

You can change the font size in this case by either adding the new css after the old like so:

.nav-tabs {
    border-bottom: 1px solid #ddd;
    font-size:14px; /*old*/
}
.nav-tabs {
    font-size:18px; /*new*/
}

Likewise using two style sheets the same will apply:

<link href="/bootstrap.css" rel="stylesheet"> //old
<link href="/Your_Custom_CSS.css" rel="stylesheet"> //new

or probably preferably by being a little more specific in the selector like so:

.nav-tabs { /*less specific*/
    border-bottom: 1px solid #ddd;
    font-size:14px; 
}
.nav-tabs li { /*more specific, li is just an example*/
    font-size:18px; 
}

Problem

I have a file bootstrap.min.css which has the following class ``` .nav-tabs { border-bottom: 1px solid #ddd; font-size:14px; } ``` I created a new css nav-tabs.css which has ``` .nav-tabs { font-size:18px!important; } ``` How do I remove the font-size from parent if the requirements change in the future?

Original source