Drawing Dinos

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

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

  • 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?