DEV Community

Cover image for The CSS Podcast: Episode Four - The Cascade
Brittney Postma
Brittney Postma

Posted on • Originally published at console-logs.netlify.app

2 1

The CSS Podcast: Episode Four - The Cascade

Hi, I'm Brittney and I'm an instructor over at ZTM Academy and the owner, designer, and developer at bDesigned. You can find more dev notes by me at Console Logs.

MDN on Cascade and Inheritance
CSS Cascade Interactive Article

The "C" in CSS stands for cascade. Basically, this means that location and order matter when you are writing CSS rules. If rules have the same specificity, the one that is used last in the stylesheet will be used. The cascade is made up of 4 phases:

  • 1. Position - The position of a rule with the same specificity in a stylesheet or where it is linked in the html matters. The one that appears last with the most specificity wins. An embedded style tag in the html and inline style are more specific than the stylesheets. You can think about their proximity to the code they are affecting; inline is the closest, then style tag, then linked styles, then browser.
  • 2. Origin - Where the rules are coming from, 1st link tags, 3rd party link tags, embedded styles, inline-styles, browser (user-agent styles), client set styles
  • 3. Specificity - user agent, client styles, your styles, your !important, client !important, user-agent !important
  • 4. Importance - Depends on the type of rule and is in order from least to most specific; normal, animation, !important, transitions.

CSS: Cascade Origin user agent, client styles, your styles, your !important, client !important, user-agent !important

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more