C2 · CSS Styling

Spec reference: Learning Aim C - Develop a Website to Meet Client Requirements Key idea: CSS controls how HTML elements look - colour, layout, fonts, spacing and responsiveness.

▶ CSS Tutorial - Zero to Hero (freeCodeCamp)

Linking CSS to HTML

html

<!-- In the <head> of your HTML file -->
<link rel="stylesheet" href="css/style.css">

Three ways to add CSS (external is best practice):

Method	How	When to use
External	Separate `.css` file linked in `<head>`	Always - keeps code organised
Internal	`<style>` block inside `<head>`	Quick prototyping only
Inline	`style=""` attribute on an element	Avoid - hard to maintain

CSS syntax

css

selector {
    property: value;
    property: value;
}

css

/* Style all paragraphs */
p {
    font-size: 16px;
    color: #333333;
    line-height: 1.6;
}

/* Style elements with a specific class */
.btn-primary {
    background-color: #F4A7B9;
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

/* Style an element with a specific ID */
#hero-banner {
    background-image: url('../images/banner.jpg');
    height: 500px;
    background-size: cover;
}

Selector type	Example	Targets
Element	`p`	All `<p>` tags
Class	`.card`	All elements with `class="card"`
ID	`#header`	The one element with `id="header"`
Descendant	`nav a`	All `<a>` inside `<nav>`
Pseudo-class	`a:hover`	Links when hovered

The Box Model

Every HTML element is a box with four areas:

┌─────────────────────────────┐
│           MARGIN            │  ← Space outside the border
│  ┌───────────────────────┐  │
│  │        BORDER         │  │  ← The border line
│  │  ┌─────────────────┐  │  │
│  │  │    PADDING      │  │  │  ← Space between border and content
│  │  │  ┌───────────┐  │  │  │
│  │  │  │  CONTENT  │  │  │  │  ← The actual text/image
│  │  │  └───────────┘  │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘

css

.card {
    margin: 20px;         /* Outside space */
    border: 1px solid #ccc;
    padding: 16px;        /* Inside space */
    width: 300px;
}

Colours in CSS

css

/* Named colour */
color: red;

/* Hex code  -  most common */
color: #6B3F2A;

/* RGB */
color: rgb(107, 63, 42);

/* RGBA  -  with transparency (0 = transparent, 1 = solid) */
background-color: rgba(244, 167, 185, 0.5);

Typography in CSS

css

body {
    font-family: 'Lato', Arial, sans-serif;  /* Fallback fonts */
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

h1, h2, h3 {
    font-family: 'Pacifico', cursive;
    color: #6B3F2A;
}

/* Import Google Fonts  -  add to top of CSS file */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Lato:wght@400;700&display=swap');

Layout with Flexbox

Flexbox makes it easy to lay out items in a row or column:

css

/* Navigation bar */
nav {
    display: flex;
    justify-content: space-between;  /* Spread items */
    align-items: center;
    padding: 16px 32px;
    background-color: #6B3F2A;
}

/* Card grid */
.products-grid {
    display: flex;
    flex-wrap: wrap;           /* Wrap to new rows */
    gap: 24px;
    justify-content: center;
}

.product-card {
    flex: 1 1 250px;           /* Grow, shrink, min-width */
    max-width: 300px;
}

Responsive design with media queries

css

/* Mobile first  -  default styles */
.hero {
    padding: 40px 16px;
    text-align: center;
}

.nav-links {
    display: none;        /* Hidden on mobile  -  use hamburger menu */
}

/* Tablet (768px and above) */
@media (min-width: 768px) {
    .hero {
        padding: 80px 32px;
    }
    .nav-links {
        display: flex;
    }
}

/* Desktop (1200px and above) */
@media (min-width: 1200px) {
    .hero {
        padding: 120px 64px;
    }
}

Useful CSS properties reference

Property	Example	Effect
`color`	`color: #333`	Text colour
`background-color`	`background-color: #fff`	Background colour
`font-size`	`font-size: 18px`	Text size
`font-weight`	`font-weight: bold`	Bold text
`margin`	`margin: 16px`	Outside spacing (all sides)
`padding`	`padding: 8px 16px`	Inside spacing (top/bottom, left/right)
`border`	`border: 1px solid #ccc`	Border line
`border-radius`	`border-radius: 8px`	Rounded corners
`width` / `height`	`width: 100%`	Dimensions
`display`	`display: flex`	Layout mode
`text-align`	`text-align: center`	Horizontal alignment
`text-decoration`	`text-decoration: none`	Remove underline from links
`cursor`	`cursor: pointer`	Pointer cursor on hover
`transition`	`transition: all 0.3s ease`	Smooth animation between states
`box-shadow`	`box-shadow: 0 2px 8px rgba(0,0,0,0.1)`	Drop shadow

Test Yourself

Question 1 of 5

What is the correct way to link an external CSS file to an HTML page?

Section A - Computational Thinking

Section B - Algorithm Development

Section C - Programming Paradigms

Section D - Programming Languages

Learning Aim A - Principles

Learning Aim B - Design

Learning Aim C - Build

C2 · CSS Styling

Linking CSS to HTML

CSS syntax

The Box Model

Colours in CSS

Typography in CSS

Layout with Flexbox

Responsive design with media queries

Useful CSS properties reference

Test Yourself

C2 · CSS Styling ​

Linking CSS to HTML ​

CSS syntax ​

The Box Model ​

Colours in CSS ​

Typography in CSS ​

Layout with Flexbox ​

Responsive design with media queries ​

Useful CSS properties reference ​

Test Yourself ​

C2 · CSS Styling

Linking CSS to HTML

CSS syntax

The Box Model

Colours in CSS

Typography in CSS

Layout with Flexbox

Responsive design with media queries

Useful CSS properties reference

Test Yourself