Embedded Files
CSS (cascading style sheets) brings beauty and style to your website with fonts, colors, format and layout in a way that can cascade throughout all your web pages. This activity will help you understand the concept of styling instructions for the web.
Materials
Materials
Print out enough copies of the Style Instructions template for your participants
Markers, crayons, pencils
Instructions
Instructions
Cascading style sheets - or CSS - give webpages instructions on how to display all their different parts. To visualize how CSS instructions work, we're going to make up and share some drawing instructions of our own.
Share the Style Instructions template and talk about the possible options for the attributes like color, cuteness, height, etc.
Explain that participants will first fill out their styling instructions. Then they will be trading their style instructions with someone else and working on drawing a dino to the specifications they receive.
Give participants 5 minutes to fill out their styling instructions.
Use an equitable method to have participants swap instruction templates with partners.
Give students 10-15 minutes to draw a dinosaur using their partners' styling instructions.
Have students post their templates and drawings on a shared space for a gallery walk.
Things to discuss
Things to discuss
What seemed easiest and most difficult in both coming up with directions and following them while drawing?
What do you imagine are styling instructions that CSS actually understands?
What do you imagine a website looks like without CSS?
Page updated
Report abuse