Waterfalls cascading (it's not a perfect metaphor...)

Understanding the Cascade: Part 1 What Affects the Cascade and Types of Stylesheets

5 Jul'13

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?

  1. Type of style sheet
  2. Specificity
  3. Order
  4. !important

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.

Next Up: Part Two

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 :)


Thanks for stopping by.

Twitter
@tweetbollig
Subscribe via RSS
subscribe
Email
Skype call or chat
chat
Go to top