Activity 04: CSS Selectors - Discovery Challenge

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

🎯 Learning Objectives

✅ 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
✅ Understand how one CSS rule can style multiple elements

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

🚀 Getting Started (See Results in 30 Seconds!)

Option One: Direct Browser (Fastest)

bash

# Just open index.html in your browser
open index.html
# or double-click the file

Option 2: Using Dev Server

bash

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

🎯 What's Already Working

When you open index.html, you'll immediately see:

✅ Complete 3 Stages - Working examples for Egg, Larva (Caterpillar), and Pupa (Chrysalis)
- Each stage has an h2 heading
- Each stage has a descriptive paragraph
- Each stage has a properly sized image (300x200px)
✅ Professional Styling - All applied using CSS element selectors:
- Centered content layout
- Styled headings (blue main title, red section headings)
- Images with rounded corners and shadows
- Clean typography and spacing
✅ CSS File Fully Working - styles.css demonstrates element selectors
⚠️ TODO: Adult Butterfly stage (you'll add this following the pattern)

📋 Your Tasks (Complete 30% remaining)

TODO 1: Add Adult Butterfly Stage (Easy)

Location: index.html - After the Pupa (Chrysalis) section (after line 32)

Success Criteria:

Add <h2> heading with text "Adult Butterfly"
Add paragraph describing the adult butterfly stage
Add <img> tag with proper src and alt attributes

Content to Use:

Heading: "Adult Butterfly"
Paragraph: "The butterfly emerges with colorful wings ready to fly. It will soon find a mate and lay eggs to start the cycle again."
Image URL: https://ansp.org/~/media/Images/ans/explore/online-exhibits/butterflies/lifecycle/monarch_adult.ashx?w=250&h=187&as=1&la=en&hash=5669E26C9AAFC82A841F5DFE3A5A257A1958CE55
Alt text: "Adult monarch butterfly with orange and black wings"

Hints:

Copy any of the three working stages (lines 19-32)
Replace the heading, paragraph, and image details
The styling will automatically apply from styles.css!
Notice how the CSS element selectors work:
- h2 selector will color your heading red
- p selector will style your paragraph
- img selector will size your image to 300x200px and add rounded corners

Expected Output:

vbnet

Adult Butterfly (red heading, 1.8em)
The butterfly emerges with colorful wings ready to fly... (gray text, centered)
[Butterfly image, 300x200px, rounded corners, with shadow]

Key Learning: You only need to add HTML! The CSS element selectors (img, h2, p) automatically apply to ALL elements of that type.

💡 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: