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

ایجاد متغیر سراسری در :root با --main-color و استفاده از var(--main-color) در استایل‌های عمومی، مفهوم cascade و inheritance را به خوبی نشان می‌دهد. وقتی در یک بلوک داخلی همان نام متغیر را مقداردهی محلی کنید، مقدار آن بلوک و فرزندانش جایگزین مقدار سراسری می‌شود. برای پایداری، از مقداردهی پیش‌فرض var(--name, fallback) استفاده کنید تا در صورت نبود مقدار سراسری، مقدار جایگزین داشته باشید. با DevTools مرورگر می‌توانید نحوه ارث‌بری و اولویت‌ها را بررسی کنید. اگر می‌خواهید رفتار را پویا تجربه کنید، بلوک مادر را تغییر دهید تا ارث‌بری در سایر بلوک‌ها نیز مشخص شود.