Jun 13, 2026

HTML & CSS Explained for OCR A-Level Computer Science (1.3.4)

OCR A-Level CS 1.3.4: what HTML and CSS do, key tags, the id vs class attribute, inline vs external CSS, and how to write and read web code in the exam.

Free HTML CSS revision resources (OCR A-Level Computer Science, 1.3.4)

We’ve made exam-style practice for this exact topic, free to download: HTML CSS question sheet, mark scheme and cheat sheet. Grab them, have a go, then read the full guide below.

OCR expects you to read and write small amounts of HTML and CSS in the exam — not build a whole website, but enough to complete missing tags, link a stylesheet, or write a CSS rule. Spec point 1.3.4(a) covers HTML, CSS and JavaScript; this post focuses on the first two, which appear almost every year ("write the CSS for…", "explain the difference between an id and a class attribute").

Let's nail exactly what each language does and the syntax you'll be asked to produce.

What do HTML and CSS each do?

The cleanest way to remember it: HTML is the structure, CSS is the style.

HTML (HyperText Markup Language) defines the content and structure of a page — the headings, paragraphs, lists, images and links. It uses tags in angle brackets, usually in pairs that open and close:

<h1>Win a holiday!</h1>
<p>Answer this question to enter:</p>
<ul>
  <li>5,000,000</li>
  <li>10,000,000</li>
</ul>
<a href="enter.html">Enter now</a>
<img src="prize.jpg">

<h1>Win a holiday!</h1>
<p>Answer this question to enter:</p>
<ul>
  <li>5,000,000</li>
  <li>10,000,000</li>
</ul>
<a href="enter.html">Enter now</a>
<img src="prize.jpg">

<h1>Win a holiday!</h1>
<p>Answer this question to enter:</p>
<ul>
  <li>5,000,000</li>
  <li>10,000,000</li>
</ul>
<a href="enter.html">Enter now</a>
<img src="prize.jpg">

Key tags to know: <html>, <head>, <title>, <body>, headings <h1>–<h6>, paragraph <p>, unordered list <ul> with list items <li>, hyperlink <a href="...">, and image <img src="...">.

CSS (Cascading Style Sheets) defines the appearance — colours, fonts, spacing, borders and layout. A CSS rule has a selector and a set of declarations:

This says: every <h1> should be navy, 32px and centred.

Selectors: element, id and class

CSS targets elements three common ways, and the id vs class distinction is a frequent exam question:

Element selector — p { ... } styles all paragraphs.
id selector — #header { ... } styles the single element with id="header". An id is unique — it should be used on one element only.
class selector — .offer { ... } styles every element with class="offer". A class can be reused on many elements.

So the difference: an id identifies one unique element, while a class is applied to a group of elements that should share the same styling.

Where can CSS live? Inline vs external

CSS can be written inline (inside an element's style attribute), internally (in a <style> block in the head), or externally (in a separate .css file linked from the page):

<link rel="stylesheet" type="text/css" href="styles.css">

<link rel="stylesheet" type="text/css" href="styles.css">

<link rel="stylesheet" type="text/css" href="styles.css">

The big exam point is the advantage of an external stylesheet: one file can style every page on the site, so you only change it once to update the whole site, keeping styling consistent and the HTML uncluttered.

Worked example: complete the code

A page needs all <div> elements to have a black background, a thick red border, 22px text, centred. Here's the CSS rule:

And to make a list item into a hyperlink to prizes.html:

<li><a href="prizes.html">See the prizes</a></li>

<li><a href="prizes.html">See the prizes</a></li>

<li><a href="prizes.html">See the prizes</a></li>

These are exactly the kinds of "fill in the missing code" and "write the CSS/HTML" tasks OCR sets — small, precise, and worth several marks each. Practise writing the syntax by hand, because spelling and punctuation (the semicolons, the closing tags) are marked.

Common exam mistakes

Mixing up id and class. id = one unique element (#name); class = many elements (.name). Selectors use # for id and . for class.
Forgetting to close tags. Most tags come in pairs — <p>…</p>, <ul>…</ul>. A missing </body> or </ul> loses marks.
Wrong CSS punctuation. Declarations are property: value; — colon between, semicolon after, all inside { }.
Saying CSS adds content. CSS only styles existing elements; the content comes from HTML.
Vague "external CSS is better." Be specific: one file styles the whole site, edited once, giving consistency.

Quick recap

HTML = structure/content (tags: h1–h6, p, ul/li, a href, img src); CSS = appearance.
A CSS rule is selector { property: value; }.
id (#) targets one unique element; class (.) targets many elements.
External stylesheet (<link rel="stylesheet" href="…">) styles the whole site from one file — consistent and easy to update.
In the exam, write small HTML/CSS by hand accurately — syntax is marked.

Frequently asked questions

What is the difference between HTML and CSS? HTML defines the structure and content of a web page using tags, such as headings, paragraphs, lists, links and images. CSS defines the appearance of that content, such as colours, fonts, spacing and borders. HTML is the structure; CSS is the style.

What is the difference between an id and a class attribute in HTML? An id is unique and should be applied to a single element on a page, selected in CSS with a hash, for example #header. A class can be applied to many elements that should share the same styling, selected with a dot, for example .offer.

What is an advantage of using an external CSS file? A single external stylesheet can be linked to every page on a website, so the styling is consistent across the whole site and can be changed in one place rather than editing each page. It also keeps the HTML uncluttered.

How do you link an external CSS file to an HTML page? You add a link element in the head of the page: . The href gives the name or path of the CSS file to apply.

How do you write a CSS rule? A CSS rule has a selector followed by a block of declarations in curly braces. Each declaration is a property and a value separated by a colon and ended with a semicolon, for example: h1 { color: navy; font-size: 32px; }.

What HTML tag adds an image to a page? The image tag, written as