Demo Mode

Activity 3 of 14

Activity 3: Introduction to CSS

Practice and reinforce the concepts from Lesson 3

Introduction to CSS

What you'll learn

In this activity, you will:

Apply CSS styles using three different methods (inline, internal, and external)
Link an external CSS file to your HTML document
Style HTML elements including backgrounds, text colors, and fonts
Understand the priority differences between CSS implementation methods
Create a styled webpage with lists and paragraphs

Estimated time: 30-40 minutes

Getting Started

:computer: Download your material

Time needed: 2-3 minutes

Open StackBlitz and access the template: Introduction to CSS
Alternative option: Download the source code template from Stackblitz Download Project button if you want to use your local IDE
You'll see three files: index.html, style.css, and package.json

:warning: Important: Before You Start DO NOT DELETE the existing files in the template:

Package files

Any other files you didn't create

ONLY EDIT the necessary files (index.html and style.css).

Steps to Complete Your Introduction to CSS

One. :computer: Set Up Your Files and Workspace

What you'll do: Understand the project structure and connect your CSS
Time needed: 3-5 minutes

Open StackBlitz and access the template
Locate the three files in your project: index.html, style.css, and package.json
Notice that the style.css file is already created for you
Your first task: Link the CSS file to your HTML by adding this line in the <head> section:
html
```
<link rel="stylesheet" href="style.css">
```

tip Place the <link> tag after the <title> tag in your HTML head section for better organization.

2. :emoji: Understand Your Target Output

What you should achieve: Your goal is to recreate this styled webpage
Time needed: 2 minutes

Style requirements:

Background: Dark cyan color for the entire page
Headings: Gold colored text ("My Favourite Food" and "My Hobby")
Paragraphs: White text on purple background
List items: Bold font weight
Content: Two sections with ordered and unordered lists

3. :emoji:️ Create the HTML Structure

What you'll do: Build the content structure
Time needed: 5-7 minutes

Add the following content to your HTML body:

First Section - Favorite Food:
- Add an <h1> heading: "My Favourite Food"
- Add a <p> paragraph: "The list below is showing my favourite food"
- Create an ordered list <ol> with three items:
  - Nasi lemak
  - Curry puff
  - Fried mee
Second Section - Hobbies:
- Add an <h1> heading: "My Hobby"
- Add a <p> paragraph: "The list below is showing my hobby when I am free"
- Create an unordered list <ul> with three items:
  - Reading books
  - Playing games
  - Watching movies

tip Remember to use proper HTML structure with opening and closing tags for all elements!

4. :art: Apply Inline CSS Styles

What you'll learn: CSS directly in HTML elements
Time needed: 3 minutes

Find your <body> tag in the HTML file

Add the inline CSS style attribute:

html

<body style="background-color: darkcyan;">

Save your file and observe the background color change

Key concept: Inline CSS uses the style attribute directly on HTML elements. It has the highest priority among all CSS methods.

tip Inline CSS is best for quick, one-off styles but not recommended for larger projects as it mixes presentation with content.

5. :art: Apply Internal CSS Styles

What you'll learn: CSS within the HTML document
Time needed: 5 minutes

In your HTML file, locate the <head> section
Add a <style> tag inside the <head> section

Insert the following CSS rules:

css

<style>
h1 {
  color: gold;
}

li {
  font-weight: bold;
}
</style>

Save and observe how all headings turn gold and list items become bold

Key concept: Internal CSS goes inside <style> tags and affects all matching elements in the current document.

6. :art: Apply External CSS Styles

What you'll learn: CSS in a separate file
Time needed: 5 minutes

Open the style.css file in your project

Add the following CSS rule:

css

p {
  color: white;
  background-color: purple;
}

Make sure your CSS file is linked in the HTML <head> (you should have done this in Step 1):
html
```
<link rel="stylesheet" href="style.css">
```
Save both files and observe the paragraph styling

Key concept: External CSS is stored in separate .css files and can be reused across multiple HTML pages.

tip If your external styles aren't working, double-check that:

The file name in your <link> tag matches exactly (case-sensitive)
The <link> tag is in the <head> section
You've saved both the HTML and CSS files

7. :books: Understanding the Three CSS Methods

Time needed: 3 minutes to review

CSS Method Comparison:

Method	Where It's Written	Priority	Best Use Case
Inline CSS	Directly in HTML elements using `style` attribute	Highest	Quick fixes, email templates
Internal CSS	In `<style>` tags within `<head>`	Medium	Single-page styles
External CSS	In separate `.css` files	Lowest	Multi-page websites

Priority Rule: When multiple methods style the same element, inline CSS wins!

tip CSS Priority If you have conflicting styles, remember: Inline > Internal > External. This is why your body background (inline) will always show, even if you add different background colors in internal or external CSS.

8. :white_check_mark: Test and Verify Your Styles

Time needed: 3 minutes

Checklist - Make sure you have:

Dark cyan background for the entire page
Gold colored headings ("My Favourite Food" and "My Hobby")
White text on purple background for both paragraphs
Bold text for all list items (both ordered and unordered)
Proper HTML structure with two sections
All three CSS methods working together

tip Final Check Compare your output with the expected result image. If something doesn't match:

Check for typos in your CSS properties
Ensure all tags are properly closed
Verify your CSS file is linked correctly

Troubleshooting Common Issues

Styles not appearing?

Check that your CSS file is saved
Verify the <link> tag has the correct file name
Make sure you're editing the right files in StackBlitz
Try refreshing your browser

Colors look different?

Use exact color names: darkcyan, gold, purple, white
Check for typos in property names (background-color not bgcolor)

Lists not formatting correctly?

Ensure you're using <ol> for ordered lists and <ul> for unordered lists
Check that list items are wrapped in <li> tags

Project Submission

:information_source: Info Submit Your Work When you have completed your "Introduction to CSS" project and verified all styling requirements:

Submit Your Project Here

Make sure to test all your styles and verify they match the expected output before submitting!

Great job! You've now learned how to use all three CSS methods to style a webpage! :tada: