<div class="wrapper">
	<h1>CSS Variables with defaults</h1>
	<p>The heading and paragraph text start out different colours but when you hover over them they all change to the same colour because that’s when the variable kicks in.</p>
* {
	box-sizing: border-box;

body {
	padding: 2em;

h1 {
	color: var(--color, blue);

p {
	color: var(--color, mediumPurple);

.wrapper {
	max-width: 40em;
	padding: 3em 1em;
	margin: 0 auto;
	&:hover {
		--color: lightSlateGrey;
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.