Stopping CSS inheritance

I am constructing a website utilizing the Joomla CMS which has CSS which blankets the site. I would like to limit its power over my 3rd party javascripts such as the calender from electricprism.com. This is how I found you. I would like to stop Joomla from ruining a perfectly good script.

Hi James, and thanks for the feedback. As, I hope, you can imagine, diagnosing the specifics of your problem without a physical example is tricky. I’ve had a quick look at the calendar you referred to (quite difficult to find on that site!) and it appears to do ‘the right thing’ in defining its own ‘calendar’ class, to which specific CSS rules can be (and are) applied.

I’m guessing that, due to some highly-specific rules in Joomla’s stylesheet, the calendar styles are being ‘overridden’; to fix that, you’d probably need to modify those styles.

Since CSS doesn’t have any kind of namespace convention (although something similar can be achieved with careful use of ID selectors), mixing styles from different sources is not always as easy as you’d like. If you need more in-depth analysis of your problem, I suggest you either contact me directly, or post your question to a good CSS mailing list where it can be discussed further.

Hi,

Nice site… I like the typography. Looks like Textpattern-powered maybe?

Anyway, I was also googling for those keywords, and found your site.

Me personally, I just designing a stylesheet that overrides my main styles if the body tag has an id applied to it… Long story short, I was hoping CSS had the ability to say something like:

inherit: none;

Instead of me having to override each style declaration.

For example:

#style1 {

font-size: 1000%;

font-weight: bold;

border: 5px solid red;

float: left;

padding: 100px 0 50px;

margin: 0;

}

body#different #style1 {

font-size: 200%;

font-weight: normal;

border: 0 none;

float: none;

padding: 0;

margin: 0;

}

Instead, it would be nice to do something like this:

body#different #style1 {

inherit: none;

}

Where, #style1 would ignore any cascading styles set earlier in the cascade… Essentially reverting it back to the default "div" style browser setting.

Anyway, that is why I searched for those keywords via google. :)

Cheers

Hi Bubs,

First, your initial comment can only be answered fully in a longer format, which I may well get around to. In short: no, it’s not Textpattern, it’s an incredibly lo-fi, home-scripted 'platform'.

On to the main point. Thanks very much for taking the time out to provide an example: it clarifies a lot, certainly in at least this case. It’s possibly a shame, but CSS doesn’t offer such an ability of which I’m aware. One possible solution is to restructure your CSS. For example, can you apply the fist set of declarations just to all pages except for the '#different' one (e.g. give them a body#normal or similar)? Or can your HTML be restructured; e.g. can you exclude the '#different' element from the appropriate pages? Obviously, I’d need a lot more detail to make any judgements, but these might be avenues worth exploring.

CSS reset tools, such as Eric Meyer’s excellent reset stylesheet, could be used to achieve some of what you desire, although they may be taking things a bit 'too far' in your case, leading to a bit more work.

You might be able to use a browser’s default stylesheet — or a combination of several — as an alternative 'reset'. Firefox’s is called html.css (a search in your installation directory should find it) but I’m not sure about the others. Ultimately, though, I fear you’re looking for a solution to a problem that might diminish with some structural reworking.

Hi!

Thanks for the informative reply. :)

Nice work on the site! Simple yet very nice to navigate and visually pleasing.

Also, thanks for the details on the CSS thoughts/suggestions.

I definitely agree with you on the restructuring… Always learning! :)

Anyway, great reply! I appreciate the tips and help!

Have a great day!

Cheers

B

I’m looking to ignore several style sheets that the horrible content management system we use at work automatically loads.

Our IT people won’t change or unload their CSS for the backend UI and it completely tears up the frontend of the site itself. Re-writing classes and IDs to counteract everything the 5 other CSS files are doing is just a pain.

I stumbled here looking for a fix that will ignore or unload all that junk. =P

@PBnJ: This is an interesting case and, I think, could be the cause of a lot of these searches. With that in mind, it’s probably worth a proper write-up, but with your specific issue at hand, let’s see what quick options you might have available to you.

If you’re just talking about viewing content, of course, you can use various features of your browser to disable a specific stylesheet. I guess, though, that you’re a web designer/developer wishing to modify content that, for some reason, is forced to use a specific stylesheet. I wonder quite why that change cannot be made (somehow!) but I'll give you the benefit — this is pretty similar to problems caused by 3rd-party applications, after all.

