Skip to main content
Interactive Code Playground·Lesson 2 of 3

CSS Playground

The CSS tab is active by default here. The HTML tab has a ready-made structure so you can focus on writing styles. Switch tabs freely — all three are available.

CSS focused
Ctrl+Enter
HTML
CSS
JS
Preview

CSS Experiments

  • Add border-radius: 0.5rem to .card and .cta — does it look better?
  • Change .card border to border-left: 4px solid #E21B1B for an accent style.
  • Try box-shadow: 0 4px 12px rgba(0,0,0,0.1) on .card.
  • Switch the layout: replace align-items: flex-start with align-items: center on body.

The JS Tab

The JS tab wires up tag hover colours without touching the CSS. Check it out — this shows how CSS and JavaScript can work together or independently for the same visual effect.