1494a50123
* fix: restructure certifications guide articles * fix: added 3 dashes line before prob expl * fix: added 3 dashes line before hints * fix: added 3 dashes line before solutions
47 lines
819 B
Markdown
47 lines
819 B
Markdown
---
|
|
title: Extend One Set of CSS Styles to Another Element
|
|
---
|
|
# Extend One Set of CSS Styles to Another Element
|
|
|
|
|
|
---
|
|
## Hints
|
|
|
|
### Hint 1
|
|
|
|
Use `@extend`
|
|
|
|
|
|
---
|
|
## Solutions
|
|
|
|
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
|
|
|
Use `@extend` to extend the `info` class into `info-important` like:
|
|
|
|
```html
|
|
<style type='text/sass'>
|
|
h3 {
|
|
text-align: center;
|
|
}
|
|
.info {
|
|
width: 200px;
|
|
border: 1px solid black;
|
|
margin: 0 auto;
|
|
}
|
|
.info-important {
|
|
@extend .info;
|
|
background-color: magenta;
|
|
}
|
|
</style>
|
|
<h3>Posts</h3>
|
|
<div class="info-important">
|
|
<p>This is an important post. It should extend the class ".info" and have its own CSS styles.</p>
|
|
</div>
|
|
|
|
<div class="info">
|
|
<p>This is a simple post. It has basic styling and can be extended for other uses.</p>
|
|
</div>
|
|
|
|
</details>
|