Cascading

Lesson Thursday

Text
Cheat sheet

In this lesson, we'll dive a bit deeper into the cascading aspect of cascading style sheets (CSS). Cascading simply means that many rules can "cascade" down and apply to HTML elements. For instance, in past lessons, we defined a style for <ul>. This style was applied to the text that was inside of <li> tags. In other words, the style cascaded down from the parent element to the child element. This concept is also known as inheritance and it's a big part of computer programming. Since the <li> tags are nested within the <ul> tags, the <li> tags inherit the styles given to the <ul>s.

We can use inheritance to change the font for the entire web page like this:

body {
  font-family: sans-serif;
}

Since everything else in the web page is nested within the <body> tag, all of the text for the page will be Sans Serif now.

You can also directly specify how certain child elements are styled. For example, let's say you have this HTML:

digital-vs-analog.html

<!DOCTYPE html>
<html lang="en-US">
<head>
  <link href="css/styles.css" rel="stylesheet" type="text/css">
  <title>Digital vs Analog</title>
</head>
<body>
  <h1>Digital vs Analog: The Showdown</h1>

  <p>Welcome to the ultimate face-off between digital and analog. May the best one win!</p>

  <div class="digital">
    <p>Here's the good stuff about digital. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    <p>Find out more about digital <a href="http://www.example.com/digital.html">here</a>.</p>
  </div>

  <div class="analog">
    <p>Here's the good stuff about analog. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Find out more about analog <a href="http://www.example.com/analog.html">here</a>.</p>
  </div>

  <p>Now: YOU pick the winner!</p>
</body>
</html>

Here's how we can style the paragraphs for the digital and analog sections differently:

styles.css

.digital p {
  background-color: red;
}

.analog p {
  background-color: yellow;
}

This will give a red background to paragraphs that are nested within a tag that has the digital class, and a yellow background to paragraphs that are nested within a tag that has the analog class.

Here's an example of nesting even farther down:

styles.css

.digital p a {
  font-weight: bold;
}

.analog p a {
  font-style: italic;
}

You can nest as far down as you'd like.

Now, what if you have a couple rules like this:

styles.css

.digital p a {
  font-weight: bold;
}

a {
  font-weight: normal;
}

In this case, the most specific wins: in this case, a link in a paragraph in an element with the digital class will be bold, not normal, because the .digital p a selector is more specific than the a selector. This is called specificity, and it's both very powerful and, when things get complicated, a pain in the butt.

Here's one more example of specificity:

styles.css

h2 {
  font-size: 32px;
}

.countries h2 {
  font-style: italic;
}

Let's apply those rules to the following HTML:

greenland-iceland.html

<!DOCTYPE html>
<html lang="en-US">
<head>
  <link href="css/styles.css" rel="stylesheet" type="text/css">
  <title>How to tell apart Greenland and Iceland</title>
</head>
<body>
  <h1>How to tell apart Greenland and Iceland</h1>
  <h2>It's not easy, but I'll teach you how</h2>

  <p>If you're like me, you can never keep those two islands straight. But here's a foolproof trick so that you never embarrass yourself by mixing them up again.</p>

  <div class="countries">
    <h2>Greenland</h2>
    <p>Here's the thing about Greenland. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    <h2>Iceland</h2>
    <p>Here's the thing about Iceland. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  <p>You'll never be confused again!</p>
</body>
</html>

The <h2>s inside of the countries <div> will be italicized, but the <h2> outside will not.

There's one final, important principle to understanding cascading: if two rules have the same specificity, the last one wins — in other words, the one that's the farthest down in the CSS file takes precedence.

Occasionally, you'll run into HTML that looks like this:

inline-style.html

<img style="float: left" src="cute-kitten.jpg">

Here, the style is embedded in the HTML. This is called an inline style, and it is very, very bad! You lose all of the power of CSS when you do this, as you now can't re-use your styles and centralize them in one place. Fortunately, this is becoming rare, but you still may run into it every once in a while. You just need to know that, if you see an inline style, it takes precedence over what's defined in your CSS.

There are some additional rules about which style takes precedence in more complicated situations, but that's beyond the scope of what I'm teaching here.

Terminology

Inheritance: The process by which children elements share the properties of their parent elements. The cascading in cascading style sheets also refers to this phenomenon.
Specificity: In the instance that two styles conflict, the style that is applied will be the most specific of the two. For example, a style for a paragraph tag would not be applied if there was a style for a link within a paragraph. The link within the paragraph reference is more specific than paragraph.
Inline style: Style that is added directly into the HTML for an element. Inline styling takes precedence over styling in your CSS files. It is not considered good practice to style HTML this way.

Examples

Elements inherit styles from their parents. This rule gives every element on the page the San Serif font:

body {
  font-family: sans-serif;
}

You can nest selectors:

nesting-styles.css

.sidebar p img{
  display: block;
}

nesting.html

<div class="sidebar">
  <p>This image: <img src="whatever.jpg" alt="whatever"> will be on its own line.</p>
</div>

More specific rules take precedence over less specific rules:

specificity-styles.css

p {
  background-color: green;
}

p.slow {
  background-color: yellow;
}

p.slow .stop {
  background-color: red;
}

specificity.html

<p>This will have a green background.</p>
<p class="slow">This will have a yellow background. <span class="stop">And this a red background.</span></p>

Tips

In the case of conflicting rules, the last one wins. There are more complicated rules that we won't get into.

Lesson 50 of 61
Last updated May 22, 2023