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

Category Tag Purpose Example
Text <h1>...<h6> Headings (h1 = largest) <h1>Main Title</h1>
<p> Paragraph <p>Some text.</p>
<br> Line break (self-closing) Line 1<br>Line 2
Formatting <strong> Bold (semantic: important) <strong>Warning</strong>
<em> Italic (semantic: emphasis) <em>Note</em>
Links & Images <a> Hyperlink <a href="url">Click</a>
<img> Image (self-closing) <img src="pic.jpg" alt="desc">
Lists <ul> / <li> Unordered (bullet) list <ul><li>Item</li></ul>
<ol> / <li> Ordered (numbered) list <ol><li>Step 1</li></ol>
Table <table> Table container <table><tr><th>Name</th></tr><tr><td>Alice</td></tr></table>
<tr> Table row
<th> / <td> Header cell / Data cell
Structure <div> Generic block container <div class="box">...</div>
<span> Generic inline container <span style="color:red">text</span>

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

<form action="process.php" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email"> <label for="age">Age:</label> <input type="number" id="age" name="age" min="10" max="99"> <label>Gender:</label> <input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female <label for="subject">Subject:</label> <select id="subject" name="subject"> <option value="cs">Computer Science</option> <option value="math">Mathematics</option> </select> <label for="message">Message:</label> <textarea id="message" name="message" rows="4"></textarea> <button type="submit">Submit</button> </form>
Input Type Purpose Attributes
text Single-line text maxlength, placeholder
password Masked text input Same as text
email Email with validation Built-in format check
number Numeric input min, max, step
radio One choice from group Same name = one group
checkbox Multiple selections checked
submit Submit button value = button text

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.