<div id="description">
  <h2>Використання змінних для кольорів</h2>
  <p>Цей приклад показує використання змінних для визначення фонового кольору елементів.</p>
</div>

<div id="result">
  <div class="box">Елемент 1</div>
  <div class="box colored">Елемент 2</div>
</div>

:root {
  --main-color: #ff0000; /* Задаємо змінну з колором */
}

#result {
  display: flex;
  justify-content: space-around;
}

.box {
  width: 200px;
  height: 200px;
  background-color: var(--main-color); /* Використовуємо змінну */
}

.colored {
  --main-color: #00ff00; /* Змінюємо значення змінної для другого елемента */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.