Question

I’m having an issue with style inheritance on a project I’m working on at the moment.

The project I’m working on involves me using HTML5, CSS3 other newer standards and features on a codebase that’s 12 years old that hasn’t been maintained all that well. (For example before I’d even gotten to this issue no HTML5 elements or CSS3 styles could be applied in IE because there wasn’t a DOCTYPE)

Anyway, onto the problem at hand! The font styles from the main CSS file for the system I’m working in is overriding the styles of the content I’m working with. It’s worth noting I’m using a custom compiled version of Twitter Bootstrap and using that for a lot of the new styles, it’s been compiled so that all of the elements in the CSS have .bootstrap-container added as a prefix, then the new content I’m adding is then of course wrapped in a div like so: <div class="bootstrap-container"> ... </div>.

This works for the most part, but the font sizes still mess up on certain elements. Things that are explicitly defined in Bootstrap work fine, like the headers, but say I put a span inside of a header for whatever reason it will use font-size from the main CSS file.

The offending main CSS is:

body, td, tr, div, p, form, input, select, textarea, font {
    color: #333;
    font: 10px verdana, helvetica, sans-serif;
}

The bootstrap CSS that works currently to override it is:

.bootstrap-container * {
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 13px;
}

However this of course poses another problem in that I then have to specify even more override rules to fix other things.

So my question to all of you is how can I override the styles in a better way so that I can pretty much just use Bootstrap as it’s meant to be used? If there is a way at all…

Answer 1

Something like this might do the trick…

.bootstrap-container *,    
.bootstrap-container body, 
.bootstrap-container td, 
.bootstrap-container tr, 
.bootstrap-container div, 
.bootstrap-container p, 
.bootstrap-container form, 
.bootstrap-container input, 
.bootstrap-container select, 
.bootstrap-container textarea, 
.bootstrap-container font {
    color: #333;
    font: 10px verdana, helvetica, sans-serif;
}