CSS Study Guide
OCR A Level Computer Science • Complete Reference with Examples
1. What is CSS?
CSS (Cascading Style Sheets) is used to control the appearance and formatting of a web page. CSS
can change properties such as the colour, font and size of HTML elements.
CSS is written with a selector to target elements, followed by curly brackets { } containing one or more
property–value pairs:
p {
color: blue;
font-family: courier;
font-size: 12px;
}
h1 {
color: red;
}
Note: CSS uses the American spelling of color — no letter 'u'.
2. What You Need to Know (OCR Spec)
You need to be able to write CSS using both inline CSS and external style sheets, applying the nine
listed properties below. You also need to understand the difference between identifiers and classes,
and write CSS to change their styles.
Property Description / Example
background-color Sets the background colour of an element.
border-color Sets the colour of an element's border.
border-style Sets the border style: dotted, dashed, or solid.
border-width Sets the border thickness in pixels, e.g. 2px.
Sets the text colour. Use American spelling — no 'u'. Accepts names
color
(red) or hex codes (#FF0000).
font-family Sets the typeface, e.g. arial, courier, verdana.
font-size Sets the text size in pixels, e.g. 14px. Sometimes pt is used instead.
height Sets the height of an element in pixels or percent.
width Sets the width of an element in pixels or percent.
3. Inline CSS
Inline CSS applies style directly to a specific HTML tag within the body of the document. The style
attribute is added inside the opening tag, with CSS written as property-value pairs inside speech marks.
Multiple properties are separated by semicolons.
<p>This is normal paragraph text.</p>
<p style="color: red; font-size: 20px;">This will be red.</p>
<p>This also has no inline style applied.</p>
Only the middle paragraph is affected — inline CSS targets individual tags only.
4. External Style Sheets
HTML documents can be linked to an external CSS file using the <link> tag, written inside the <head> of
the HTML file.
Property Description / Example
The relationship between the HTML and the linked file. Always
rel
"stylesheet" for CSS.
type The media type of the linked file. Always "text/css" for CSS files.
href The filename and extension of the external CSS file, e.g. "[Link]".
HTML file — linking to external CSS:
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
[Link] — external stylesheet:
p {
color: blue;
font-family: courier;
font-size: 12px;
}
h1 {
color: red;
}
5. Benefits of External Style Sheets
Benefit Detail
Editing the one CSS file updates every page instantly, saving time and
Whole-site changes
ensuring consistency.
HTML content and CSS formatting are kept separate, making both easier
Separation of concerns
to maintain.
The stylesheet is cached by the browser and does not need to reload on
Faster page loads
every page visit.
Different CSS files can be used for different layouts — e.g. standard,
Multiple stylesheets
large fonts, or dark mode for accessibility.
6. Embedded CSS (Awareness Only — Not in Spec)
Embedded CSS is another method where CSS is written inside <style> tags in the <head> of the HTML
file. It is not required for the OCR A Level specification but good to recognise.
<head>
<style>
p {
color: blue;
font-family: courier;
font-size: 12px;
}
</style>
</head>
7. The <div> Tag
The <div> tag is used as a container or division to group elements together. It adds no visible content
by itself, but is very useful for organising and styling sections of a page. All nine CSS properties can be
applied to a <div>.
<div style="background-color: lightblue; border-style: solid; border-width: 2px;
width: 300px;">
<h1>Special Offer!</h1>
<p>Now 10% off!</p>
</div>
Or using an external stylesheet:
div {
background-color: lightblue;
border-color: #FF0000;
border-style: dotted;
border-width: 2px;
width: 300px;
height: 150px;
}
8. Identifiers and Classes
Type Symbol Targets HTML attribute
Identifier (ID) # One unique element only id="name"
Class . Multiple elements at once class="name"
HTML — assigning an ID and classes:
<p id="welcome">Hello!</p>
<p class="text">It's nice to meet you.</p>
<p class="text">Have a good day.</p>
CSS — styling the ID with # and the class with . :
#welcome {
color: blue;
font-size: 18px;
}
.text {
color: purple;
}
Result: "Hello!" appears blue and larger; both other paragraphs appear purple.
9. Quick Reference — All Nine CSS Properties
background-color Background colour font-family Typeface (arial, courier…)
border-color Border colour font-size Text size (px or pt)
Border style
border-style (dotted/dashed/solid) height Element height
border-width Border thickness in px width Element width
Text colour (American
color spelling)
Based on CSNewbs CSS video • OCR A Level Computer Science • Practise by styling your own HTML pages!