🎨

CSS Advanced

Custom properties, transitions/animations and positioning.

3 lessons 5 tasks ⚡ Live compiler

📚 Lessons

1 Custom properties (variables)

Define reusable values with --name and read them with var(). They cascade and can be themed at runtime.

:root { --brand: #2563eb; --pad: 12px; }
h1 { color: var(--brand); }
.highlight { background: var(--brand); color:#fff; padding: var(--pad); }

2 Transitions & animations

transition smooths property changes; @keyframes + animation drive multi-step motion.

@keyframes pulse { from { opacity: .4; } to { opacity: 1; } }
h1 { animation: pulse 1s infinite alternate; }
.row > div { transition: transform .2s; }

3 Positioning & stacking

position: relative|absolute|fixed|sticky places elements precisely; z-index controls stacking within a context.

.highlight { position: relative; top: 4px; z-index: 2; }
h1 { position: sticky; top: 0; background:#fff; }

⚡ CSS Compiler

Code runs live in a sandboxed frame, rendered by your browser.

📝 Tasks

5 tasks across 2 pages — multiple-choice and fill-in (type the answer). Score 70% or higher to earn your certificate.

🎓 Certificate of Completion

🔒 Pass the quiz above (70%+) to unlock your downloadable certificate.