CSS Variables

Exercise

In the "index.html" file, replace the code with the following:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
  <h1>CSS Variables</h1>
  <div id="container-no-variables">
    <div id="first-box"></div>
    <div id="second-box"></div>
    <div id="third-box"></div>
  </div>
  <div id="container-variables">
    <div id="fourth-box"></div>
    <div id="fifth-box"></div>
    <div id="sixth-box"></div>
  </div>
</body>

</html>

Save.
If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
In the "styles.css" file, replace the code with the following:

:root {
  --bestBlueColor: rgb(15, 15, 218);
  --bestRedColor: rgb(207, 25, 25);
  --bestGreenColor: rgb(11, 107, 11);
  --bigSquareSize: 200px;
  --smallSquareSize: 50px;
  --borderSettings: 5px solid black;
}

#container-no-variables {
  height: 200px;
  width: 200px;
  border: 5px solid black;
  margin: 10px;
}

#first-box {
  height: 50px;
  width: 50px;
  margin: 5px;
  background: rgb(207, 25, 25);
}

#second-box {
  height: 50px;
  width: 50px;
  margin: 5px;
  background: rgb(15, 15, 218);
}

#third-box {
  height: 50px;
  width: 50px;
  margin: 5px;
  background: rgb(11, 107, 11);
}

#container-variables {
  height: var(--bigSquareSize);
  width: var(--bigSquareSize);
  border: var(--borderSettings);
  margin: 10px;
}

#fourth-box {
  height: var(--smallSquareSize);
  width: var(--smallSquareSize);
  margin: 5px;
  background: var(--bestRedColor);
}

#fifth-box {
  height: var(--smallSquareSize);
  width: var(--smallSquareSize);
  margin: 5px;
  background: var(--bestBlueColor);
}

#sixth-box {
  height: var(--smallSquareSize);
  width: var(--smallSquareSize);
  margin: 5px;
  background: var(--bestGreenColor);
}

Save.
In the browser, you should see the following:

Code Walkthrough and Explanation

`:root`

In CSS, :root is a pseudo-class selector that targets the root element of a document, which is typically the HTML element. It is used to set global CSS variables, also known as CSS custom properties, which can be accessed and reused throughout the stylesheet. By using :root, changes made to the variable values will apply to all elements that reference them. This makes it a powerful tool for creating consistent design across an entire website. The :root selector is written as :root { /* styles here */ }.

`--bestBlueColor: rgb(15, 15, 218);`

`background: var(--bestBlueColor);`

CSS variables, also known as custom properties, are a feature introduced in CSS3 that allow developers to declare variables that can be reused throughout a stylesheet. This allows for more flexibility and efficiency when making changes to a website's styling, as variables can be easily updated and applied to multiple elements at once. CSS variables are declared using the -- prefix followed by a variable name and a value. They can be used with the var() function to reference the value of the variable in other parts of the stylesheet. This feature has greatly simplified the process of managing stylesheets and has made it easier to create dynamic, responsive designs.

Experiment with the Code

Try changing one of the css variable colors in the root element.
Try adding your own css variable and applying it to an element.

Video and Code References

Questions? Subscribe and ask in the video comments:

GitHub and Other References

Learn2BuildApps