HTML
15
1
<div class="container">2
<p>3
Text is blue because it inherits from :root.4
</p>5
<div>6
Text is green because it was explicitly set.7
</div>8
<div class="highlight">9
Text is red because it was also explicitly set.10
<p>11
Text is also red because of inheritance.12
</p>13
</div>14
</div>15
CSS
28
1
body {2
background-color: #f5f5f5;3
color: #555;4
font-size: 1.1em;5
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;6
}7
8
.container {9
margin: 40px auto;10
max-width: 700px;11
}12
13
:root {14
--color: blue;15
}16
17
.container div {18
--color: green;19
}20
21
.container .highlight {22
--color: red;23
}24
25
* {26
color: var(--color);27
}28
JS
1
1