Skip to main content
ScotlandComputer ScienceSyllabus dot point

How do you control the appearance and layout of a web page with CSS?

Styling a web page with CSS: element, class and id selectors; controlling appearance and positioning; internal, external and inline styles; and a horizontal navigation bar.

An SQA Higher Computing Science answer on CSS, covering element, class and id selectors, controlling appearance and positioning, internal, external and inline styles, and styling a horizontal navigation bar.

Generated by Claude Opus 4.811 min answer

Reviewed by: AI editorial process; not yet individually human-reviewed

Have a quick question? Jump to the Q&A page

Jump to a section
  1. What this key area is asking
  2. How CSS works
  3. Selectors: element, class and id
  4. Controlling appearance and positioning
  5. Internal, external and inline CSS
  6. A horizontal navigation bar
  7. Examples in context
  8. Try this

What this key area is asking

The SQA wants you to style a web page with CSS: the element, class and id selectors; controlling appearance and positioning; the three ways to attach CSS (internal, external, inline); and styling a horizontal navigation bar. You should read and write CSS rules.

How CSS works

Selectors: element, class and id

This is the core of CSS: choose the right selector for how widely the style should apply.

Controlling appearance and positioning

CSS properties fall into two broad groups the SQA highlights:

  • Appearance: color (text colour), background-color, font-family, font-size, text-align, and borders. These control how content looks.
  • Positioning and spacing: margin (space outside an element), padding (space inside it), width, and layout properties that arrange elements on the page. These control where content sits and how it is spaced.
section {
  background-color: #f0f0f0;
  padding: 20px;
  margin: 10px;
}

Internal, external and inline CSS

So inline suits a one-off tweak, internal suits a single standalone page, and external suits a real multi-page website (the usual professional choice).

A horizontal navigation bar

A horizontal navigation bar is the menu of links across the top of a site. It is built by putting the links in an unordered list, then using CSS to remove the bullets and make the list items sit in a row rather than stacked.

nav ul { list-style-type: none; }
nav li { display: inline; }
nav a { padding: 10px; }

Setting the list items to display inline (or using a row layout) lines them up horizontally, and padding gives each link a comfortable clickable area. This is a standard pattern the SQA expects you to recognise and produce.

Examples in context

Separating content (HTML) from presentation (CSS) is a foundational web principle: it is why a site can be completely re-skinned by changing one external stylesheet, and why "responsive" sites can rearrange their layout for phones using CSS alone. The horizontal navigation bar built from a styled list is on virtually every website's top menu. In the SQA assignment you style your pages with CSS (usually an external sheet) to match your design, and the question paper asks you to write selectors and rules and to explain the internal/external/inline choice.

Try this

Q1. State the selector you would use to style every paragraph on a page. [1 mark]

  • Cue. An element selector: p.

Q2. State the symbol that begins a class selector. [1 mark]

  • Cue. A dot (full stop), for example .menu.

Q3. State one advantage of external CSS for a multi-page website. [2 marks]

  • Cue. One stylesheet styles every page, so the look is consistent and a single change updates the whole site.

Exam-style practice questions

Practice questions written in the style of SQA exam questions on this dot point, with worked answer explainers. The year tag is the paper they imitate, not the source.

SQA Higher (style)4 marksWrite CSS rules to make all h1 headings navy and centred, and to give any element with the class 'highlight' a yellow background.
Show worked answer →

An element selector targets all h1 elements; a class selector (a dot before the name) targets elements with that class.

h1 {
  color: navy;
  text-align: center;
}
.highlight {
  background-color: yellow;
}

The h1 rule uses an element selector and applies to every h1 on the page; the .highlight rule uses a class selector and applies to any element given class="highlight".

Markers reward a correct element selector for h1 with the colour and centring, and a class selector .highlight with the background colour.

SQA Higher (style)4 marksExplain the difference between internal and external CSS, and state one advantage of using external CSS for a multi-page website.
Show worked answer →

Internal CSS is written inside a style element in the head of a single HTML page, so the rules apply only to that page. External CSS is written in a separate .css file, which each HTML page links to, so one stylesheet can style many pages.

One advantage of external CSS for a multi-page site: the same styles are shared across every page from one file, so the site has a consistent appearance and a change made once (for example the heading colour) updates every page automatically, which is far easier to maintain.

Markers reward internal = a style element in one page's head (that page only), external = a separate linked file (shared across pages), and a valid advantage such as consistency and one-place maintenance.

Related dot points

Sources & how we know this