From the course: CSS for Developers

Unlock this course with a free trial

Join today to access over 24,800 courses taught by industry experts.

The cascade

The cascade - CSS Tutorial

From the course: CSS for Developers

Start my 1-month free trial Buy for my team

The cascade

“

- [Instructor] CSS stands for Cascading Style Sheets. Understanding how the cascade works will go a long way to helping you bend CSS to your will. Before I explain the cascade in detail and exactly how it works, let's start with a simple example. Now remember, the browser reads CSS from the top down. So if there are multiple rule sets targeting the same element, the last one in the style order wins. So in this preview here, we have this section which has a yellow background. Now if I go and look in the folder for this lesson in Codespaces, that's 01_05 and open up cascade.html, that's the file we were just looking at in the browser. And here we've got this div and it's got a class of full-width and a class of highlight. And highlight is the class that's bringing in that yellow background color. So where is that coming from? Well, if we open up our style sheet, scroll down until we see the highlight selector. And here, you can see that the background color is actually set to this…

Contents