diff --git a/lessons/module-2/advanced-css.md b/lessons/module-2/advanced-css.md index c5fcfab8..6c36bd0f 100644 --- a/lessons/module-2/advanced-css.md +++ b/lessons/module-2/advanced-css.md @@ -111,6 +111,30 @@ Nesting allows you to define styles for nested elements in a more intuitive and In this example, we define styles for a navigation bar and its nested list items and links. The nesting structure mirrors the HTML structure, making it easier to understand and maintain the CSS code. +
+### CSS Without Nesting + +Here is what the CSS would look like without nesting: +```css +.navbar { + background-color: #333; +} + +.navbar ul { + list-style-type: none; +} + +.navbar ul li { + display: inline-block; +} + +.navbar ul li a { + color: #fff; + text-decoration: none; +} +``` +
+
### Use nesting with CAUTION