1.5 KiB
1.5 KiB
title |
---|
Change a variable for a specific area |
Change a variable for a specific area
Cascading CSS variables officially called custom properties are entities which behave similarly to traditional variables. In that variables allow for data to be stored and updated to reflect new values later.
When maintaining complex CSS documents, it is not only beneficial to use CSS Variables but also smart. When making future updates instead of searching potential hundreds of lines of code, one only needs to update the necessary CSS variable.
Syntax
Declaring the variable:
--custom-name: value
Using the variable:
var(--custom-name)
Solution
We need to reassign the --penguin-belly
variable to white
in the penguin
class:
.penguin {
/* add code below */
--penguin-belly: white;
/* add code above */
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
}