Learn

Congrats, you’ve written your first nested selectors!

In SCSS, nesting is not limited only to selectors. You can also nest common CSS properties if you append a : colon suffix after the name of the property.

For example, the following SCSS code:

.parent {
  font : {
    family: Roboto, sans-serif;
    size: 12px;
    decoration: none;
  }
}

will compile to the following CSS:

.parent {
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-decoration: none;
}

Instructions

In main.scss, nest the following properties inside of .banner:

border : {
    top: 4px solid black;
    bottom: 4px solid black;
}

Click “Run” to see your changes in the browser and view the output in main.css.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?