Question

I need a way to load multiple style sheets with the same rule names, and then apply them to different elements on a page. Is this possible?

Here’s an example of something I’d like to do. Take the two style sheets below:

style1.css:

.size{
    color: #FF6600;
    font-size: 18px;
}

style2.css:

.size{
    color: #FF0000;
    font-size: 14px;
}

I would like to be able to import both of them into a page (perhaps with an id of some sort), and then set the text inside one particular div to use the rules from style1.css and another div should use the rules from style2.css.

I need to do things this way because it will allow users of my application to upload custom style sheets for different widgets on a page. This scheme should work, provided that the sheets use the same rule naming scheme.

Answer 1

The answer is no you can’t do it this way. The rule loaded last will take precedence.

You should differentiate the different widgets with different classes or IDs, and then you won’t have the same rules.

#widgetB .size{
        color: #FF0000;
        font-size: 14px;
}

#widgetA .size{
        color: purple;
        font-size: 10px;
}