Skip to content

Commit

Permalink
Add HTML to example of css variables
Browse files Browse the repository at this point in the history
  • Loading branch information
Kalikoze committed May 21, 2024
1 parent 3edc7a5 commit 934c82d
Showing 1 changed file with 10 additions and 1 deletion.
11 changes: 10 additions & 1 deletion lessons/module-2/advanced-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,17 @@ In this example, we define primary and secondary colors as CSS variables and app
<section class="note">
### Other Ways of Declaring Variables

While it is mostly common to define variables at the root level, you can also define them within a specific selector. This can be helpful if you want to define a variable that is only used within a specific selector. Note that variables will cascade down the CSS file similar to how other CSS styles cascade down the file. If you define a variable at the root level, it will be available to all selectors within the file. If you define a variable within a selector, it will only be available to selectors within that specific selector. An example might look like:
While it is mostly common to define variables at the root level, you can also define them within a specific selector. This can be helpful if you want to define a variable that is only used within a specific selector. Note that variables will cascade down the CSS file similar to how other CSS styles cascade down the file. If you define a variable at the root level, it will be available to all selectors within the file. If you define a variable within a selector, it will only be available to selectors within that specific selector. Consider the following:

**HTML**:
```html
<div class="container">
<div class="header">Header</div>
<div class="content">Content</div>
</div>
```

**CSS**:
```css
:root {
--main-color: #3498db;
Expand Down

0 comments on commit 934c82d

Please sign in to comment.