Unit 11.3B · Term 3

HTML & CSS

HTML (HyperText Markup Language) defines the structure and content of a web page. CSS (Cascading Style Sheets) controls the visual presentation — layout, colours, fonts, and spacing. Together they form the foundation of every website. This lesson covers everything you need for the exam: document structure, semantic elements, forms, CSS selectors, the box model, and responsive design.

Learning Objectives

  • 11.5.3.1 Apply HTML tags in web-page development
  • 11.5.3.2 Develop a web page using HTML tags
  • 11.5.3.3 Format web pages using CSS

Lesson Presentation

11.3B-html-css.pdf · Slides for classroom use

View Download

Conceptual Anchor

The House Analogy

Think of a web page as a house. HTML is the structure — walls, rooms, doors (content and layout). CSS is the interior design — paint colours, furniture placement, lighting (appearance and styling). You build the structure first (HTML), then decorate it (CSS).

HTML Fundamentals

HTML Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Visible content goes here -->
</body>
</html>
Element Purpose Required?
<!DOCTYPE html> Declares this is an HTML5 document Yes
<html> Root element of the page Yes
<head> Metadata, title, links to CSS Yes
<meta charset="UTF-8"> Character encoding (supports all languages) Recommended
<title> Text shown in browser tab Yes
<body> All visible content goes here Yes

Essential HTML Tags

Text & Formatting Preview
<h1>Main Title</h1>
<p>This is a standard paragraph with <strong>important bold text</strong> and <em>emphasized italic text</em>.</p>

Main Title

This is a standard paragraph with important bold text and emphasized italic text.

Category Tag Purpose
Text <h1>...<h6> Headings (h1 = largest)
<p> Paragraph
<br> Line break (self-closing)
Formatting <strong> Bold (semantic: important)
<em> Italic (semantic: emphasis)
Links & Images <a> Hyperlink
<img> Image (self-closing)
Lists <ul> / <li> Unordered (bullet) list
<ol> / <li> Ordered (numbered) list

Semantic HTML5 Elements

Semantic elements describe their meaning to browsers and screen readers. Always prefer them over plain <div> elements.

Element Purpose
<header> Top section of page or article (logo, nav)
<nav> Navigation links
<main> Primary content of the page (one per page)
<section> Thematic grouping of content
<article> Self-contained content (e.g., blog post)
<aside> Side content (sidebar, related links)
<footer> Bottom section (copyright, contact info)

HTML Forms & Input Types

A web form allows you to collect user data. Below are the most common input types isolated for visual clarity.

Input Type: Text & Email
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">

<label for="email">Email Address:</label>
<input type="email" id="email" name="email">
Input Type: Radio & Checkbox
<label>Gender (Select one):</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

<label>Skills (Select multiple):</label>
<input type="checkbox" name="skill1" value="html"> HTML
<input type="checkbox" name="skill2" value="css"> CSS
Input Type: Select & Submit
<label for="subject">Choose a subject:</label>
<select id="subject" name="subject">
    <option value="cs">Computer Science</option>
    <option value="math">Mathematics</option>
</select>

<button type="submit">Submit Form</button>

CSS Fundamentals

Three Ways to Add CSS

Method Syntax Priority Best For
Inline <p style="color: red;"> Highest Quick one-off changes
Internal <style>...</style> in <head> Medium Single-page styles
External <link rel="stylesheet" href="style.css"> Lowest Multi-page sites ✓ Best practice

CSS Selectors

/* Element selector — targets all <p> elements */
p { color: blue; }

/* Class selector — targets elements with class="highlight" */
.highlight { background-color: yellow; }

/* ID selector — targets the element with id="header" */
#header { font-size: 24px; }

/* Descendant selector — targets <a> inside <nav> */
nav a { text-decoration: none; }

/* Multiple selectors — same styles for h1, h2, h3 */
h1, h2, h3 { font-family: Arial, sans-serif; }

The Box Model

Every HTML element is a box with four layers (from inside out): Content → Padding → Border → Margin.

div {
    width: 300px;           /* Content width */
    padding: 20px;          /* Space between content and border */
    border: 2px solid black;/* Visible border */
    margin: 10px;           /* Space outside the border */
}

/* Total width = 300 + 20×2 + 2×2 + 10×2 = 364px (default) */

/* Use border-box to include padding/border in width: */
div { box-sizing: border-box; }
/* Now total width = 300px (padding and border are included) */

Common CSS Properties

