CSS Selectors, Layout and Navigation
Describe, read and implement efficient inline, internal and external CSS for layout, sizing and horizontal navigation.
How to study Higher Computing Science
Move from requirements to structured designs, trace code and data precisely, and support every test or evaluation judgement with observable evidence.
Core concepts
Concept 1
Inline, internal and external CSS differ in scope and maintainability; efficient styling avoids unnecessary repetition.
Exam cue: Choose the CSS location from how many elements and pages share the style.
Concept 2
Grouping selectors apply one rule to multiple selectors, while descendant selectors target elements within a specified ancestor.
Exam cue: Read selector structure before predicting which elements receive a declaration.
Concept 3
Required layout properties include display, float, clear, margins, padding, height and width.
Exam cue: Separate space outside an element from space inside its border.
Concept 4
Horizontal navigation can use list-style removal and hover rules with appropriate display and positioning.
Risk pitfalls and guardrails
Confusing a grouping comma with a descendant space.
Guardrail: Check route, scope, data type, boundary, loop condition, identifier and expected output before committing to the response.
Using margin when the required spacing is inside the element.
Guardrail: Check route, scope, data type, boundary, loop condition, identifier and expected output before committing to the response.
Assuming display:none merely makes an element transparent while preserving its layout space.
Guardrail: Check route, scope, data type, boundary, loop condition, identifier and expected output before committing to the response.
Memory anchors
External CSS
A separate stylesheet can apply consistent reusable rules across multiple pages.
Grouping selector
A comma-separated selector list applies the same declarations to each selector.
Descendant selector
A space targets matching elements contained within the named ancestor.
Margin vs padding
Margin is outside the border; padding is inside the border around content.
display:none
The element is not displayed and does not occupy normal layout space.
Navigation hover
A hover rule changes styling while the pointing device is over a navigation element.
Checkpoint rule
Do the check-up only after you can summarize each concept in one sentence and identify one dangerous pitfall from memory.
Knowledge Check (after reading)
Short check-up to confirm understanding of this module.
Check-up Questions
Which CSS selects every h2 element and makes its text navy?
Which selector targets elements whose class is notice?
Answer all questions to submit.
Next step personalized recommendations
Continue learning
Move forward only after this module is stable.
What is Pass Harbor?
Completely free exam prep for 247 UK exams.
- Practice questions
- Flashcards
- Study guides
- Mock exams
- No registration
- No paywall
- Start instantly
“No more expensive exam prep. Quality study tools should be accessible to everyone.”