Learning CSS in depth — The basics Part I

As many of you know I have some time working with HTML/CSS already. I have been doing stuff with it since 2006. But a lot of things have changed since then. I learned CSS like many of you did: by reading tuts, and just doing work. I never sat down to calmly understand the inner ropes of CSS, so, as you may expect I’ve been through the same thing you all have been: Most of the time you find out that your CSS is doing something you don’t understand. You then blame the browser or get pissed and desperate because you just don’t know what the heck is going on, what’s causing this “bug”. You then go to google or StackOverflow to find out.

Most of the time you find out that your CSS is doing something you don’t understand. You then blame the browser or get pissed and desperate because you just don’t know what the heck is going on.

These roadblocks are painful because they usually take a lot of precious time from your work and by the time you find a solution, you have tried so many things, that you no longer remember what was the solution, you just got rid of the “bug”.

So, that’s it, I’m done with this feeling of not really mastering CSS, not knowing what is causing my “bugs”. I decided to have complete control over how my styles work. And to get that new superpower I bought this book https://www.manning.com/books/css-in-depth I’m reading day and night.

Here I will be sharing my CSS adventures with you.

Oh Let’s go back to the start…

The Cascade

You may already know this guy, you learned that this is the “C” in the CSS, but what does that really mean? What is really the Cascade?

CSS is fundamentally about declaring rules: under various conditions, we want certain things to happen.

The browser follows a set of rules that we define, so the result is predictable. A key part of CSS dev comes down to writing our code in a way that is predictable. So, the Cascade is the name for this set of rules. It basically determines how the conflicts are resolved. In other words, the Cascade is the mechanism the browser uses to resolve the conflicts on our declarations.

Let’s break this down to its basic components:

The Cascade (AKA set of rules) considers four things to resolve conflicts:

  1. Stylesheet Origin
  2. Scope
  3. Selector Specificity
  4. Source Order
  • Stylesheet Origin refers to where the styles come from. Are the styles applying from the user agent styles (AKA the styles that the browser loads by default) or are they applying from the autor styles (AKA the styles that you write to override the defaults).
  • Scope sorts inline styles out from those applied with a selector.
  • Specificity determines which selectors take precedence over which.
  • Source Order refers to the order styles are declared in the stylesheet.

Here is a simple flow chart to illustrate how these rules are applied at a high level:

How the cascade works.

That’s it for Part I. Follow me to stay tuned. I’ll be releasing Part II tomorrow. I’ll be covering in detail how the four different components of the cascade works. Thank you for reading this!

If you liked this, click the 💚 below so other people will see this here on Medium.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.