Know and understand the presentation layer is used to display and format elements within a web page

21 Website Authoring: Presentation Layer

What is the Presentation Layer?

The presentation layer is the part of a web page that tells the browser how to display the content. Think of it as the clothes and accessories you put on a character in a story. The HTML is the character’s body, while the CSS (Cascading Style Sheets) decides the outfit, colours, and layout. 🎭

Key Concepts

  • Selectors – choose which HTML elements to style.
  • Properties – define the style (e.g., color, font-size, margin).
  • Values – specify the exact style (e.g., #ff5733, 1.5rem).
  • Specificity – rules that decide which styles win when there are conflicts.
  • Box Model – visualise each element as a box with content, padding, border, and margin.

Analogy: Dressing a Page

Imagine you’re a fashion designer. HTML gives you the mannequin (the structure). CSS is your wardrobe: you choose a background-color for the room, a font-family for the text, and a margin to give the mannequin space. The final look is the page you see in the browser. 👗🖥️

Common CSS Properties

Property Purpose Example
color Text colour color: #ff0000;
background-color Background colour of an element background-color: #f0f8ff;
font-size Size of the text font-size: 1.2rem;
margin Space outside the element margin: 10px;
padding Space inside the element padding: 5px 10px;

Box Model Visualised

Content → Padding → Border → Margin
Think of it as a gift box (content) wrapped in tape (border), with a box of paper (padding) and a space between gifts (margin). 🎁

Applying CSS: Step‑by‑Step

  1. Write your HTML structure.
  2. Choose a selector (e.g., h1, .main-title, #header).
  3. Decide on a property and value.
  4. Write the rule in a style block or external stylesheet.
  5. Refresh the browser to see the changes.
  6. Use developer tools (Inspect Element) to tweak live.

Exam Tips for IGCSE ICT 0417

  • Understand specificity – remember that id selectors win over class and element selectors.
  • Use the box model – be able to calculate total width: width + padding + border + margin.
  • Write clean CSS – use comments and keep properties grouped logically.
  • Test in multiple browsers – check that styles render consistently.
  • Practice – create a small webpage and style it; then describe the CSS you used.

Quick Quiz

What selector would you use to style <h2> elements that have the class section-title?
Answer: h2.section-title ??

Revision

Log in to practice.

3 views 0 suggestions