Writing CSS can be tricky because some style rules take precedence over others. Learn about cascading, inheritance, and specificity in this video.
- [Instructor] In the last exercise, I put the general styles at the top of the CSS file. That's because CSS executes from top to bottom so the order of your declarations can affect how the browser reads it. If the selector is the same, the declaration that comes after overrides the one that comes before. You might by thinking, why would I use the same selector twice? This is actually quite a common error. As your CSS files get bigger and longer, you may forget that you've already declared the selector and add it again.
That's why organizing the CSS interrelated blocks, like in the previous exercise, can help reduce these types of errors. The Cascade Rule also applies to CSS declarations written within the same declaration block. One of the strengths of CSS is the styles can be inherited from the ancestor to descendant elements. This makes it easier to apply a style to several elements with one line of code, rather than defining the style for each element.
However, there are some properties that won't be inherited by all elements. Let's see this in action in another JSFiddle example. If I add the color property to the parent selector by uncommenting this line and running the code, this style will be inherited by the h1 and the paragraphs, but not the link. Let me change that to another color, just so that we could see it a little more clearly. Let's try blue. There we go.
We can see that link is a different color still. Links will not inherit this color because it already has a specific default style. So to change the color of the links, you'll have to select it directly to specifically change its default style by using A as its selector. Let's give that a try. A, open the curly braces, and we'll give it, let's do yellow. Now it's overriding the style because it's a more specific selector.
There are also some other CSS properties that are not inherited by any element. The W3C has a full table listing of which properties can and can't be inherited. There's a little note at the bottom that there has been some updates to the specifications, but if you click on the link, there isn't another table in the new specifications. So you can still refer to this one for a general idea. However, instead of trying to memorize this entire list of properties, you could also just test it out.
Try adding the style to an ancestor selector, and see if the descendant elements take on the style or not and that should give you your answer. Specificity determines which CSS rule is applied by the browsers. Every selector has a ranking in the specificity hierarchy. The selector with the higher specificity will be applied, regardless of the order of the CSS. The order only matters if the ranking of the selector is the same. This can get a little bit tricky.
The ranking is based on what type of selector you're using. Of the simple selectors we've discussed so far, Type selectors have the lowest specificity and IDs have the highest. Let's a take a look at another example in JSFiddle. Right now, the style is set by the Type selector. But if I add the Class selector style back in, it will override the Type selector. Classes have a higher ranking than Type selectors, but IDs have the highest ranking of the three.
So if I add this style back in, it will override both the Type and Class selectors. In addition to the type, there are other factors when calculating specificity, such as the number of selectors and the combination. You can find the full documentation on the w3.org site, but here are a couple other resources that provide some more entertaining visualizations. CSSSpecificity.com uses icons based on the movie The Shining.
It lists the rankings of each of selector, as well as rankings for the various combinations of selectors. Notice these numbers right here. This is how specificity rankings are calculated. Let's take a look at one more resource, a specificity calculator. You can put selectors into this tool to compare the rankings. Let's add a simple Type selector in this first block. Let's go with A. A has specificity calculation of just one.
If I was to add div space A, using a descendant selector, this specificity calculation has gone up to two. So using a descendant selector has a higher specificity rating than a single, simple selector. So any styles here in div A will override the styles using just A. And if I was to add another descendant, let's say I use div space P A, now this ranking is higher because it has three selectors.
But if I change this selector to a Class, lets go with example A, Classes have a higher ranking. So even though there are only two elements in this descendant element, this now has a higher ranking than div P A. A good rule to stick to when writing CSS is to start with general styles using Type selectors. Then make it more specific as needed using descendant selectors, or Classes and IDs, and follow the selector best practices.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property