Steps for the Activity

  1. Enable the <style> tag.

    • Remix My Favorite Animal project. If you did the previous Intro to HTML activity, sign in to Thimble & find your project under your username & My Makes.
    • Find the <style> tag and delete the comment tag right before it as well as the end comment tag after the </style> end tag. Did colors change and items get rearranged on the screen? That's what CSS does.
  2. Experiment with CSS tags.

Materials

  • Desktop or laptop
  • Internet access
  • Creative juices

Discussion

Can you identify all the changes that happened on the page when you enabled the <style> tag?

sɹoloɔ ʞuᴉl ⅋ ʇxǝʇ (ϛ 'ʇxǝʇ ɥdɐɹƃɐɹɐd puᴉɥǝq ǝƃɐɯᴉ punoɹƃʞɔɐq (ㄣ 'ʇnoʎɐl uɯnloɔ-ᄅ (Ɛ sʇuoɟ ʍǝu (ᄅ 'ɹoloɔ punoɹƃʞɔɐq (Ɩ

What are the benefits of content (HTML) and layout (CSS) being independent on a web site?

Related Activities