CSS — the presentation layer
CSS (cascading style sheets) builds the presentation layer: it DISPLAYS and FORMATS the content HTML supplies, but never adds or changes it. Rules live in an external stylesheet (a .css file linked into the <head>) or in an inline style attribute on one element. Each rule is a selector plus property: value; pairs in braces, and can set background, font (family, size, colour, alignment, bold, italic) and table properties.
Cascade precedence — inline wins
Where several sources style one element, CSS resolves clashes by a fixed precedence hierarchy: an inline style attribute (style="...") is highest, then an internal <style> block in the <head>, then a linked external stylesheet. Within a stylesheet a more specific selector wins — a class (.name) beats a plain tag selector such as p. If two equally-specific external rules clash, the last one linked wins.
Table styling — borders on both selectors
CSS styles a table via the table, tr, th and td selectors — size, background colour, horizontal/vertical alignment, spacing, padding and borders (border-collapse, colour, thickness, visibility). Removing all gridlines needs BOTH selectors: border: none; on the table selector alone still leaves each cell's border showing. Centre a table with margin-left: auto; margin-right: auto; and a set width (e.g. 85%).
Drawn from real examiner reports.
Tagged style auto-applies; class does not
A style is a plain tag selector (e.g. p) and applies AUTOMATICALLY to EVERY element of that tag, so p { color: blue; } styles every paragraph. A class (.name { ... }) applies to NOTHING until it is deliberately attached with class="name" in the HTML. Calling a class "a style affecting only some elements", without saying it must be attached, loses the marks.
Absolute path breaks a moved site
An absolute path names a file's exact location on one device (C:\...\styles.css), so it only resolves on that machine — upload the site, the drive no longer exists, the link breaks, and the page loses its formatting. A relative path (styles.css) is written relative to the linking page, so it keeps working wherever the site goes — so attached stylesheets must use it.
Borders off on BOTH table and td
A table's borders are drawn by BOTH the table selector AND the td/th cell selectors, so switching them off on only one leaves the other's visible — border: none; on the table alone still shows each cell's gridlines. To remove ALL gridlines, set border: none; on BOTH selectors. The table "will not lose its lines" if the rule sits on one selector only.
w23 P03 Q2-8 — borders had to be switched off in BOTH the table and td selectors.
Misspelt collapse is ignored silently
border-collapse: collapse; merges adjacent cell borders into one line. If the value collapse is misspelt, the browser does not recognise it and silently ignores the declaration — no error message, and the table keeps its doubled borders. Because nothing flags it, candidates assume the rule "did not work" rather than checking the spelling. Spell the value exactly.
w23 P03 Q2-8 — the misspelling of collapse was flagged as a recurring error.
Hex colours need the leading #
A hex colour value must start with a leading # — #FF6B35, never FF6B35 alone. Without the # the browser does not read the six characters as a colour, so the declaration is ignored and the element keeps its default colour. The # is required in external stylesheets and inline styles alike, for font, background and border colour.
w23 P03 Q2-8 — hex colours required a leading #.
No HTML tags inside a .css file
A .css file must contain only CSS — selectors, declarations and CSS comments. Pasting an HTML tag (a <link>, a <p>, or an HTML <!-- ... --> comment) into the stylesheet is invalid and can stop it working. A CSS comment uses /* ... */, NOT the HTML <!-- ... --> form. Keep the layers separate: content markup in the HTML page, styling rules in the .css file.
w23 P03 Q2-8 — no HTML was allowed inside the stylesheet.
Comment your details, save as .css
Start the stylesheet with a comment recording your candidate details — /* Name, centre/candidate number */. This is the evidence that the file is yours. Save it with a .css extension so the browser recognises it as a stylesheet when it is linked.
font-family as an ordered fall-back list
Write font-family as an ordered fall-back LIST, not a single name — e.g. "Arial", "Helvetica", sans-serif. The browser uses the first one installed, ending on a generic family. Put the most specific font first and the generic family last.
Attach in the head with a relative path
Attach the external stylesheet in the HTML <head> with <link rel="stylesheet" href="styles.css">, using a relative path so the link survives upload. Do it first — an un-attached or wrongly-pathed stylesheet means none of your rules reach the page.
h1, h2, h3, p, li, table, td) that applies AUTOMATICALLY to EVERY element of that tag on the page the stylesheet is attached to.Full notes, flashcards, Q&A and the topic quiz for every premium subject.
Premium plans are US$8.99/month or US$49.99/year — first month free.
Studying with a parent's blessing? Show them this.