Most people new to CSS think it’s great for changing font sizes and colours. It is. But as you start to learn more about CSS you eventually realize that it’s a lot more powerful than it seems. The two key features of CSS that make it so powerful are The Cascade and Specificity. Here’s everything you need to know about the Cascade.
The C in CSS stands for Cascading. Cascading means the CSS is read from top to bottom and whatever property value is called last is the property value that will be used. Here’s an easy example:
p {
font-size: 12px;
}
p {
font-size: 14px;
}
The second font size will overwrite the first one and the text will be 14px.
The cascade works within a style sheet as well as outside of style sheets, within a document. If you call two style sheets in the head of your HTML, the cascade works from the top to the bottom and from the first style sheet to the second. If you have p {font-size: 12px;} in your first style sheet and p {font-size: 14px;} in your second style sheet, the font size of your <p> tags will be 14px.
The cascade also applies within the three different places you can declare styles, a style sheet called in the head of your HTML, styles declared directly in the head and inline styles. The cascade works in the order I just listed. Inline styles will overwrite styles declared in the head which will overwrite styles within style sheets.
The Cascade itself may not seem all that useful when you first look at it but when it’s used in combination with Specificity the true power of CSS is unleashed (haha). Next time, Specificity.