internal .css code scope

[David Mutansan]

In my html file, I first import some external css file ("file1.css"). Suppose the external css has a defined section called ".div_part1, .div_part2, .div_part3 { color: black; ....}" Then in this html, I define an internal section <style> ...  </style> after the external import  and within this <style> sector I override ".div_part1, .div_part2, .div_part3 {color: red; ....}"

Based on basic css rule, on this html the "color" part for " .div_part1, .div_part2, .div_part3" will take "red" since it is overriden.  Now, the question is ---

If I have 2nd html file, it also imports the same "file1.css".  In this html, it does not define anything to override the ".div_part1, .div_part2, .div_part3" stuff.   Then can I be confident whatever defined in the <style> section in the first html is only scoped to the first html file itself, it will never to accessible from the 2nd html file ?  in other words, in the 2nd html, when it needs ".div_part1, .div_part2, .div_part3 " color, it will still be black, right ?

[Munnou Rao]

Yes, you can be confident that the styling in the <style> section of the first HTML file will not affect the second HTML file.

Here’s why:

CSS rules defined in a <style> section inside an HTML file are only scoped to that specific HTML document. They apply to the elements of that page alone and won’t have any impact on other pages unless those pages import the same styles. So in your case, since the second HTML file doesn’t have any overriding internal CSS for .div_part1, .div_part2, .div_part3, it will continue to use the styles from the external CSS (file1.css), meaning the color for those classes will be black, as defined in the external file.