Applying A Stylesheet Within One Div Only

I have a site I am adding some functionality to. The site is a bit outdated but I am not being paid to overhaul the entire site, just a few pages. Because of this I am using more m

Solution 1:

Sure, in most modern browsers. Put a scoped stylesheet WITHIN the div.

<divclass="style-sheet-modern"><stylescoped>
    .conflicting-class { ... }
    </style></div>

You can use @import to use external styles. Note, for browsers that don't support it, it will apply the style to the entire page. So you probably just want to add an id to the div you want and style with that, for compatibility.

Solution 2:

Why not give the <div> an ID?

Then you could use specificity to override just the classes/ids that are in that div?

IE:

<divid="style-sheet-modern"><divclass="my-class"></div><divclass="etc"></div></div>

You could then target all styles inside the "modern" div like this:

#style-sheet-modern.my-class{
    color:black;
} 
#style-sheet-modern.etc {}

There would be no browser support issues.

If you're using something like less or sass – you could even have it in a separate file named "style-sheet-modern.less" or whatever you want it named and @import it at the bottom of your main styles file. This include would need to come last in the file so that it will override the other styles that could be applied to those same styles.

You could use a wildcard to reset all the styles inside the #style-sheet-modern as well if necessary like this:

#style-sheet-modern * {
    reset: stuff; //obviously not the actual css
}

That reset for those styles would be the first thing in your 'style-sheet-modern.*ss' file.

And as I mentioned before, no browser support issues.