<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>
</div>
* {
	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;
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.