Course Content
CSS Fundamentals
Variables
CSS variables (also known as CSS custom properties) allow to define a set of values that can be reused throughout the CSS code. We can use them to create dynamic and flexible designs that are easy to maintain and update.
To apply a variable to the entire document, we need to add the :root
pseudo-class at the top of the index.css
file. We use the --
prefix followed by a variable name and value to create a custom variable.
As we have declared a variable, we can apply it as a value to any property. To do that, we use the keyword var()
, and inside of the brackets ()
, we specify the variable name which we have in the :root
. Let's say that the color property for the <h1>
element supposed to be #3f42f3
(--blue-color
variable).
Let's combine the knowledge of variables declaration and their usage in the following example:
index.html
index.css
index.js
Overriding of properties
Overriding of properties can be achieved by declaring a property with the same name as the one in the parent element and assigning a new value to it. Let's consider the next example
index.html
index.css
index.js
Everything was clear?