CSS in the Presentation Layer

Revise CSS in the Presentation Layer for ICT 0417 (O Level) — revision notes and instant AI marking.

📖 Revision notes · preview

Quick Summary

CSS (Cascading Style Sheets) define the appearance and style of webpages
CSS can be placed inside HTML (inline) or in a separate file (attached)
CSS uses selectors like classes or IDs to target specific elements
When multiple styles apply to one element, the closest one takes priority — this is the cascading order
You can style backgrounds, fonts, tables, borders, spacing, and much more
Classes let you create reusable style groups applied to multiple elements
Relative file paths make stylesheets portable and easier to manage

What is CSS?

The Basics

CSS stands for Cascading Style Sheets. Think of it as the "paintbrush and palette" of web design — while HTML is the structure of a webpage (the skeleton), CSS is what makes it look good (the skin, clothes, and makeup).

CSS controls the visual properties of elements. You can change colors, sizes, fonts, spacing, borders, backgrounds — basically everything about how something looks.

Real Example: An HTML heading tag <h1> by itself is plain and boring. CSS can make that same heading big, colourful, centered, and bold.

How CSS Works: Selectors

CSS uses selectors to target which elements to style. The most common selectors are:

Classes — targeted with a period . (e.g., .blue-text)
IDs — targeted with a hash # (e.g., #main-heading)
Element selectors — target all of one type of tag (e.g., p, h1)

p {

  color: blue;

  font-size: 16px;

}

.highlight {

  background-color: yellow;

}

Where Can CSS Go?

CSS can be placed in two main locations:

Inside an HTML file (inline or internal styles)
In a separate CSS file (external/attached stylesheet)

Key Point: Multiple pieces of CSS can be combined, but here's the crucial bit — if they conflict, the closest style wins. We'll explore this in detail below.

Attached & Inline Stylesheets

Attached Stylesheets (External)

An attached stylesheet is a separate CSS file that gets linked to your HTML page using a special line in the <head> section.

<head>

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

</head>

Why use attached stylesheets? Reusability. One CSS file can style multiple HTML pages. If you have 10 pages on your website and they all use the same stylesheet, you only need to edit the CSS file once and all pages update automatically.

Real Scenario: A school website has 30 pages. They all need the same blue header and white body text. Rather than writing the same CSS in every page, they create one styles.css file and link it to all 30 pages. Perfect!

Relative File Paths

where relative file path

If the CSS file is in the same folder as the HTML file:
href="styles.css"

portable

🔓 Read the full CSS in the Presentation Layer note → You're seeing the preview · sign in to read it all

Also in the full note

Styles — Controlling How Things Look
Classes — Reusable Style Groups
💾 What to Memorise
✅ Concepts Checklist
🎯 Exam Tips & Common Mistakes
The Cascading Order — Which Style Wins?
What is a CSS Style?
Backgrounds

What's inside

📖 Revision notes 🎯 Learn mode ✦ AI flashcards ✓ Instant AI marking 🧊 3D explorers 🧪 Experiments & simulations 📈 Progress tracking

📄 Practise CSS in the Presentation Layer with ICT 0417 past papers Every paper with its mark scheme — answer online, marked instantly. Open →

Read the full CSS in the Presentation Layer notes free

That's the preview — create a free account to read the rest, plus flashcards and practice questions with instant AI marking. No credit card.

Unlock the full notes free →

CSS in the Presentation Layer