Understand how browsers read CSS selectors in order to efficiently target HTML elements. Learn the concepts of inheritance and specificity.
- [Instructor] When a browser displays a document, it first displays the actual content and then brings in style information in succession. If you're on a high-speed internet connection, you'll probably never notice a delay, but if you're loading up, say on a slow mobile connection, you've probably seen times where the text of a web page rendered before all the styles or images did. All the same, browsers do handle documents in a streaming fashion. As you're learning CSS, it's important to understand how browsers render styles and apply them to documents First, I wanna take a look at how browsers read CSS selectors.
As a native English speaker, I probably read this from left to right so I'd be looking for an ID of main content, a p element and then a span element. CSS actually reads this from right to left, however. This tells the browser to find any text within a span tag, which is also inside of a paragraph tag which is also found with an element with an ID of main content. Next, I wanna talk more about the concept of the cascade. Cascading style sheets get their name from the cascading order of styles as they're applied within the browser.
And this usually means that external style sheets are applied first, followed by embedded styles, and finally followed by inline styles. Now, if these rules conflict with each other, the most recent set of styles will overwrite the earlier styles, really the cascade can be summed up in one sentence. The last rule applied wins. Styles are applied in the order that they're found. And recent styles always overwrite earlier styles in the event of a conflict. Take this example: Since the external style sheet link appears after the embedded styles, the external styles would actually overwrite any of the conflicting embedded styles.
This method even applies to style sheets themselves. Take a look at this style sheet. Notice that we've got two paragraph selectors and they've got conflicting styles. One has a margin bottom of 14 and one that has a margin bottom of 18 pixels. So of these two, the last selector, the one with the margin bottom of 18 pixels, would be the style that's applied. Just remember that no matter where the styles are found, the last rule applied wins. Next, I wanna talk about inheritance. Inheritance basically says that child elements will inherit the properties applied to a parent.
Take this very common rule, for example. Here, we've got a body selector that has a font color, a font family, and a font size. You can overwrite this, however. Let's say that I wanted all my main headings to be purple. Well, I could simply write a rule for that h1 tag and set the color to purple. Child rules will always override their parent rules when there's a conflict. Now, understanding inheritance makes it much easier to write efficient styles.
Imagine writing separate rules for every single element on the page to define a font and the font color. Since these are all the same, we could simply assign that color to the body selector and let all the other elements inherit it. That's a lot more efficient. The last concept I wanna talk about is specificity. If you have two or more conflicting CSS rules that point to the same element, there's some basic rules that a browser follows to determine which one is the most specific and therefore wins.
Basically, if the cascade or inheritance can't resolve a conflict, then we look to specificity to make a decision. Each CSS rule actually has a weight score based on the elements that make up the selector. So, for example, if we have an ID, that's worth 100. If we've got a class, that's worth 10. And a regular html element is worth one. Let's take a look at some example selectors. So, here, I've got an ID worth 100, an element worth one, and a class worth 10, for a total of 111.
Here, I've got an ID plus a class for a total of 110. Just a class by itself is 10. And then we have an element plus a class for a total of 11. So, which one of these wins? Well, it's gonna be with the highest score here. As you can see, it's the most specific of the bunch. Practically speaking, I rarely find myself doing this math. But I did wanna show you these calculations to show you that there actually is a method to the madness that is CSS specificity. There's one final point that I wanna make about how browsers render styles.
Styles are cumulative. Take these styles, for example. Here we have a body selector and an external style sheet that applies the font size and color. Later on, in the same style sheet, there's a paragraph rule that sets the line height to two. And finally, the color would be overwritten by this embedded style because inheritance resolves a conflict between this embedded paragraph style and the external body color set in the style sheet. So, what I've just covered in this video are some of the hardest parts of CSS concepts to grasp, in my opinion.
If you're not feeling clear about this, that's totally okay, just replay the video until it starts to sink in. And once you get these basic rules of CSS down, I promise the rest will feel easy.
- What is CSS?
- Understanding how CSS works with HTML
- Applying fonts
- Understanding the classic box model
- Setting margins and padding
- Positioning elements
- Basic CSS layout concepts
- Media types and media queries
- Working with CSS frameworks and CSS grids
- Creating responsive layouts
- Tools that help you write and maintain CSS