The only real 'fix' for this problem, that I can currently think of, would involve writing more specific styles targeting an id'd body element and its descendants. This depends on you having access to the page-level markup, of course. Or, possibly, there’s a javascript solution — maybe modifying the document.stylesheets object or calling /stylesheet.deleteRule (a lot of times!)

Because the current website has a style sheet that is so poorly written and the new elements I am putting on the top navigation are being affected. I want a div where I can do something like <div style="inheritance: none;">. This way I don’t have to redo my entire website.

I am building (have built and now trying to integrate) a small user control(.NET) for the Website of a non-profit organization. I am donating my time as a freelancer, but the company also has a team of developers and designers working for them full time.

Their designers have heavily modified the CSS for the rest of the site to look exactly as they want it. This should not effect my work, as I am simply making a small control with basic styles that will fit into thier design as it is.

However, as you can imagine, many of the styles defined in the pages on which my control will reside are cascading into my control and seriously messing up its layout; to the point of its being unusable.

I want a way to temporarily stop the parent styles from affecting my elements. I do not want to reset the styles to the 'defaults', as that will mess up the parent page. I simply want to stop inheriting for a short space of the page, then continue on with the styles as they were intended for the rest of the page.

I realize this is not possible with CSS. I just wished it were, and was hoping for a quick and easy answer. Since I am donating my time, I have very little of it to fool with specifically overriding each offending style for my elements. So, this is why I searched for what I did.

Hi Danny,

What you describe here does appear to be the most common use-case, and you description is useful in understanding the problem. However, without very specific details, I’m still unsure of the best way to handle this.

As I've tried to demonstrate above, most of the CSS properties that inherit are less 'harmful' than those that do not, so whilst your user control may inherit font weight, size, etc. it should not have its layout radically altered. Can you explain how this is happening?

Whilst a reset for the whole page isn’t what you want, a reset targeted to your specific element (e.g. zeroing margins, setting font weight to normal, etc.) should go a long way to fixing this. You can then use this generically across pages — e.g. with a "reset" class.

Does any of that help, or can you provide further details that might help me to understand the nature of the problem better?

I found this site though using those keywords as well, and the only thing that I have to say about it is that it’s all about choice. CSS should at least give you the option to do it if you want to, and now squawk that "BUT ITS SUCH A NICE FEATURE!!!" I really don’t care that it’s a nice feature and has good uses, I want to turn it off so that I can stop wrestling with a design I am trying to achieve.

I am trying to design a site that has a nice linux penguin translucent background aligned to the right to fill up white space on wide screens, but only in a main content div that will move underneath some other div boxes as (if) the window is resized (or someone has an old school resolution). Unfortunately, the only way to accomplish this is to use a translucent image which doesn’t give quite the same effect as the CSS property does. I want the entire background of teh containing div to fade away, so that the content is more prominent.

The top divs inherit the translucency of the background div and that’s not the effect I want to achieve. I have found that in a lot of ways, CSS makes what should be simple tasks infinitely harder (Re: Tables for a nice "banner, left nav, right main content, footer" layout that CSS cannot seem to achieve easily).

I like CSS for some things, such as creating classes for something that you intend to reuse several times throughout the site, but for the stuff that really should be a no-brainer… Well I spend more hours researching how to hack it than I do designing my site.

I also found this site with a google search for css stop inherit

I was trying to turn off inheritance because

Although I have explicitly set text-decoration to none in the in my APA style paragraph it refuses to turn it off unless I also turn it off for all links which I do not want to do. I have the same issue with trying to turn off the font-weight: bold for the APA links

a {

font-weight: bold;

}

p.apa {

/* Used for APA style*/

margin-left: 2.5em;

text-indent: -2.5em;

text-decoration: none;

padding-bottom: 1em;

line-height: 2em;

font-weight: normal;

}

Rupert, that’s a good example, both because of the description and included CSS, but — more importantly — because it’s an example of something that can be solved — finally! I think.

In both cases, styles on the 'a' elements are overriding those you've explicitly set, but for different reasons. The 'font-weight' is the simpler to explain: since you’re explicitly setting font-weight to bold for all links, the value on parent elements, such as the 'apa' paragraphs, is being overridden. Try targeting the specific link elements whose font weight you *want* to be normal, e.g. "p.apa a { font-weight: normal; }".

