← Course home N5 Computing Science  ·  James Gillespie's
WDD  ·  Web Design & Development

CSS: Selectors, Properties and Box Model

Lesson 6 of 13 Approx 3 hrs (split over two periods)

Learning intentions

  • Understand what CSS is and how it controls the appearance of a web page
  • Know the syntax of a CSS rule: selector, property, and value
  • Know the three ways to apply CSS: inline, internal, and external
  • Know and correctly use element, class, and ID selectors
  • Understand the CSS box model: content, padding, border, and margin

Success criteria

  • I can write a correctly structured CSS rule with a selector, property, and value
  • I can write element, class, and ID selectors to target specific HTML elements
  • I can use common CSS properties: color, background-color, font-size, font-family, font-weight, text-align, border, padding, margin
  • I can describe the four layers of the box model in order: content, padding, border, margin
  • I can explain the difference between padding and margin
Warm up — what do you already know?

Answer before the lesson begins.

1. What does CSS stand for?

2. Which CSS selector targets elements with the class highlight?

3. In the CSS box model, what is the correct order from the innermost to the outermost layer?

Key vocabulary

CSS
Cascading Style Sheets — the language used to control the visual appearance of HTML elements: colours, fonts, sizes, spacing, and layout.
stylesheet
A collection of CSS rules. Can be written inline, in a <style> block, or in a separate .css file.
selector
The part of a CSS rule that identifies which HTML element(s) to style. E.g. p, .card, #header.
property
What you are styling — e.g. color, font-size, margin. Goes before the colon in a declaration.
value
The setting you are applying to the property — e.g. red, 1.2rem, 10px. Goes after the colon in a declaration.
declaration
A single property-value pair inside a CSS rule: color: red;. The semicolon at the end is required.
inline style
CSS written directly inside an HTML element using the style attribute: <p style="color:red">. Highest specificity but hardest to maintain.
internal stylesheet
CSS rules written inside a <style> element in the <head> of an HTML page. Applies to that page only.
box model
The model that describes how every HTML element is treated as a rectangular box with four layers: content, padding, border, and margin.
padding
Space between the content and the border. Padding is inside the element — it takes the element's background colour.
margin
Space outside the border, between this element and neighbouring elements. Margin is transparent — it does not take any colour.
class / ID selector
Class selector (.name) targets any element with that class. ID selector (#name) targets one unique element with that id.

CSS: Selectors, Properties and Box Model

What is CSS?

CSS (Cascading Style Sheets) is the language used to control how HTML pages look. While HTML defines the structure and content of a page ("this is a heading", "this is a paragraph"), CSS controls the presentation — colours, fonts, sizes, spacing, and layout. Separating structure (HTML) from presentation (CSS) makes websites easier to maintain and update.

CSS rule syntax

A CSS rule has two parts: a selector that identifies which element to style, and a declaration block containing one or more property-value pairs:

p {
  color: #1a1a2e;
  font-size: 1rem;
  line-height: 1.7;
}

Each declaration ends with a semicolon (;). The declaration block is wrapped in curly braces { }. Missing either the semicolon or the closing brace is one of the most common CSS errors.

Three ways to apply CSS

There are three places you can write CSS:

MethodWhere it goesApplies to
InlineInside an HTML element's style attributeThat one element only
InternalInside a <style> element in <head>That one HTML page only
ExternalIn a separate .css file, linked with <link>Every page that links to it
 
/* Inline — directly on the element */
<p style="color: red; font-weight: bold;">Important text</p>

/* Internal — in the head */
<style>
  h1 { color: #042C53; }
</style>

Selectors

The selector determines which elements the rule applies to. The three main types are:

Selector typeSyntaxTargetsExample
ElementpAll <p> elements on the pagep { color: navy; }
Class.highlightAll elements with class="highlight".highlight { background-color: yellow; }
ID#headerThe one element with id="header"#header { font-size: 2rem; }
p Element selector Targets ALL <p> elements Score: 1 .intro Class selector Targets elements with class="intro" Score: 10 #header ID selector Targets ONE element with id="header" Score: 100

Higher specificity score wins when rules conflict

Common properties

PropertyWhat it controlsExample value
colorText colour#1a1a2e
background-colorBackground fill colour#f8f8fc
font-sizeText size1.2rem
font-familyTypefacesans-serif
font-weightBold / normal thicknessbold
text-alignHorizontal text alignmentcenter
borderElement border (width style colour)2px solid #185FA5
paddingSpace inside element (between content and border)1rem
marginSpace outside element (between element and neighbours)20px
width / heightElement dimensions300px

The CSS box model

Every HTML element is treated as a rectangular box. The box has four layers, from the inside out:

  1. Content — the actual text, image, or other element inside
  2. Padding — transparent space between the content and the border; takes the element's background colour
  3. Border — a visible line around the padding (can be styled with width, style, colour)
  4. Margin — transparent space outside the border, between this element and others
MARGIN BORDER PADDING CONTENT text / image / etc.

The four layers of the box model — innermost to outermost.

Memory aid: Think of a framed picture on a wall. The content is the photograph. The padding is the white mount board between the photo and the frame. The border is the picture frame itself. The margin is the gap between this picture and the next one on the wall.

Padding and margin shorthand

Both padding and margin accept shorthand values to set multiple sides at once:

.box {
  padding: 10px;           /* all four sides */
  padding: 10px 20px;      /* top/bottom  left/right */
  padding: 5px 10px 15px 20px; /* top right bottom left (clockwise) */
  margin: 0 auto;          /* vertically 0, horizontally auto (centres block) */
}

Worked examples

Example 1 — Element selector rule

Write a CSS rule to make all <h1> elements: colour #1a1a2e, font-size 2rem, and text-align center.

1
The selector is h1 — targeting all h1 elements. No dot or hash needed for element selectors.
2
Open the declaration block with {. Write each property-value pair ending with a semicolon.
3
Close the block with }. Check all three properties are present.
h1 {
  color: #1a1a2e;
  font-size: 2rem;
  text-align: center;
}
Example 2 — Describing the box model

Annotate each layer of the box model for an element with padding: 15px, border: 2px solid #185FA5, and margin: 20px.

1
Content: the text or image inside the element — the innermost layer.
2
Padding (15px): 15 pixels of space all around the content, between the content and the border. Has the same background colour as the element.
3
Border (2px solid #185FA5): a 2-pixel solid blue border drawn around the padding.
4
Margin (20px): 20 pixels of transparent space outside the border, pushing neighbouring elements away.

Total space on each side taken up (not including content): 15px padding + 2px border + 20px margin = 37px per side.

Example 3 — Class selector with multiple properties

Write a CSS class rule called .card to give elements: background-color #f0f0f8, border 1.5px solid #185FA5, padding 1rem, and border-radius 8px.

1
The selector is .card — note the dot prefix for a class.
2
Write border shorthand: width, style, colour in that order — no commas between the three values.
3
Every declaration ends with a semicolon. The block ends with }.
.card {
  background-color: #f0f0f8;
  border: 1.5px solid #185FA5;
  padding: 1rem;
  border-radius: 8px;
}

To apply this to an element in HTML: <div class="card">...</div>

Now you try

Write an internal <style> block for a page about a school club. Your rules must:

  • Set the body background-color to #f8f8fc
  • Make all h2 elements colour #185FA5 and font-weight bold
  • Give the class .box a 2px solid border with colour #185FA5 and padding of 10px
<style>
  body {
    background-color: #f8f8fc;
  }

  h2 {
    color: #185FA5;
    font-weight: bold;
  }

  .box {
    border: 2px solid #185FA5;
    padding: 10px;
  }
</style>
Common mistakes
✕
Forgetting the semicolon at the end of a declaration. color: red without the semicolon will cause the next declaration to fail. Always end each property-value pair with ;.
✕
Confusing color and background-color. color sets the text colour only. background-color sets the fill behind the element. Using color: blue turns the text blue — it does not change the background.
✕
Missing the dot on a class selector. Writing highlight { } instead of .highlight { } targets a non-existent HTML element called <highlight>, not elements with class="highlight". The dot is essential for class selectors.
✕
Confusing padding and margin. Padding is space inside the element — it shows the element's background colour. Margin is space outside the element — it is always transparent. Adding padding makes the element larger; adding margin pushes it away from neighbours.
✕
Writing the border shorthand in the wrong order. The correct order is: border: width style colour — e.g. border: 2px solid red. Swapping the values (e.g. solid 2px red) may cause the browser to ignore the rule entirely.
Exam tip

The box model is one of the most reliable 2-mark questions at N5. The examiner expects you to name all four layers in order: content, padding, border, margin (inside to outside). If asked to "describe" or "explain" the box model, give one sentence per layer. For padding vs margin, the key distinction is: padding is inside the border; margin is outside the border.

For "write a CSS rule" questions, always check: (1) correct selector syntax — dot for class, hash for ID; (2) correct property name spelling — especially background-color with a hyphen; (3) semicolon after each declaration; (4) closing curly brace.

Task Set

Questions 1–4 are auto-checked. Questions 5–10 are self-marked — write your answer, then reveal the model answer to check your work.

1. Which of the following is a correctly written CSS rule? TYPE 1

2. What does the CSS margin property control? TYPE 1

3. Which CSS selector targets elements with class="intro"? TYPE 1

4. Where does an internal stylesheet go in an HTML page? TYPE 1

5. Name the four layers of the CSS box model in order, from innermost to outermost. For each layer, write one sentence describing what it is. (4 marks) TYPE 2

1. Content — the actual text, image, or other content inside the element.
2. Padding — the space between the content and the border; has the same background colour as the element.
3. Border — a visible line drawn around the padding; can be styled with width, style, and colour.
4. Margin — transparent space outside the border; pushes neighbouring elements away.

1 mark per correctly named and described layer.

6. Identify the errors in this CSS snippet. There are three errors. State each error and how to fix it. (3 marks) TYPE 2

h2 {
  colour: #185FA5
  font-weight bold;
}
.card
  padding: 1rem;
}
1. colour is misspelled — CSS uses the American spelling color (no 'u').
2. Missing semicolon after #185FA5 — every declaration must end with a semicolon: color: #185FA5;
3. Missing colon in font-weight bold — should be font-weight: bold;
4. Missing opening brace { after .card — the declaration block must open with a curly brace.

Accept any three of the four errors above for 3 marks (1 mark each).

7. Write three CSS rules: (a) make all <p> elements have a font-size of 1rem and line-height of 1.6; (b) make elements with class .highlight have a yellow background-color and bold font-weight; (c) make the element with id page-title have text-align center and colour #042C53. (3 marks) TYPE 2

p {
  font-size: 1rem;
  line-height: 1.6;
}

.highlight {
  background-color: yellow;
  font-weight: bold;
}

#page-title {
  text-align: center;
  color: #042C53;
}
1 mark per correct rule (correct selector prefix + correct properties + semicolons + braces).

8. Write a CSS class rule called .info-box with these four properties: background-color #E6F1FB; border 1.5px solid #185FA5; padding 1rem; border-radius 8px. (2 marks) TYPE 2

.info-box {
  background-color: #E6F1FB;
  border: 1.5px solid #185FA5;
  padding: 1rem;
  border-radius: 8px;
}
Marks: correct selector with dot (1), all four correct properties with values and semicolons (1).

9. Explain the difference between margin and padding in CSS. (2 marks) TYPE 2

Padding is the space between the content and the border, inside the element. It takes the element's background colour, so it appears as part of the element.

Margin is the space outside the border, between the element and its neighbours. It is always transparent — it does not take any background colour.

1 mark for a correct description of padding, 1 mark for a correct description of margin.

10. Write a complete internal <style> block for a page about a sports club. It must include: a body rule setting background-color and font-family; an h1 rule setting color, font-size, and text-align; a .panel class rule setting padding, border, and background-color. (4 marks) TYPE 2

<style>
  body {
    background-color: #f8f8fc;
    font-family: sans-serif;
  }

  h1 {
    color: #042C53;
    font-size: 2rem;
    text-align: center;
  }

  .panel {
    padding: 1rem;
    border: 2px solid #185FA5;
    background-color: #E6F1FB;
  }
</style>
Marks: <style> tags used (1), body rule with correct properties (1), h1 rule with correct properties (1), .panel class rule with dot prefix and correct properties (1).
Teacher notes — Shift+T to hide

Suggested timing: Two periods. Period 1 (1hr): warm-up, CSS syntax, selectors, common properties, box model concept (stop after box model diagram). Period 2 (2hr): box model SVG recap, shorthand, now you try, task set Q1–7. Q8–10 as extension or homework.

Box model analogy: Use a framed picture on a wall — content=photo, padding=mount board, border=frame, margin=gap between frames. Draw it on the board. Then point to the SVG diagram on the page. The order (content → padding → border → margin) is reliably examined at N5.

Most consistent errors: (1) American spelling — color not colour, background-color not background-colour. (2) Missing semicolons. (3) Missing dot on class selector. Drill these repeatedly before the task set.

Q9 (margin vs padding) is a reliable SQA 2-marker — prepare pupils to write at least one sentence for each with the keyword "inside/outside the border" to distinguish them clearly.