Community resourceWorksheet

OCR H446 1.3.4 CSS selectors and properties

Part 2 of 8 · H446 1.3.4 · Web technologies

CSS is examined in H446 1.3.4 as two halves, a selector that chooses elements and declarations that change presentation, and student errors almost always sit in one half or the other. This worksheet reads a rule apart into its parts, diagnoses a broken one, then asks for a stylesheet written to a brief.

Students will:

  • match element, class and identifier selectors to the HTML they select
  • write declarations with correct property, value and punctuation
  • explain why an element given an identifier is not matched by a class selector
  • write external CSS to a stated brief covering colour, font, border and width
  • distinguish an inline style from an external stylesheet

Inside: 5 explanation cells, 1 multiple-choice question, 2 fill-in-the-blanks cells and 2 written answers. 27 marks, about 35 to 45 minutes.

Series: H446 1.3.4 · Web technologies, part 2 of 8.

Shared by Coding PathwayVerified teacher

  • 10 cells
  • About 45 minutes
  • CC BY-SA 4.0
  • Shared 31 Aug 2026
  • Updated 3 Sept 2026

Preview

The whole resource, exactly as a class sees it. Answers and marking are held back.

CSS selectors and properties

CSS controls presentation. A selector chooses matching HTML; declarations state property: value; inside braces. OCR requires inline style and external stylesheets plus element, class and identifier selectors.

Read one rule in four moves

CSS rule: selector, declaration and visible consequence HTML candidates<h1 id="lead" class="notice">Update</h1> match #lead { color: #FFFFFF; background-color: navy; }selector → declaration property: value;#lead matches the identifier; .notice would match the class UpdateCSS uses a colon, not an HTML-style equals sign.

h1 selects all h1 elements. .notice selects elements whose class is notice. #lead selects the element whose id is lead. In an external file, rules are not wrapped in HTML style attributes.

Worked style brief

Given <p class="warning">Check the gate</p>, the external rule

.warning {
  color: #FFFFFF;
  background-color: maroon;
  border-style: solid;
  border-width: 2px;
}

matches the class and makes the consequence visible. Inline CSS instead places declarations in an element's style attribute, for example style="font-size: 18px;". External CSS is easier to reuse across many elements/pages.

Appendix 5d also requires border-color, font-family, height and width. Treat height and width as presentation dimensions in CSS when a style brief asks for them; do not confuse them with the HTML image attributes that WT01 also permits.

Multiple choice1 mark

Which line is a valid CSS declaration?

  • A`background-color = "red"`
  • B`background-color: red;`
  • C`<background-color>red</background-color>`
  • D`background-color(red)`
Fill in the blanks4 marks
Selector gap 1 matches every h2 element. Selector gap 2 matches class card. Selector gap 3 matches identifier total. In color: navy, color is the gap 4.
  • h2
  • .card
  • #total
  • property
  • value
Written answer8 marks

Diagnose and rewrite: .alert { color = "white"; background-colour: #880000; }. Then explain why <p id="alert"> would still not match the corrected .alert selector.

Repair declaration syntax and the class/id mismatch.

Students type their answer here.

Apply the model independently

The remaining tasks change the context or reduce the support. Complete them without copying the worked model, then check that each explanation connects a mechanism to its consequence.

Written answer10 marks

Write external CSS so all h1 text is white on #274060; elements with class note use font-family Arial and font-size 18px; the element id panel has a solid black border of width 3px and width 420px.

Use three rule sets. Property order may vary.

Students type their answer here.

Fill in the blanks4 marks
CSS declarations use property checkpoint gap 1 value. A class selector begins checkpoint gap 2; an identifier selector begins checkpoint gap 3. External CSS is connected from HTML using the checkpoint gap 4 element.

Review your understanding

Before submitting, check that you can explain the main distinction in your own words, apply it in an unfamiliar context and justify each consequence rather than only naming a feature.