Apply different css style file on different section tags on single page

Question

I have 4 sections in a webpage and I want every section to use different stylesheet. I have 4 different stylesheets, but they have the same ids and classes, but with different values. I need this for a demo page where I can show the different styles of the same thing in one page.

Answer 1

CSS applies to the entire document, so your options are:

• Use separate documents
• Rewrite the CSS to prepend section#your-section (followed by a descendant combinator) to each selector.

(You could also hope and wait for scoped CSS to be well supported).