The text-decoration is behaving in a similar way, but because your browser’s stylesheet automatically sets 'text-decoration' for all link elements. Again, tackling the specific elements — in this case, "p.apa a { text-decoration: none; }" — will resolve this.

Please let me know how you get on.

Hi there!

The answer is simple: in a project, usually there is a person responsible for the graphical design/css and the developers. The css person most of time is dumb enough and just do the job the easiest way — and this mean he/she doesn’t check the selectors that are being generated by the tool he/she uses. As the project evolves, it becomes impossible — or too risky — to refactor the css and at the same time the developers need to stop the inheritance for, for example, if part of the content from the page is dynamic and we don’t want to inherit the global styles.

God bless the good css guys!

Tedy

Hi there, found the site via search to block inheritance… I am designing widgets to be used on other people’s websites. I've set my css to be VERY specific (div#MyWidget div.topbar h3.title {do this}), however if the host website has general styles (h3 {border-bottom: 3px double #545454;}) those general styles get applied, and look bad or worse break the widget. The widgets are being installed on host websites via javascript, with a link to our css hosted on our site.

I've littered my css with !importants etc but I see no way of foreseeing all possible overrides.

Is there a css solution I’m overlooking? Inline styles? Or is the problem that inserting html via javascript is a bad idea?

It’s things like this that make the old skool font-tag people smug!

Hi "a*p". It sounds to me as if you’re doing everything right, assuming "do this" is sensible, of course! So long as your widget’s styles have more specific selectors than those in the page, they should 'win' and apply as required. If that’s NOT happening, I can only think the selectors aren’t matching, or some other styles are taking effect.

If you can send me a copy of the widget code and an offending page, I’d be happy to take a look in detail.

As you suggest, inline styles might well help to avoid the task of declaring everything with great specificity; as I've said elsewhere on this site, I’d recommend against "!important" unless you’re doing it VERY carefully.

I have actually come across similar problems with some CSS myself recently (specifically, when using the jQuery UI themes), so I’m looking into this problem in more depth and will probably produce a write-up soon. However bad it might seem, though, the font-tag people still have nothing to be smug about! ;-)

I too have the same widget problem — The question is — how do I define ALL possible styles?

I cannot foresee what each website will have so I have to keep on adding more and more styles, in order for my widget not to inherit the parent styles.

Is there no way to avoid ALL inheritance? should I just create a style sheet with all possible inheritable styles and point all my widget elements to that style sheet?

Is there an available list of all inheritable styles?

Hi Dan,

As mentioned in the article, your best bet for informaiton on which properties inherit is the property index of the spec:

http://www.w3.org/TR/CSS21/propidx.html

Just look at the 'inherited' column. As to your general problem, this is coming up time and time again, seemingly with greater frequency. It seems that, as sharing of content via 'widgets' continues to gather pace, the problems surrounding the combining of CSS from multiple sources are becoming more of an issue.

I think the best general advice for widget styling is: be as specific as you need to. Fisrt, use inline styles to ensure they won’t be overridden. Second, only specify those styles that you actually care about. For example, do you really need to provide a font choice, bearing in mind your users will be embedding the widget on a site in which they've probably already made such choices, for a good reason. Same goes for font-size, colour, line-height, and many of the inherited properties, to varying extents. If your widget is flexible, it probably doesn’t need an awful lot of styling to adapt to anyone else’s style, and I think that’s probably how it should be.

Thanks — I'll definitely take those points into consideration. I know this may be off topic — but you seem to know what you’re talking about when it comes to JavaScript, so I have to bring up this issue which may also be a good topic for debate: I need my JavaScript widget to send a short description to the server in order to see if the web page has changed since the last time it was accessed. I tried counting the characters of the body.innerHTML but found different results between browsers. I tried to count the number of text nodes — still discrepancies between browsers. I also tried to remove all on alphanumeric characters and a bunch of other tricks, but I am coming to the conclusion that there is no definitive and unique descriptor which defines a web page’s content using JavaScript which will yield the same result using different browsers. Is this the case or am I missing something?

Dan,

Although I have no direct experience of the exact thing you’re trying to do, here are a few initial comments:

a) Can you achieve this using standard HTTP mechanisms such as the Last-Modified header? This will probably be most reliable, and should be achievable using javascript from within your widget.

