Skip to main content
ScotlandComputer ScienceSyllabus dot point

How do HTML and CSS divide the work of building a web page between content and presentation?

Implement a web page using HTML5 structural and semantic elements and style it with CSS, using internal and external stylesheets, selectors, classes and IDs, the box model and responsive design.

A focused answer to the SQA Advanced Higher Computing Science content on HTML and CSS, covering HTML5 structural and semantic elements, CSS selectors, classes and IDs, internal and external stylesheets, the box model and responsive design.

Generated by Claude Opus 4.813 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 dot point is asking
  2. HTML structure and semantic elements
  3. Applying CSS: internal and external
  4. Selectors, classes and IDs
  5. The box model and responsive design
  6. Try this

What this dot point is asking

The SQA wants you to build and style web pages: write structured HTML using semantic elements, and control its presentation with CSS. The key idea is separation: HTML provides the content and structure, CSS provides the appearance, and keeping them apart makes a site consistent and maintainable.

HTML structure and semantic elements

An HTML document has a <head> (metadata, title, links to stylesheets) and a <body> (the visible content). HTML5 adds semantic elements that name the role of each region instead of using anonymous <div> boxes. Semantic markup makes the structure meaningful to assistive technology and search engines, and easier for a developer to read.

<body>
  <header>
    <nav>...</nav>
  </header>
  <main>
    <article>...</article>
  </main>
  <footer>...</footer>
</body>

Applying CSS: internal and external

CSS can be written inside a page's <head> (internal) or in a separate .css file linked by every page (external). An external stylesheet is preferred because the whole site's appearance lives in one place: change it once and every page updates, which keeps the site consistent and easy to maintain, and lets the browser cache the file.

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

Selectors, classes and IDs

A CSS rule has a selector and a block of property and value pairs. The selector can be an element name (styles every such element), a class (.warning, applied to any number of elements with class="warning"), or an id (#header, which must be unique to one element). Classes are for styling groups the same way; ids are for one specific element.

The box model and responsive design

Every element is a box with four layers: the content, the padding around it (inside the border), the border, and the margin outside the border that separates it from neighbours. Understanding these layers is essential to controlling spacing. Responsive design then makes a layout adapt to the device: fluid widths and CSS media queries change the layout at different screen sizes, so the page is usable on a phone and a desktop alike.

Try this

Q1. Name the HTML5 semantic element used for a page's navigation links. [1 mark]

  • Cue. The <nav> element.

Q2. State which CSS selector can be applied to many elements on a page. [1 mark]

  • Cue. A class (written with a leading full stop, for example .menu).

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.

AH style: external CSS3 marksExplain one advantage of using an external CSS stylesheet rather than styling each page individually.
Show worked answer →

An external stylesheet holds the styles for the whole site in one file that every page links to (1 mark). A change made once in that file applies to every page automatically, so the site stays consistent and is faster to maintain (1 mark). It also separates presentation from content, keeping the HTML cleaner, and the browser can cache the stylesheet so pages load faster on subsequent visits (1 mark). Any one developed advantage beyond the first earns the further marks.

AH style: class vs id2 marksExplain the difference between a CSS class and an id selector and when each is used.
Show worked answer →

A class (selected with a full stop, for example .warning) can be applied to many elements on a page, so it is used to style a group of elements the same way (1 mark). An id (selected with a hash, for example #header) must be unique to one element on the page, so it is used to style or target a single, specific element (1 mark). Markers want the many-versus-one distinction matched to the correct selector symbol.

Related dot points

Sources & how we know this