Get an overview of how the inheritance and specificity rules define which CSS declarations take precedence.
- One of the strengths of CSS is styles can be inherited from the ancestor to descendant elements. This makes it easier to apply a style to several elements with one liner codes, rather than defining the style for each element. For example, all page content is contained within the <body> tag. So defining some broad styles for your page, such as the base font color can be added using the body selector. All of the descendant elements nested within the <body> tag will inherit this style. This is much more efficient than directly applying the style to each element. There are some properties that are not inheritable. The W3C has a list of which properties can and can't be inherited. But instead of trying to memorize this list, you can either just look up the specific property you're trying to use, or just test it out. Try adding a style to an element and see if the descendant elements inherit the style or not. And that should usually give you your answer. In earlier lessons, I've mentioned using more specific selectors. This refers to the concept of specificity, which determines how browsers decide which CSS rule takes precedent when there are conflicting declarations. The hierarchy is based on the selector type. Of the selectors we've discussed so far, here's how they rank from lowest to highest. Universal, type, class then IDs. Lets look at a codepen example to see how specificity affects these selectors. The universal selector has the lowest specificity value, meaning that all other types of selectors will override it. The only declarations the universal selector can override is inherited styles. In this example, the color declared by the universal selector overrides the color inherited from the section selector. A type selector, will override the universal selector. And the class selector will override both the universal and the type selector. And last but not least, the ID selector overrides them all. In addition to these rankings, specificity also counts how many of these types of selectors are used in one declaration. So for example, section P is not going to override the class and ID selectors. But it will override the type selector. That's because section P contains two type selectors. Here's how the calculation works. The count is broken down into three buckets, A, count the number of ID selectors. B, count the number of class, attribute and pseudo-class selectors. And C, count the number of type and pseudo-element selectors. The universal selector has a value of zero and does not affect this calculation. The numbers in the final count for each bucket are then concatenated or joined together which results in a final specificity value. The higher the value, the higher the specificity. Let's take a look at an online calculation tool at https://specificity.keegan.st Let's delete this first value and just add the universal selector. It has no bearing on the specificity value since it just equals zero. If I change it to P, I get a value of one because now there is one type selector. This calculator refers to it as an element selector. Now if I change it to PA, which represents a link inside a paragraph, the count jumps up to two because now I have two type selectors. Let's go to the second block and add a class for comparison. Classes are ranked higher. It has a value of 10. There is one class plus zero elements. Those two numbers concatenate together to equal 10. And so, even though PA represents two selectors, it's only two type selectors. So 10 is still higher than two. If these calculations feel a little overwhelming, it's okay, you don't have to know the exact specificity value of every selector to write CSS effectively. But it's good to have some background on the topic. Just remember, less is more. Start with shorter, more general rules and then build up as required. In addition to specificity, the order and importance of your CSS declarations are also factored into selector precedence, which we'll discuss in the next lesson.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts