Do you know that:
There are 3 different layers in CSS that govern how all styles work?
- Browser (also known as user agent) styles
- User styles
- Author styles
Browser styles are the default styles applied to your browser. This is why buttons in Chrome and Safari look different. The styles found in the browser layer are different between browsers and give each browser a unique look.
The next layer is user styles which is not really something that you have to worry about. These are generally custom styles that users can write and inject into their browser, but that is not really supported anymore by browsers. There may be some browser settings that users can change which will add styles to this layer, but for the most part this layer can be completely ignored.
Finally, we come to the author layer. This is the layer you are most familiar with since every piece of CSS code you write falls within this layer.
The reason these layers are separate is because it makes overwriting the code defined in browser styles and user styles very easy since layers define their own hierarchy that completely ignores specificity.
Read more here: 👇
Originally posted: https://blog.webdevsimplified.com/2022-04/css-cascade-layers/
Paul Ishaili C.
Traditional Creative Director, Software Engineer, and Tech Writer.
Top comments (0)