A stylesheet is a separate file of rules that controls how pages look, so you change a colour or font once and every linked page follows. This skill appears when a task asks for consistent presentation across a page or a small site, and it builds on the page structure you have already written.
How does a CSS rule work?
A rule has a selector (what to style) and one or more declarations (how), each ending in a semicolon.
h1 {
color: navy;
font-family: Arial, sans-serif;
font-size: 28px;
}Here h1 is the selector. color, font-family and font-size are properties, and each is followed by a value. A missing semicolon is the most common reason a rule half works.
How do you build and link a stylesheet?
- Create a new plain text file named
style.cssin the site folder. - Write one rule per selector, starting with the elements the task names.
- Save the file and keep its extension as
.css. - Add a link line inside the
headof every page:<link rel="stylesheet" href="style.css">. - Reload the page and check that each requirement now shows.
Worked example
An invented task asks for all level 2 headings to be dark green and 20 pixels tall, and all paragraphs in 16 pixel Arial.
Step 1: create style.css.
Step 2: write the two rules.
h2 {
color: darkgreen;
font-size: 20px;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
}Step 3: in the head of index.html, add the link line. The stylesheet is in the same folder, so the path is simply style.css.
Step 4: if a second page, pages/events.html, also needs the rules, its link line is <link rel="stylesheet" href="../style.css">, because the stylesheet is one folder up. Later, changing darkgreen to navy once recolours every h2 on both pages.
The mistake to watch for
A common slip is to copy the same styling into the tag on every element.
<h2 style="color: darkgreen;">When we meet</h2>
<h2 style="color: darkgreen;">What we do</h2>This works for now but fails the consistency goal: a later change needs an edit on every heading, and one will be missed. The correction is a single h2 rule in the stylesheet and plain <h2> tags on the page. A second, quieter mistake is a wrong path in the link line, which makes the whole stylesheet silently disappear.
Check yourself
1. Find the fault: p { color: red font-size: 14px; }
Show answer
There is no semicolon after red. Correct: p { color: red; font-size: 14px; }
2. A page in the pages folder links to style.css in the site folder. Write the correct href.
Show answer
../style.css, because the stylesheet is one folder above the page.
3. Four pages share one stylesheet. The client wants a different heading colour. How many files need editing?
Show answer
One: the stylesheet. All four pages follow it.
Where this leads next
Next, make the pages connect to each other in Create a working relative link. Return to the module guide, and check your result against the brief with the practical task and evidence checker.
A rule can make sense on its own and still fail once the files sit in different folders. A teacher in online one-to-one ICT tuition can check your paths and rules against your real files.