freeCodeCamp/guide/english/certifications/front-end-libraries/sass/nest-css-with-sass/index.md

title

title
Nest CSS with Sass

Nest CSS with Sass

---

Problem Explanation

• In Sass, nesting CSS rules allows to define hierarchy selectors.
• You can organize your style sheets by nesting CSS rules.

Example:

.title{
  strong{}
  em{}
}

// This will be compiled into:

.title{}
.title strong{}
.title em{}

---

Hints

Hint 1

• You may want to change the position of "}" at line 4.

---

Solutions

Solution 1 (Click to Show/Hide)

<style type='text/sass'>
  .blog-post { 
    h1 {
     text-align: center;
     color: blue;
    }
    p {
        font-size: 20px;
    } 
  }  
</style>