HTML Programmer

Module Overview

This practical module introduces learners to styling web pages using CSS. Learners will apply styling techniques to improve the visual appearance, layout, and readability of web pages created in previous modules.

The focus is on transforming plain HTML pages into visually appealing and user-friendly websites.

Module Outcomes

After completing this module, learners will be able to:

Apply CSS to HTML documents
Use inline, internal, and external CSS
Style text, colours, and backgrounds
Control layout using spacing and alignment
Use class and ID selectors for styling

Practical Activities

Activity 1: Applying Inline CSS

Task:

Add inline CSS to your existing HTML page:

Change text colour
Change background colour

Example:

<p style="color: blue; background-color: lightgray;">
  Styled text
</p>

Expected Outcome:

Learner understands how to apply basic inline styles

Activity 2: Using Internal CSS

Task:

Add a <style> section in the <head> and style:

All paragraphs
All headings

Example:

<head>
  <style>
    p {
      color: green;
    }
    h1 {
      text-align: center;
    }
  </style>
</head>

Expected Outcome:

Learner applies styles using internal CSS

Activity 3: Using External CSS

Task:

Create a file called style.css
Link it to your HTML file
Add styles for:
- Body background
- Text colour

Example:

<link rel="stylesheet" href="style.css">

Expected Outcome:

Learner successfully links and uses external CSS

Activity 4: Styling Text

Task:

Apply the following styles:

Font size
Font colour
Text alignment

Expected Outcome:

Learner improves readability of content

Activity 5: Using Class and ID Selectors

Task:

Apply a class to one paragraph
Apply an ID to one heading
Style both using CSS

Example:

.intro {
  color: blue;
}

#main-title {
  color: red;
}

Expected Outcome:

Learner demonstrates selector usage

Activity 6: Spacing and Layout

Task:

Apply:

Margin
Padding

Expected Outcome:

Learner improves layout and spacing