Free revision guides

CSS classes and external style sheets

National 5 Computing Science: Web design and development

CSS appears in the web section every year: write a rule, explain a choice, or say how a page will look. The examiners' reports for 2023 and 2024 point to answers that are only half there.

Styling some elements, not all: a class

On a café's page, only the special offers should be shown in red and centred. That takes two parts:

.offer {
   color: red;
   text-align: center;
}
<p class="offer">Half-price soup after 3pm</p>
<p>Open 9 till 5, Monday to Saturday</p>
  • The rule in the CSS, with a dot before the class name: .offer.
  • The class attribute on each element that should use it: class="offer", with no dot.

Many candidates write one part and forget the other. The second paragraph has no class, so it stays as it was.

An ID works the same way for one single element: #banner { ... } in the CSS and id="banner" in the HTML.

Why use an external style sheet?

An external style sheet is a separate .css file, linked from every page with <link rel="stylesheet" href="style.css">.

  • "The CSS is in a separate file." (True, but that is a fact, not a benefit.)
  • "It is more consistent." (On its own, too vague.)
  • "The style is changed once in one file, and every page that links to it changes."

Reading HTML and CSS together

When asked how a page will look, check every rule and which elements it applies to: the element's own rule, its class or ID, and anything set on body or a div it sits inside. In the example above, if body sets font-family: Arial, the offer is red, centred and in Arial. Guessing from the HTML alone loses marks.

The properties at National 5 are font-family, font-size, color, text-align and background-color. Write each as property: value;.

Try two exam-style questions

Choose an answer, say how sure you are, then press Check. Every wrong answer tells you why it is wrong.

The Style explorer simulation
In the course: Style explorer. Change CSS rules and watch a page restyle itself, then predict how the next change will look.

The full course covers every topic like this. Every topic in National 5 Computing Science has a short note, a simulation to try and a practice quiz with feedback on every answer, plus coding lessons, a full mock exam and a progress report for parents.

Create an accountTry more for freeAbout the course

More guides

This site is independent: it is not connected to the SQA or Qualifications Scotland. Points from the examiners' course reports are given in our own words.