Be able to save styles in cascading stylesheet format

Resources → Subject Notes → Information Communication Technology ICT → Lesson Plan

Saving Styles in Cascading Stylesheet (CSS) Format

1. The Web‑Development Layers (IGCSE focus)

  • Content layer – written in HTML (structure, text, images, tables, multimedia).
  • Presentation layer – written in CSS (colours, fonts, layout, visual effects).

For Cambridge IGCSE 0417 the exam only requires knowledge of the content and presentation layers.

2. What is CSS?

Cascading Style Sheets (CSS) is a language that tells the browser how HTML (or XML) elements should be displayed – colour, font, spacing, positioning, etc.

3. The Cascading Concept

When more than one rule could apply to an element, the browser decides which rule wins by looking at three factors, in this order:

  1. Importance – declarations marked !important override normal rules.
  2. Specificity – the more specific the selector, the higher its weight.
  3. Source order – if importance and specificity are equal, the rule that appears later in the stylesheet wins.

4. Required Elements in the HTML <head> Section

Cambridge expects the following tags to be present in every page that uses an external stylesheet.

Tag Purpose (as required by the syllabus)
<meta charset="utf-8"> Specifies UTF‑8 character encoding (mandatory for all modern pages).
<meta name="viewport" content="width=device-width, initial-scale=1"> Ensures the page scales correctly on mobile devices.
<meta name="description" content="…"> Provides a short summary for search‑engine results.
<meta name="keywords" content="…"> Lists relevant keywords (optional but useful).
<meta name="author" content="Your Name"> Identifies the page’s author.
<title>…</title> Text shown on the browser tab and in search results.
<link rel="stylesheet" href="css/style.css"> Links an external CSS file (the presentation layer).

5. Linking an External Stylesheet

  • Place the <link> element inside the <head> of every page that needs the stylesheet.
  • Use a **relative path** (e.g. css/style.css) so the site works on any computer or server.
  • Why not use an absolute path for local files? An absolute URL (e.g. file:///C:/mySite/css/style.css or https://mydomain.com/style.css) ties the page to a specific location or domain, breaking portability and causing case‑sensitivity problems on many web servers.

6. Creating an External Stylesheet

  1. Open a plain‑text editor (Notepad, VS Code, Sublime Text, etc.).
  2. Write your CSS rules (see Section 7).
  3. Save the file with a **lower‑case** .css extension – e.g. style.css.
    • Use UTF‑8 encoding.
    • Avoid spaces in the file name (e.g. my‑style.css).
  4. Store the file in the same folder as the HTML document or in a sub‑folder such as css/.

7. Basic CSS Rule Syntax

A rule consists of a selector followed by a declaration block.

Part Purpose Example
Selector Identifies which HTML element(s) the rule applies to. p, #header, .menu
Declaration block One or more property: value pairs, each ending with a semicolon. { color: red; font-size: 14px; }
Property The visual aspect to change. color, margin, background-color
Value The setting applied to the property. red, 10px, #f0f0f0

8. Common CSS Properties Required for the IGCSE Exam

  • color – text colour.
  • background-color – background colour of an element.
  • font-family, font-size, font-weight, font-style.
  • text-align, text-decoration, line-height, vertical-align.
  • margin and padding – space outside and inside the border.
  • border – style, width, colour of the element’s border.
  • width and height.
  • display – block, inline, inline‑block.

9. Using <div>, Classes and IDs

The <div> element is a generic container. Styling is applied via a class (.className) or an ID (#idName).

<!-- HTML -->
<div class="container">
    <h2>Section heading</h2>
    <p>Some paragraph text.</p>
</div>

/* CSS */
.container {
    max-width: 960px;
    margin: 0 auto;          /* centre horizontally */
    padding: 20px;
    background-color: #fafafa;
    border: 1px solid #ddd;
}

10. Styling Tables (HTML & CSS)

Tables belong to the content layer but are styled in the presentation layer.

<!-- HTML table example -->
<table class="data">
    <caption>Student Scores</caption>
    <thead>
        <tr>
            <th>Name</th>
            <th>Score</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>85</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>78</td>
        </tr>
    </tbody>
</table>

/* CSS for the table */
table.data {
    width: 100%;
    border-collapse: collapse;      /* removes double borders */
    margin-top: 20px;
}
table.data caption {
    caption-side: top;
    font-weight: bold;
    margin-bottom: 8px;
}
table.data th,
table.data td {
    border: 1px solid #999;         /* equivalent to cellspacing */
    padding: 8px;                   /* equivalent to cellpadding */
    text-align: left;
}
table.data th {
    background-color: #e0e0e0;
}

11. Hyperlinks – Syntax Required for the Exam

  • Internal bookmark: <a href="#section2">Go to Section 2</a>
  • External link opening in a new tab: <a href="https://example.com" target="_blank">External site</a>
  • Email link: <a href="mailto:info@example.com">Send email</a>

12. Relative vs. Absolute File Paths (Quick Reminder)

  • Relative path – written relative to the current document (e.g. css/style.css or ../images/logo.png).
  • Absolute path – full URL (e.g. https://mydomain.com/css/style.css).
    Use only when linking to resources on another domain; never for files stored locally because it prevents the site from working on a different computer or web server.

13. Checklist for Saving Styles Correctly

  • File name ends with .css (lower‑case, no spaces).
  • Saved using UTF‑8 encoding.
  • The <link rel="stylesheet"> element is placed inside the <head> of every page that needs the stylesheet.
  • The href attribute points to the correct **relative** location.
  • Every CSS declaration ends with a semicolon (;) and each rule ends with a closing brace (}).
  • Test the page in a browser after each change to confirm the style is applied.

14. Multimedia – Quick Reference (knowledge only)

  • <img src="photo.jpg" alt="Descriptive text"> – alt provides alternate text for accessibility and when the image cannot be displayed.
  • <audio controls src="sound.mp3">Your browser does not support audio.</audio>
  • <video controls width="640" src="movie.mp4">Your browser does not support video.</video>
  • These tags are part of the **content layer**; they do not require CSS for the exam, but you should know the basic syntax.

15. Practice Exercise

  1. Create a new folder called website.
  2. Inside website create a sub‑folder css.
  3. Create index.html with the following structure:
    • A heading (<h1>).
    • A paragraph introducing the site.
    • A navigation list that displays horizontally.
    • A simple table (include a <caption> and at least two rows of data).
    • Wrap the main content in <div class="container">.
  4. Create css/style.css and write CSS rules to:
    • Make the heading blue and centre it.
    • Set the paragraph font to Verdana, size 14px, colour #555555.
    • Style the navigation list so the items appear side‑by‑side (horizontal menu).
    • Give the table a border, collapse the borders, add padding, and colour the header row.
    • Centre the container on the page and give it a light background.
  5. Open index.html in a browser and verify that all styles are applied as intended.

Create an account or Login to take a Quiz

87 views
0 improvement suggestions

Log in to suggest improvements to this note.