CodePen Embed - CSS Variables and Properties

<header>
  Logo
</header>
<main>
  <h1>Heading 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</main>

:root {
  --text-color: rebeccapurple;
  --font: Sans-Serif;
  --fs-1: 16px;
  --fs-2: 32px;
  --fs-2: 48px;
  --fs-3: 56px;
}

header {
  --text-color: mediumpurple;
  color: var(--text-color);
  font-size: var(--fs-3);
  font-weight: bold;
  background: var(--gradient, linear-gradient(to right,#8900b7 0%,#f3430d 100%));
}

body {
  color: var(--text-color);
  font-family: var(--font);
  background: var(--gradient, var(--fallback1, var(--fallback2, pink)));
}

const header = document.querySelector('header');
const root = getComputedStyle(header);
header.style.setProperty('--text-color', 'white');

This Pen is owned by Gulshan Saini on CodePen.

See more by @gulshansainis on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.