<main>
<div class="any-selector">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum laoreet neque, a vulputate velit placerat in.
Nulla et arcu ut ex elementum posuere sed ac ex. Suspendisse potenti.
</div>
</main>/* Define variables with the syntax --var-name: value. Commonly done on :root (= <html>), but possible on any element */
:root {
/* Creating a variable */
--theme-color: hsl(180, 100%, 10%);
/* Variables can have any value allowed in CSS */
--border: .1rem silver solid;
/* Variable nesting is possible */
--family: Arial, Helvetica, sans-serif;
--variant: small-caps;
--size: 1.5rem;
--font: var(--variant) var(--size)/1.5 var(--family);
}
/* Using a variable */
.any-selector {
background: var(--theme-color);
border: var(--border);
/* further nesting possible */
font: italic var(--font);
}
/* the not so relevant part */
div {
width: 70%;
padding: 2rem
}This Pen doesn't use any external JavaScript resources.