Custom Properties Example

1. This document has a background colour that is set using a CSS3 custom property.
2. The heading is coloured using a different property.
3. The custom properties syntax can also represent other values that can be substitued, e.g. here, measurements are stored in two new variables and used to define margins and padding.
4. Custom Properies make changing page layout way simpler when using media queries.
5. Custom Properies also respect the cascade, so here the special class is more specific than the element styling on li, so the colour of this line is different.
6. Revisiting point 2 - we can include pretty-much anything that is a valid css property as a custom property.