I found a css file online that I'm using for a website I'm building, but I am only incorporating certain components from it. The issue is that the global styles in this css file are overriding all the global styles on my website. My solution was to wrap these global styles and make them descendants of a class, which I then set as the parent class of my component. Here's an example:
h1 {
color: red;
}
.text {
color: blue;
}
However, all h1 tags on my page turned red. So, I wrapped the global styles and modified the new css like this:
.parent-class h1 {
color: red;
}
.text {
color: blue;
}
And adjusted my html accordingly:
<h1>This should not be affected by any css</h1>
<div class="parent-class">
<h1 class="text">Hello</h1>
<h1>How's it going</h1>
</div>
The initial change worked fine with the top h1 unaffected by the global css. Yet, now the problem arises where the text class doesn't override the global h1 style, resulting in "Hello" also being red.
I thought about the order of appearance in the css file and the usage of classes over IDs, but couldn't find the root cause. If the issue lies in having multiple rules under .parent-class h1, is there a way to resolve it?
One option might involve individually wrapping all occurrences of child elements within the parent, like .parent-class .text. However, this would be incredibly time-consuming given the extensive length of the css file. Is there another solution to tackle this challenge?
If not, is there a method to group multiple blocks of code under a parent rule, perhaps utilizing a format like this:
.parent-class {
.text {
color: blue;
};
h1 {
color: red;
};
}
Is such a structure feasible or does it require a different approach?