Demo Mode

No student ID available

Telebort | Learning to code made fun!

Activity 03: Introduction to CSS

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

📚 What You'll Learn

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

🎯 Activity Objective

Create a styled webpage about Favorite Food and Hobbies using all three CSS methods to demonstrate how they work together and their priority order.

🚀 Quick Start

Option One: Using Dev Server (Recommended)

bash

# Run the setup script
./setup.sh

# Start the development server
npm start

# Open http://localhost:8080 in your browser

Option 2: Direct Browser

Simply open index.html in your web browser. No setup required!

📋 Requirements

Content Structure

Section One: Favorite Food

Heading (h1): "My Favourite Food"
Paragraph: "The list below is showing my favourite food"
Ordered list with 3 items:
- Nasi lemak
- Curry puff
- Fried mee

Section 2: Hobbies

Heading (h1): "My Hobby"
Paragraph: "The list below is showing my hobby when I am free"
Unordered list with 3 items:
- Reading books
- Playing games
- Watching movies

Styling Requirements

Inline CSS (in HTML <body> tag):

Background color: darkcyan

Internal CSS (in <style> tag):

All h1 headings: color: gold
All list items (li): font-weight: bold

External CSS (in style.css file):

All paragraphs (p): color: white, background-color: purple

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