How do I restrict style to affect content only in modal?

Tags: html,css

Problem :

Goal: With minimal changes (preferably none) to an existing style sheet, how can I contain it's effect to a modal so that it doesn't change the underlying page. For example

    <link rel="stylesheet" href="/css/theme1.css"/>
    <div class="bodycontent>
      Some stuff
    <div class="modal">
      <link rel="stylesheet" href="/css/theme2.css"/>
      Modal Content

Obviously, this will not work but hopefully it shows what I'm trying to achieve. In practice, this applys theme2.css to the whole page as opposed to just the modal. Is there a way for me to apply style to only the modal without having to go into theme2.css and put .modal before every rule?

Edit for clarity I'm essentially building a theme switcher with the preview in a modal and I don't like my base page getting affected. Also, suppose the themes I'm using are very long and I'm trying to avoid two large css files, one for the preview in the modal and one for when the theme is actually used on a page.

Solution :

No, you have to write your CSS in such a way that .modal only inherits appropriate styles from more general CSS selectors that apply to it (e.g. the body CSS properties).

Any selector that needs to apply specifically to the modal and to the modal alone should be prefixed with .modal and any styles it inherits that you do not want need to be overwritten in this manner (it may help to give the modal an ID which has higher specificity and will make it easier to overwrite said properties).

I understand you may find that inconvenient, but you should have designed your CSS this way in the first place. There is no way to 'cancel' CSS inheritance for a specific DOM node that I am aware of.

EDIT: If you populate the modal content with an iframe (which is supported by most decent modal window scripts) you can in fact do it the way you are asking - styles from the page will not interfere with styles inside of an iframe, and that way you can include the modal styles directly in the iframe (in the iframe head or as an external link) like you want.

    CSS Howto..

    How can I mark it up? [closed]

    How to disable and re-enable tabindex of hidden/visible elements?

    CSS Help - How can a DIV ignore css previously set on the page?

    How to prevent Twitter Bootstrap changing margins as width of page is extended

    How can I create a CSS “well” effect similar to bootstap but deeper?

    How to center a paragraph of text on a particular word in HTML, CSS, or JavaScript?

    (CSS-Javascript-Jquery) How to make thumbnails slider for a carousel? [closed]

    How to create styled boxes on a webpage in where I can add graphs,gaugs,numbers?

    How to use inline css styling (style=“vertical-alignment:middle;”) in html5 or