b) Does the script actually need to work cross-browser? Just checking, because I’m not sure I’m entirely certain of what it is you’re doing, but I guess this depends on whether the server is making comparisons between many different client requests, which it does appear to need to do.

c) The most obvious differences between, say, the IE and firefox implementations of innerHTML are whitespace and case. I’d recommend you remove all leading/trailing whitespace and toLowerCase() the strings before making any comparison.

If you want to discuss this any further, please feel free to email me — the address is available via the contact link at the bottom of this page.

Cheers.

I have an external windows component which lets users post messages on a web site. The component renders messages as HTML text with inline styles which format font size, family, weight etc. These style obviously get overriden by main styles on a web sites. Users do not have the ability to upload CSS classes on their own.

The only place I can fiddle is a div tag where HTML text goes. My div tag uses Notification css class. I tried clearing font styles but it does not help because if I set font-size like so

.Notification span, div, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd,

fieldset, form, label, legend

{

font-size: 100%; /* or medium or none */

}

all the HTML text will have one font size, no matter what users specify in the windows component.

If I could stop inheritance then inline style would get properly applied.

I think there is enough use cases for CSS to have a feature like "inheritance:none;" to start from a clean page so to speak.

I have an external windows component which lets users post messages on a web site. The component renders messages as HTML text with inline styles which format font size, family, weight etc. These style obviously get overriden by main styles on a web sites. Users do not have the ability to upload CSS classes on their own.

The only place I can fiddle is a div tag where HTML text goes. My div tag uses Notification css class. I tried clearing font styles but it does not help because if I set font-size like so

.Notification span, div, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd,

fieldset, form, label, legend

{

font-size: 100%; /* or medium or none */

}

all the HTML text will have one font size, no matter what users specify in the windows component.

If I could stop inheritance then inline style would get properly applied.

I think there is enough use cases for CSS to have a feature like \"inheritance:none;\" to start from a clean page so to speak.

I have a few rows that are DIVs with DIVs inside them. The parent DIV has a hover style that changes the background color to red and the text to white. But the DIV DIV A color remains unchanged and is also red (so it disappears). The A color is defined by a stylesheet in the template that I cannot change.

A simple but very elegant answer to my question which has been questioned.

Internet Explorer 8!

If you came this far, you'd already know why. A solution would be firefox but my client’s client will not bother especially when all their office equipment is a grant from the bill and melinda gates foundation. The blame’s all on the developer. Version after version, microsoft never ceases to find a way out of the way of standardization. At this point, ALL HACKS ARE PERTINENT because of internet explorer and the gates foundation. May i ask you now after reading all your rants — How can you give me back my 15 minutes of reading into void?

So is there a way to cut off inheritance. I have a snippet of html that displays

fine by itself but when plugged into the page it displays some fonts that are at 12pt bigger and others at 12pt are smaller. both IE and Firefox have the same bug or something so

I wanted to do something like inheritFromParent=no just as a quick fix. Instead,

this issue will probably waste a few hours and I need to get this release out…..shoot.

I wish I could cut the inheritance off though with my luck, the browsers would have bugs

there anyways and I would be working on a new issue…it would have been nice though.

i wanted to stop inheritance while using the opacity css3 value on a div, which was causing the child elements to also be transparent.

Hi Jeff,

Your request may be easier than others — have you experimented with RGBA colour, at all? It will allow you, in effect, to set opacity on a background-color, without affecting the foreground content. Or vice versa. Much nicer than opacity.

Although it’s no consolation, you’re not actually seeing inheritance when it comes to opacity, at least, not in the CSS sense of inheritance. You can verify that by setting opacity on a parent element, overriding it on a child, and noting that the effect is 'cumulative', as opposed to a true 'override' taking place.

Thanks for the informative site. To answer your question as to "why do so many people want to stop CSS inheritance?" …In my case, I teach online classes using a CMS that was poorly engineered when it was developed in the mid-90's, but we have not been able to migrate to anything better due to internal politics.

The antiquated code base has grown, but I suspect not maintained, and has a CSS style sheet that has grown to over 2,200 lines long. It is completely intelligible (to me at least), uses the word "important " 216 times, and never displays any formatted content in the way one would expect. It also prevents the user from controlling appearance of their content except through the use of inline styles.

