← All CSS Chapters
LoOPCode Home
12. CSS Variables
Custom properties — design tokens jaise pro system.
Is chapter me cover hoga:
--variable
var()
:root
Why useful
1. Variables
Ek jagah color badlo — poori site update. Design systems ka foundation.
<!DOCTYPE html> <html> <head> <style> :root { --brand: #0d9488; --bg: #f0fdfa; --radius: 12px; } body { background: var(--bg); font-family: sans-serif; padding: 20px; } .card { background: white; border-radius: var(--radius); padding: 20px; border-left: 4px solid var(--brand); } h2 { color: var(--brand); } </style> </head> <body> <div class="card"> <h2>Design tokens</h2> <p>Variables se consistent UI banati hai.</p> </div> </body> </html>
▶ Run Code
☐
Mark complete
← Transitions
Pseudo →