<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom CSS properties</title>
<style>
@page {
size: 220pt 120pt;
margin: 10pt;
}
:root {
--main-light: #c9e0ea;
--main-dark: #001e5e;
--green-light: #ebf8d4;
--green-dark: #224800;
}
p {
margin: 0;
}
div.light {
background: var(--main-light);
color: var(--main-dark);
}
div.dark {
background: var(--main-dark);
color: var(--main-light);
}
.red {
--main-dark: #8c0505;
--main-light: #f8d4d4;
}
.green {
--main-dark: var(--green-dark, lightgreen);
--main-light: var(--green-light, darkgreen);
}
</style>
</head>
<body>
<div class="light">
<p>Hello <span class="hl">World</span></p>
</div>
<div class="dark">
<p>Hello <span class="hl">World</span></p>
</div>
<div class="light red">
<p>Hello <span class="hl">World</span></p>
</div>
<div class="dark red">
<p>Hello <span class="hl">World</span></p>
</div>
<div class="green">
<div class="light">
<p>Hello <span class="hl">World</span></p>
</div>
<div class="dark">
<p>Hello <span class="hl">World</span></p>
</div>
</div>
</body>
</html>
