<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 doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.