Property Values Example
color Text colour color: #333;
background-color Background colour background-color: #f0f0f0;
font-size Text size (px, em, rem) font-size: 16px;
font-family Font face font-family: Arial, sans-serif;
text-align left, center, right, justify text-align: center;
display block, inline, flex, grid, none display: flex;
width / height Dimensions width: 100%; height: auto;

Worked Example — Complete Web Page

1 Build a Student Profile Page

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student Profile</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Student Profile</h1>
        <nav>
            <a href="#about">About</a>
            <a href="#grades">Grades</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <main>
        <section id="about">
            <h2>About Me</h2>
            <img src="photo.jpg" alt="Student photo">
            <p>My name is <strong>Alice</strong>. I am a Grade 11 student.</p>
        </section>

        <section id="grades">
            <h2>My Grades</h2>
            <table>
                <tr><th>Subject</th><th>Grade</th></tr>
                <tr><td>Computer Science</td><td>A</td></tr>
                <tr><td>Mathematics</td><td>B</td></tr>
                <tr><td>Physics</td><td>A</td></tr>
            </table>
        </section>

        <section id="contact">
            <h2>Contact</h2>
            <form action="submit.php" method="POST">
                <label for="msg">Message:</label>
                <textarea id="msg" name="msg"></textarea>
                <button type="submit">Send</button>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 Alice. All rights reserved.</p>
    </footer>
</body>
</html>

CSS (style.css):

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #2c3e50;
    color: white;
    padding: 20px;
    text-align: center;
}

nav a {
    color: #ecf0f1;
    text-decoration: none;
    margin: 0 15px;
}

nav a:hover { text-decoration: underline; }

main { max-width: 800px; margin: 20px auto; padding: 0 20px; }

section { margin-bottom: 30px; }

h2 { color: #2c3e50; margin-bottom: 10px; border-bottom: 2px solid #3498db; }

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

th { background-color: #3498db; color: white; }

img { max-width: 200px; border-radius: 50%; }

textarea { width: 100%; padding: 10px; }

button {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}

button:hover { background-color: #2980b9; }

footer {
    text-align: center;
    padding: 20px;
    background-color: #2c3e50;
    color: white;
}

Pitfalls & Common Errors

Forgetting to Close Tags

<p>Hello without </p> causes layout issues. Always close tags (except self-closing ones like <br>, <img>, <input>).

ID vs Class Confusion

IDs (#) must be unique — one per page. Classes (.) can be reused. Use class for styling, ID for unique elements.

Not Linking CSS Correctly

The href path must be correct relative to the HTML file. If CSS is in a css/ folder: href="/css/style.css".

Box Model Surprise

By default, padding and border are added to width. Use box-sizing: border-box; to include them. Always add * { box-sizing: border-box; } at the top of your CSS.

Pro-Tips for Exams

Exam Writing Tips

  • Always use angle brackets correctly: <tag> not [tag] or (tag)
  • Write attributes inside the opening tag: <a href="url">
  • Know the difference between <b>(visual bold) and <strong>(semantic importance)
  • When asked about forms: always mention action, method, and input name attributes
  • For CSS questions: write selector { property: value; } — don't forget the semicolons!

Graded Tasks

Remember

List the 5 required elements of an HTML5 document skeleton. Name 3 form input types and their purpose.

Understand

Explain the CSS Box Model with a labelled diagram. Calculate the total width of an element with width: 200px; padding: 15px; border: 3px; margin: 10px;.

Apply

Create a complete HTML page for a restaurant menu with a header, 3 food categories using tables, images, and a reservation form.

Apply

Write an external CSS file to style the restaurant page with custom colours, fonts, a nav bar, and a hover effect on menu items.

Analyze

Explain why <header>, <nav>, <main>, <footer> are better than using only <div> elements. Give benefits for accessibility and SEO.

Create

Build a complete 3-page website (home, about, contact) with a shared external CSS, consistent navigation, and a responsive layout that works on desktop and mobile.

Self-Check Quiz

1. What is the correct tag for the largest heading?
Click to reveal: <h1>
2. Which CSS selector has the highest specificity: element, class, or ID?
Click to reveal: ID (#) has the highest specificity, then class (.), then element.
3. What is the difference between <div> and <span>?
Click to reveal: <div> is a block-level container (takes full width). <span> is inline (flows with text).
4. What does the CSS property "margin: 10px 20px;" mean?
Click to reveal: Top/bottom = 10px, left/right = 20px (two-value shorthand).
5. Name the four layers of the CSS Box Model from inside to outside.
Click to reveal: Content → Padding → Border → Margin.