How to remove and override CSS attribute from parent class?


Tags: html,css,twitter-bootstrap

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?



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; 
}

    CSS Howto..

    CSS - How to center nested divs?

    How to create a scrolling background image with css/jquery/html

    How can I center the nav menu items using bootstrap 3?

    How to increase the height of footerrow in jqgrid

    Drag and drop in AngularJS: make a directive that is a drop zone, showing an overlay when dragging

    How can I list available Css Classes from my App_Themes folder?

    How to solve CSS -webkit-appearance issue

    How to remove top border for one element in a list

    how to set menu to activate always hover effect on [closed]

    How to change the attribute value of an element with by another element Selector in HTML + CSS?

    How to make a div 100% width minus a certain amount?

    How to check a website in BlackBerry Simulator

    How to style the arrow that opens submenus in jQuery mmenu?

    How to HTML/CSS Limit / Clip / Mask an object?

    How to implement this to my index.html?

    How to add external CSS to HTML 'style'

    Push vertically resizable Div to bottom of wrapper. How?

    HTML5 (php) with CSS Tooltip shows up far away from hyperlink

    How to zoom content to screen width

    How to display Highcharts in rows (5)

    How to make a vertical CSS menu with arrows on the right of each entry?

    CSS: How to set hover effect on menu-item when submenu-item is displayed

    How can I slow down my CSS Animated Text transitions?

    How to center a span element in CSS? [closed]

    How do I link an external css to overwrite bootstrap css for centering elements?

    How to calculate the length in pixels of a string with php - from another page on my website

    How do I get this text using Jsoup?

    How to set min-height using css [closed]

    Primefaces: how to change the default icon on the button of the calendar field?

    How to slide a div from bottom using pure css or pure javascript