← Back CP 🎪 Style Switcher ● ○ ○ ○ ○
🎪 Circus Code — Step right up to the greatest show on the web! Every performer on this stage has style properties you can change: color, size, background, borders, and more. Just like a real ringmaster, you decide how everything looks!

🎨 What's DOM Style Manipulation?

Every element on a web page has style properties — color, font-size, background, border, and more. In JavaScript, you can read these properties AND change them! This is called DOM style manipulation — it's how websites change appearance when you click buttons, how dark mode works, and how interactive pages come to life. Remember: In Loop Master you used loops to repeat actions. In Function Factory you bundled actions into reusable commands. Now you'll change how elements look by tweaking their style properties!

🎯 Missions Style the Ringmaster! Change 3+ style properties! Complete all 5 challenges!

🎪 Circus Stage

Tap a performer to select them, then change their style below!

✨ The Big Top
✓ 🎩
Ringmaster
The Boss
🔥 Star Attraction
🤸
Acrobat
The Flyer
⭐ High Flier
🦁
Leo the Lion
The Brave
👑 King of Stage
🤡
Clown
The Joker
🎈 Balloon Artist
🎨 Style Dashboard — Ringmaster
Change any property and watch the stage update instantly!
Text Color —
Background —
Font Size 14
14
Border Style none
Border Color —
Rotation 0°
0°

🎯 Circus Style Challenges

1
🎩 Ringmaster's Jacket: Select the Ringmaster and change their text color to red (#f87171)
✅
2
🤸 Acrobat Spotlight: Select the Acrobat and change their background to dark blue (#1e3a5f)
✅
3
🦁 Leo's Big Name: Select Leo the Lion and make their font size 28 (big roar!)
✅
4
🤡 Clown's Frame: Select the Clown, add a solid border with gold color (#fbbf24)
✅
5
🎪 Ringmaster Deluxe: Select the Ringmaster and give them purple text, gold background, font size 24, and a dotted border with purple color!
✅
🌟 Circus Mastery0%

🎪 Welcome to the Circus!

Step right up and become the Style Ringmaster! Every performer on stage has style properties — color, size, background, border, rotation. Tap a performer to select them, then use the Style Dashboard to change their look. Watch the stage update instantly!

👆Tap a performer on stage to select them
🎨Use the swatches, sliders, and toggles to change styles
👀Watch the stage update instantly — that's DOM style manipulation!
🏆Complete 5 challenges to become a Style Master!