Page 145 - CSS

--red: #b00;
--blue: #4679bd;
--grey: #ddd;
}
.Bx1 {
color: var(--red);
background: var(--grey);
border: 1px solid var(--red);
}

Variable Dimensions

:root {
--W200: 200px;
--W10: 10px;
}
.Bx2 {
width: var(--W200);
height: var(--W200);
margin: var(--W10);
}

Variable Cascading

CSS variables cascade in much the same way as other properties, and can be restated safely.

You can define variables multiple times and only the definition with the highest specificity will apply
to the element selected.

Assuming this HTML:

<a class="button">Button Green</a>
<a class="button button_red">Button Red</a>
<a class="button">Button Hovered On</a>

We can write this CSS:

.button {
--color: green;
padding: .5rem;
border: 1px solid var(--color);
color: var(--color);
}

.button:hover {
--color: blue;
}

.button_red {
--color: red;
}

And get this result:

https://riptutorial.com/ 123