CSS Inheritance: Overriding parent CSS with a container?

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...

I do indeed, but as it is an extremely old codebase I'm working with that is fairly big I'm trying to keep all of this new system in its own code. — Seer, Sep 13 '12 at 12:51

score 3 · Accepted Answer · answered Sep 13 '12 at 12:00

3

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

answered Sep 13 '12 at 12:00

gingerbreadboy

7,386
5
36
62

This has done the trick without the `.bootstrap-container *,` identifier. It was the CSS in the `.bootstrap-container *` shown in the question that I wanted in there. Works a treat though, thanks! – Seer Sep 13 '12 at 12:53

bmicallef · Answer 2 · 2012-11-30T06:43:20.650

3

I was trying to limit the over ride to just the form element, but had to modify the answer to achieve it.

/*
Bootstrap over rides
*/
.container form, 
.container input, 
.container button,
.container select, 
.container textarea {
    font-size: 12px;
    padding: 1px 2px 1px 2px;
}


.container select {
    height: 24px;
}

edited Nov 30 '12 at 06:43

answered Nov 30 '12 at 02:18

bmicallef

31
2

score 2 · Answer 3 · answered Sep 13 '12 at 12:17

2

If you're able to modify the original CSS, you should be able to make these changes without destroying the original layout but allowing them to coexist with your new styles:

body {
    color: #333;
    font: 10px verdana, helvetica, sans-serif;
}

td, tr, div, p, form, input, select, textarea, font {
    color: inherit;
    font: inherit;
}

Setting styles on table/form elements is a throwback from the Netscape 4.x days where they didn't inherit styles properly. You can probably even discard them if you want.

answered Sep 13 '12 at 12:17

cimmanon

67,211
17
165
171

Never thought about this method, +1. In this case though I need to make sure I'm not altering any of the codebase outside of new files I'm making. – Seer Sep 13 '12 at 12:54
1

You should still be able to use the 2nd set of selectors anyway as part of your new style sheets. – cimmanon Sep 13 '12 at 13:38

score 0 · Answer 4 · edited May 23 '17 at 11:59

0

Compile the whole bootstrap code to make it work only inside a certain element https://stackoverflow.com/a/16495195/356375

edited May 23 '17 at 11:59

Community

1
1

answered May 11 '13 at 08:24

Laoneo

1,546
1
18
25

score -1 · Answer 5 · answered Sep 15 '16 at 12:54

-1

I usually put an id of #override on my body tag.

I can then do something like

#override .bootstrap-container *{

}

answered Sep 15 '16 at 12:54

James Hatton

676
2
9
28

CSS Inheritance: Overriding parent CSS with a container?

5 Answers5