Overriding CSS- Overriding all other styles

Overriding CSS- Overriding all other styles


What exactly is the point of overriding in CSS? Why not just delete prior styles, for example, like changing color for an h1 element?


I think if you were making a webpage manually (writing it out), then there is no point to it and you should not use it.
But if you are using a programming language to make the page, this feature probably comes in handy.


Overriding CSS is common and often useful. For example, I might have a website where my <h2> header tag has a CSS file defining it with a color of green and the default font-size of 24px, and that works for most of my layout. But let’s say there was a section where I needed a green background. My <h2> would be invisible! So, I might do something like <h2 style="color: white">Now you can see me</h2> which would override just the color:green in my CSS file and just for this particular line.

You can also override in the CSS file. So, for the same situation and result, I could use the HTML <h2 class="white-text">Now you can see me</h2> and then in the CSS file define the class .white-text { color: white }.


thank you! this was very helpful.