<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
}
View Compiled

External CSS

  1. https://codepen.io/draber/pen/BayEGwb
  2. https://codepen.io/draber/pen/OJVPrpx

External JavaScript

This Pen doesn't use any external JavaScript resources.