Understanding the Cascade: Part 1 What Affects the Cascade and Types of Stylesheets
There are people who work in CSS all day, some amateur and some professional, who may not be entirely familiar with exactly how the cascade in CSS works. Here’s a short overview.
This 3 part series delves into the cascading part of cascading style sheets and how browsers decide which style declarations to render.
Browsers work by allowing values to be set for elements and then re-set over and over again; how the browser renders the element in the end depends on the cascade.
What affects the cascade?
- Type of style sheet
I'll go through each one and explain how each impacts the cascade.
Type of style sheet
Lowest Priority: Browser style sheets
This is what the browser sets by default so elements like paragraphs and headings have different font sizes and lists are indented. Go to View->Page Style->No Style in Firefox, and that’s the browser style sheet at work.
Medium Priority: User style sheets
It’s your browser, and if you want all red text all the time, you can make it happen with a user style sheet. Most modern browsers have the option to apply a user style sheet.
Highest Priority: Author style sheets
These are the one’s you’re familiar with, styles that are applied to the page by the developer/author of the page. These can be inline styles set on the HTML element or header styles set using a <style> element, <link> element or @import.
Highest Priority: Inline styles
This involves setting the style attribute directly on to the HTML element.
Equal-lowest Priority: Header Styles
These are styles placed within <style> blocks in the header of the page (still bad practice but better than inline styles)
Equal-lowest Priority: External Style sheets
Finally, the standard way of including css on a website, using an external style sheet via <link> or @import.
In part two, we'll be looking at how specificity and order affect the cascade. This is by far the most compicated, so stay tuned :)