Activity 04: CSS Selectors

Create a Butterfly Life Cycle webpage using CSS element selectors to style multiple elements at once.

📚 What You'll Learn

✅ Create semantic HTML heading hierarchy (h1, h2)
✅ Add and optimize images in webpages
✅ Use external CSS files for styling
✅ Apply CSS selectors to style multiple elements
✅ Complete timed coding challenges

Time: 20 minutes (15 min coding + 5 min testing)

🎯 Activity Objective

Build a butterfly life cycle webpage with 4 stages (Egg, Larva, Pupa, Adult), each with heading, description, and image. Style all images and center content using CSS selectors.

🚀 Quick Start

bash

./setup.sh
npm start
# Open http://localhost:8080

📋 Three Progressive Challenges

Challenge One: HTML Structure (5 min)

Main heading (h1): "The Butterfly Life Cycle"
4 stage headings (h2): Egg, Larva (Caterpillar), Pupa (Chrysalis), Adult Butterfly
Description paragraph under each heading

Challenge 2: Add Images (8 min)

Find/use butterfly life cycle images
Add <img> tag under each description
Include proper alt text
Use provided URLs or find your own

Provided Image URLs:

Egg: https://i.pinimg.com/originals/92/0b/70/920b7009540e1cc306911d60e846441a.jpg
Caterpillar: https://ansp.org/.../monarch_caterpillar.ashx?w=180...
Chrysalis: https://ansp.org/.../monarch_chrysalis.ashx?w=182...
Butterfly: https://ansp.org/.../monarch_adult.ashx?w=250...

Challenge 3: External CSS (2 min)

Create styles.css file
Link CSS in HTML <head>
Add image sizing: img { width: 300px; height: 200px; }
Center content: body { text-align: center; }

💡 CSS Selectors Explained

Element Selector - Targets ALL elements of a type:

css

img {
  width: 300px;     /* Applies to ALL images */
  height: 200px;
}

body {
  text-align: center;  /* Centers all content */
}

Key Concept: One CSS rule styles multiple elements!

🎨 Expected Output

csharp

        The Butterfly Life Cycle

              Egg
    The butterfly starts as a tiny egg...
         [Butterfly egg image]

         Larva (Caterpillar)
    The caterpillar hatches and eats...
        [Caterpillar image]

         Pupa (Chrysalis)
    The caterpillar forms a chrysalis...
         [Chrysalis image]

         Adult Butterfly
    The butterfly emerges with wings...
         [Butterfly image]

[All centered, images 300x200px]

🐛 Troubleshooting

Images not loading?

Check image URLs are correct
Test URLs in browser first
Ensure src attribute has full URL

CSS not applying?

Verify <link> tag in <head>
Check filename matches: styles.css
Save both HTML and CSS files

Layout wrong?

Check all HTML tags are closed
Verify CSS selectors (img, body)
Check text-align property

🎓 Completion Checklist

1 h1 + 4 h2 headings
4 descriptions + 4 images with alt text
External CSS file created and linked
All images 300x200px
All content centered
Images load properly

🚀 Extension Challenges

Add hover effects: img:hover { transform: scale(1.1); }
Style headings: Add colors, fonts, sizes
Add borders: img { border: 2px solid black; }
Responsive images: Use percentages instead of px

Activity 04 - CSS Selectors W1: Front-end Design & User Experience Telebort Engineering | 20 minutes

Template 4: Css Selectors

📦 Project Files Included: