Chapter 6: The Cascade

At long last, we return to the cascade, which is actually where the process starts. For a given element on the web page, what CSS styles are relevant? What are their origins and importance? What is their specificity? And what is their order of appearance?

Introduction to the Cascade

We'll be looking at slides 69-75.

Part 1: Cascade demo with VS Code - external, embedded, inline, !important

We switch to VS Code (or other editor of your choice) to work on styles with different origins. Be sure to download the starting and ending files from GitHub as these will be used throughout Chapter 6.

Part 2: Cascade visualized in devtools

The cascade is spelled out beautifully in developer tools for any browser. Let's look at how the cascade rules are reflected in devtools.

Part 3: @layer and the cascade

The @layer spec is brand new and has many people excited about the possibilities for its use. Will it make CSS easier or even more complicated? Let's explore @layer through a possible use case.