course content

Course Content

CSS Fundamentals

Effective work with CSSEffective work with CSS

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:

html

index.html

css

index.css

js

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

html

index.html

css

index.css

js

index.js

Everything was clear?

Section 1. Chapter 7