Demo Mode

No student ID available

Activity 03: Introduction to CSS - Discovery Challenge

Learn three powerful methods to style your webpages: inline, internal, and external CSS.

🎯 Learning Objectives

In this activity, you will:

✅ Apply CSS using three different methods
✅ Link an external CSS file to HTML
✅ Style backgrounds, text colors, and fonts
✅ Understand CSS priority (cascade) rules
✅ Create a visually styled webpage

Estimated Time: 30-40 minutes

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

✅ Dark Cyan Background - Applied using inline CSS on the <body> tag
✅ Complete Favorite Food Section - Working example with:
- Gold heading (styled by internal CSS)
- Purple paragraph background with white text (styled by external CSS)
- Bold list items (styled by internal CSS)
- Ordered list with 3 food items
✅ All Three CSS Methods Working - Inline, internal, and external CSS demonstrated
✅ Professional Styling - Rounded corners, padding, and proper spacing
⚠️ TODO: Hobby section (you'll build this following the Favorite Food pattern)

📋 Your Tasks (Complete 30% remaining)

TODO 1: Build Hobby Section (Easy)

Location: index.html - After the Favorite Food section (after line 40)

Success Criteria:

Create <h1> heading with text "My Hobby"
Add paragraph: "The list below is showing my hobby when I am free"
Create unordered list (<ul>) with 3 items:
- Reading books
- Playing games
- Watching movies

Hints:

Copy the Favorite Food section structure (lines 34-40)
Change "My Favourite Food" to "My Hobby"
Change the paragraph text
Change <ol> to <ul> for unordered (bullet) list
Replace the food items with hobby items
All styling will apply automatically!

Expected Output:

java

My Hobby (gold heading)
The list below is showing my hobby when I am free (white on purple background)
• Reading books (bold)
• Playing games (bold)
• Watching movies (bold)

Why It Works Automatically:

Gold heading - Internal CSS rule h1 { color: gold; } applies to ALL h1 elements
Bold list items - Internal CSS rule li { font-weight: bold; } applies to ALL list items
Purple paragraph - External CSS rule in style.css applies to ALL paragraphs
Dark cyan background - Inline CSS on body applies to entire page

💡 CSS Methods Explained

Three Ways to Apply CSS

Method	Location	Priority	Syntax
Inline	HTML element	Highest	`<tag style="property: value;">`
Internal	`<style>` in `<head>`	Medium	`selector { property: value; }`
External	Separate `.css` file	Lowest	`selector { property: value; }`

Priority Rule (Cascade)

When styles conflict: Inline > Internal > External

Example: If body background is set in all three places, the inline style wins!

🏗️ Step-by-Step Guide

One. Link External CSS (3 min)

Add <link> tag in <head> section
Point to style.css file

2. Build HTML Structure (7 min)

Create two sections with headings, paragraphs, and lists
Use proper HTML tags (h1, p, ol, ul, li)

3. Apply Inline CSS (3 min)

Add style attribute to <body> tag
Set dark cyan background

4. Add Internal CSS (5 min)

Create <style> tag in <head>
Style h1 (gold color) and li (bold text)

5. Write External CSS (5 min)

Open style.css file
Style paragraphs (white text, purple background)

6. Test and Verify (5 min)

Check all three CSS methods work
Compare with expected output
Verify cascade priority

🎨 Expected Output

Your webpage should display:

Visual Design:

Dark cyan page background (inline CSS)
Gold headings (internal CSS)
Purple paragraph backgrounds with white text (external CSS)
Bold list items (internal CSS)

Structure:

scss

My Favourite Food (gold, large)
The list below is showing my favourite food (white on purple)
  1. Nasi lemak (bold)
  2. Curry puff (bold)
  3. Fried mee (bold)

My Hobby (gold, large)
The list below is showing my hobby when I am free (white on purple)
  • Reading books (bold)
  • Playing games (bold)
  • Watching movies (bold)

[All on dark cyan background]

🐛 Troubleshooting

Styles not appearing

Check: CSS file is saved
Check: <link> tag has correct filename (style.css)
Check: <link> tag is in <head> section
Solution: Hard refresh browser (Ctrl+Shift+R / Cmd+Shift+R)

Colors look different

Problem: Typo in color name
Solution: Use exact names: darkcyan, gold, purple, white
Tip: Color names are case-insensitive but must be spelled correctly

Inline CSS not working

Problem: Wrong attribute or syntax
Solution: Use style="property: value;" format
Example: <body style="background-color: darkcyan;">

Internal CSS not applying

Problem: <style> tag in wrong place
Solution: Must be inside <head> section
Tip: Check closing </style> tag exists

External CSS not loading

Problem: File not linked or wrong path
Solution: Verify <link rel="stylesheet" href="style.css"> in <head>
Tip: Filename is case-sensitive on some systems

List items not bold

Problem: Selector typo in internal CSS
Solution: Use li { font-weight: bold; } exactly

📚 CSS Properties Reference

Colors

css

color: white;              /* Text color */
background-color: purple;  /* Background color */

Typography

css

font-weight: bold;         /* Make text bold */
font-size: 20px;           /* Text size (optional) */

Common Color Names

darkcyan, gold, purple, white
black, red, blue, green, yellow
Or use hex codes: #FF5733, #00AA00

🎓 Completion Checklist

Before submitting:

All three CSS methods implemented
External CSS file properly linked
Content matches requirements (2 sections, correct text)
Visual output matches expected design
All colors correct (darkcyan, gold, purple, white)
List items are bold
Code is clean and well-formatted

🔬 Understanding CSS Priority

Experiment: Test the Cascade

Try adding the same style in multiple places:

Example - Body Background:

html

<!-- Inline (highest priority) -->
<body style="background-color: darkcyan;">

<!-- Internal (medium priority) -->
<style>
  body { background-color: red; }
</style>

<!-- External (lowest priority) -->
body { background-color: blue; }

Result: Background will be darkcyan (inline wins!)

Why Priority Matters

Inline: Quick fixes, overrides everything
Internal: Page-specific styles
External: Site-wide consistency

Best Practice: Use external CSS for most styles, internal for page-specific tweaks, inline sparingly.

🚀 Extension Challenges

After completing the base activity:

Add More Sections
- Create third section about sports or music
- Apply consistent styling
Experiment with Colors
- Change color scheme (blue theme, green theme)
- Use hex codes instead of color names
Add More CSS Properties
- font-family: Change fonts
- padding: Add spacing inside elements
- margin: Add spacing between elements
- border: Add borders to elements
Override Exercise
- Try to override inline CSS with internal CSS (it won't work!)
- Understand why cascade matters

📚 Learning Resources

MDN: CSS Basics - Comprehensive guide
MDN: CSS Cascade - Deep dive into priority
W3Schools: CSS Tutorial - Interactive examples
Color Names Reference - All valid CSS color names

Activity 03 - Introduction to CSS W1: Front-end Design & User Experience Telebort Engineering Time: 30-40 minutes

Template 3: Intro To Css

📦 Project Files Included: