What is CSS?
CSS is what makes websites LOOK amazing! Colors, fonts, sizes, and more.
If HTML is the body...
CSS is the clothes, hairstyle, and accessories!
It's how we make things look stylish and cool.
See the Difference!
Without CSS ð
Hello World
This is plain HTML.
With CSS! ðĪĐ
Hello World
This is styled with CSS!
Play with Colors!
In CSS, we can use color names or color codes. Let's try both!
ð Click a Color to Change the Text!
I can be any color!
ðĻ Design Your Own Style!
Use these controls to style the text above:
Write Real CSS Code!
CSS code tells the browser exactly how things should look.
ð How CSS Code Works
h1 { color: blue; font-size: 48px; }
What to style
What to change
What it becomes
ðĨïļ Try It Yourself!
Edit the CSS code below and see the changes!
ðŊ CSS Challenges!
Try changing the code to do these things:
ðĻ CSS Art Challenge!
CSS can create amazing art! Use the controls to make your own pixel character!
ðĪ Design Your CSS Robot!
CSS Code for your robot:
âĻ CSS Animation Lab!
Animations make websites feel alive and fun!
ðŠ Animation Playground
Click on different animations to see them in action!
Current Animation CSS:
ð Color Matching Challenge!
Test your color skills! Match the hex color code to the right color!
ðĻ What color is this hex code?
Adventure 3 Complete!
You can now make webpages look amazing! You're a CSS Artist!