Is there any kind of HTML or CSS that ensures HTML within a DIV doesn't inherit any styling?

Question

I am currently restyling a website, but part of the site takes a string from the CMS and puts it into a description area. The description often has its on HTML, such as bullet points.

The problem is the designs we received also use bullet points to style certain aspects, which make everything within this description area styled entirely incorrectly (tiny width for ULs, background applied to H2, etc).

Is there any kind of tag that will reset the styling of everything within it?

Thanks in advance.

Edit: I've gone for this solution, which works when I apply the class 'CMSReset'. It resets the main offenders, thanks for the help:

div.CMSReset, div.CMSReset *
{
    margin:0pt !important;
    padding:0pt !important;
    vertical-align:baseline !important;
    width:auto !important;
    background:none;
    color:inherit;
}

I'm afraid the 'Cascading' nature of CSS means that you would need to override all the styles on your child element one way or another — isNaN1247, Dec 02 '11 at 11:51

score 4 · Accepted Answer · edited May 23 '17 at 11:51

4

short and simple: no, you'll have to reset the stylings taht need to be reseted on your own.

a workaround would be to use an iframe wich would prevent the inner content against inherited styles, but that solution is even worse in my opinion.

this other topics might also be interesting for you:

edited May 23 '17 at 11:51

Community

1
1

answered Dec 02 '11 at 11:52

oezi

51,017
10
98
115

I was worried that that might be the case. Thanks a lot for confirming though. I will check out the links you provided. – Andy Jones Dec 02 '11 at 12:03

score 1 · Answer 2 · answered Dec 02 '11 at 11:55

Generally, people override CSS Styles in 2 ways:

1) They define an inline style on the attribute itself so:

<div style="background-color:#FFFFFF"></div>

Would override any other style.

You can also apply a style via an id (#IdName) which will have precedence

2) They redefine the style at that level of the document. You can use the !important css modifier (but this isn't universally supported).

If you've blanket applied styles, like div or body > div then these can be difficult to override and often require restructuring, or rethinking, your styles and classes.

Is there any kind of HTML or CSS that ensures HTML within a DIV doesn't inherit any styling?

2 Answers2