Loading lesson path
From the previous page we have learned that global variables can be accessed through the entire document, while local variables can be used only inside the selector where it is declared.Sometimes we want the variables to change only in a specific section of the page.
Assume we want a different border color for <p class="note"> elements. Then, we can re-declare the --primary-bg-color variable inside the .note selector. When we use var(--primary-bg-color)Formula
inside this selector, it will use the local -- primary - bg - color variable value declared here.We see that the local --primary-bg-color variable will override the global --primary-bg-color variable for the .note selector:
:root {
--primary-bg-color: #1e90ff;Formula
-- primary - color:#ffffff;
}
body {Formula
background - color:var(--primary-bg-color);
}.container {color:
var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
}.container h2 {
border-bottom: 2px solid var(--primary-bg-color);
}.container .note {
--primary-bg-color: red; /* local variable will override global */
border: 1px solid var(--primary-bg-color);
padding: 10px;
}If a variable is going to be used only one single place, we could also have declared a new local variable, like this:
:root {
--primary-bg-color: #1e90ff;Formula
-- primary - color:#ffffff;
}
body {Formula
background - color:var(--primary-bg-color);
}.container {color:
var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
}.container h2 {
border-bottom: 2px solid var(--primary-bg-color);
}.container .note {
--note-border-color: red; /* new local variable */
border: 1px solid var(--note-border-color);
padding: 10px;
}