So it would be great to be able to selectively stop CSS inheritance, to be able to use my own styles for the content I publish, to make longer blocks of content more readable for my students. I just don’t think it can be done given the limitations imposed on users by this wretched CMS.

However, I agree with you that one shouldn’t have to resort to this type of kludge, if style sheets are properly implemented.

Thanks for listening!

My issue is similar to Jeff’s above. I am formatting div boxes, and I want images contained inside my translucent div to be opaque. I wanted to use a translucent background image in order to avoid the whole problem, but my software is being finicky and I cannot save any translucent images for some reason, so I used opacity as a quick fix, which of course raised more problems.

If you look at my site now you won’t see what I am working on, because right now it just points to a tumblr with a default theme. Not publishing until I am finished ;D

I am adding extra functionality to ckeditor. I am trying to make it easy for someone to use an image from their filesystem instead of having to have a url to link the image.

I am adding in a button to submit your upload which will use php/ajax to upload it and spit back the url into the input box for image url.

The problem is my button has no styling on it because somewhere in the magic that is ckeditor it gets rid of all styles on inputs/buttons.

I just want the default styling but can’t figure out a way to do it

I’m facing this problem right now. Is there some sort of work around?

I am just struggling with the same problem with JQTOUCH.

During development I love to have a

<div class="debug_dump">

for showing some debug information.

</div>

But I CAN'T SEE it, because elsewhere in jqtouch.css there are some definitions as:

* { … }

body { … }

body > * { display:none; …. }

So you are suggesting that is use the following declaration :

<div style=" display: inline; margin: 0px; font-family: Helvetica; font-size:medium; font-style: nomal; font-weight: normal; font-color:black; background-color:transparent; background-image:none; height: auto; width: auto; margin{0,0,0,0}; ">

WHOW, what a monster !! And I am not quiet sure if I have included every property which might have been set by jqtouch.css

How easy would it be, if we can use:

<div style="inherit:none">

Just my 2cents

Klaus

@KDiddy: First off, please accept my apologies for the comment formatting weirdness! I’m not entirely sure what happened there, but I'll have a look into it — should be clean up now.

As to your point, it’s useful to have yet another high-profile use case to work with: jqtouch. Do you have some example code you can point to?

In this specific case, I certainly wouldn’t recommend putting the 'reset' code inline. Rather, you could create a specific class for that, and either use very specific selectors (to cancel out the jqtouch ones) or the dreaded "!important". Admittedly, neither is ideal, but the route cause of this problem could well be considered to be jqtouch.

What with the increasing reliance on a whole host of third-party scripts, 'widgets', etc. it seems as if CSS inheritance really does cause problems. CSS is just not designed to robustly handle combinations of stylesheets from several sources — in all cases.

@KDiddy: BTW, at least one solution is to edit the jQtouch code like so. Still not ideal, but it might help in your case.

I want to block CSS inheritance because I’m generating a simple HTML newsletter that I want to be able to preview for the user without opening it in a new window (this site is using ASP.NET MVC; the master page loads the CSS files). Not using the master page means that the preview would not be part of the same look & feel as the rest of the site.

Gmail and Outlook have poor CSS support for HTML email (http://www.email-standards.org ) and Gmail will only recognize inline CSS (not even embedded in the header). Hotmail doesn’t support a number of CSS properties either, but better than those two.

Gmail doesn’t support the background-color, color, float, and a host of other CSS properties, so if I want to support it (which the client wants me to), then I have to resort to using HTML bgcolor attributes, table layouts with transparent spacer GIFs, and all of that other crap that we were supposed to be able to stop doing years ago.

So that’s why I want to block CSS inheritance; the generated newsletter HTML does not reference any external CSS, but the page in which I host the preview does, so it totally screws the layout of the newsletter.

I just thought of something though… this is part of the site admin tools anyway, so perhaps I can use a little Flash or Silverlight plugin to display the HTML without it being affected by the master page’s CSS. Hmmm….

Hiya Bobby!

The reason I’d like to remove inheritance is that I have a list within a div within a list which is within another div, and I don’t want the outer DIV to give its list styles to the inner list.

The inner list is inside a DIV and I would like the style from that DIV to be what controls the list, rather than the outer one.

In a different context, I might use a class, but I’m applying this styling to pre-existing HTML so would prefer not to have to add arbitrary classes wherever this requirement is required.