یک صفحه HTML ساده بسازید که با استفاده از متغیرهای CSS یک رنگ سراسری در :root تعریف کند و سپس همان متغیر را به‌صورت محلی در یک کلاس بازنویسی کند تا نشان دهید برخی عناصر رنگ سراسری را می‌گیرند و برخی رنگ محلی را استفاده می‌کنند.

برای تعریف رنگ سراسری از :root و متغیر CSS استفاده کنید تا یک نقطه ورود واحد داشته باشید. بازنویسی محلی در کلاس مثل .local باعث می‌شود عناصر داخل آن کلاس مقدار محلی را به جای مقدار سراسری بگیرند. هنگام استفاده از مقدارها، از var(--main-color, #fallback) استفاده کنید تا در صورت نبود مقدار محلی یا سراسری، مقدار پیش‌فرض مشخصی داشته باشید. همچنین به سازگاری مرورگرها توجه کنید؛ بعضی مرورگرها به‌طور کامل از متغیرهای CSS پشتیبانی می‌کنند اما در نسخه‌های قدیمی‌تر ممکن است نیاز به فِلَبَک باشد.