How do HTML and CSS build the content and appearance of a web page?
HTML and CSS: building page content and hyperlinks with HTML elements, and controlling appearance with CSS using element, class and id selectors and common properties.
An SQA National 5 Computing Science answer on HTML and CSS, covering how HTML elements build the structure and content of a page including headings, paragraphs, images and hyperlinks, and how CSS controls appearance using element, class and id selectors with common properties such as colour, font and size.
Reviewed by: AI editorial process; not yet individually human-reviewed
Have a quick question? Jump to the Q&A page
Jump to a section
What this key area is asking
The SQA wants you to build the content of a web page with HTML elements, including hyperlinks, and to control its appearance with CSS using element, class and id selectors and common properties.
HTML: building the content
HTML describes what is on the page: a heading, some paragraphs, an image, a list, a link. Most elements have an opening tag and a matching closing tag with the content in between; the browser reads these tags to display the page.
Hyperlinks
The two essential parts are the href (where the link goes) and the link text (what the user clicks). A link can point to another page in the same site (fixtures.html) or to an external website (a full web address).
CSS: controlling the appearance
CSS describes how the page looks, kept separate from the HTML that describes what is on it. This separation means you can change the whole look of a site by editing the CSS without touching the content.
CSS selectors: element, class and id
Choosing the right selector matters: use an element selector to style all of a kind at once, a class to style a chosen group, and an id to style one unique element. This is a frequently examined distinction.
Why HTML and CSS matter
Separating content (HTML) from appearance (CSS) is the core idea of modern web development. HTML provides the structure and the hyperlinks that connect the site; CSS provides a consistent look that can be changed in one place. Understanding the selectors lets you apply styles precisely - to everything, to a group, or to a single element.
How this key area is examined
Questions ask you to write HTML for content or a hyperlink, read HTML or CSS and say what it produces, or explain the difference between element, class and id selectors. The reliable marks come from correct tags with closing tags, a hyperlink with the right href and link text, and matching each CSS selector to what it targets (all of a type, a class, or one id).
For the official course specification
The SQA publishes the full National 5 Computing Science course specification, specimen question papers and coursework tasks at sqa.org.uk. Always revise from the current specification and SQA past papers, because question style and terminology are board-specific.
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 N5 style3 marksWrite the HTML to create a hyperlink with the text 'Fixtures' that opens the page fixtures.html.Show worked answer →
Three marks for the anchor element, the href attribute and the link text.
HTML:
Markers reward the anchor tag a, the href attribute set to the correct page (fixtures.html), and the visible link text (Fixtures) between the opening and closing tags. Forgetting the href, or putting the text outside the tags, would lose marks. The closing tag should also be present.
SQA N5 style4 marksExplain the difference between an element selector and a class selector in CSS, and give one advantage of using a class.Show worked answer →
Two marks for the two selector types, one for an example, one for the advantage.
An element selector applies a style to every element of that type, for example styling all paragraphs with p { ... }.
A class selector applies a style only to elements given that class with class="...", for example .warning { ... } styles only elements with class="warning".
Advantage of a class: the same style can be applied to a chosen group of elements across the site without affecting every element of a type, giving more control and reuse.
Markers reward "element selector styles all elements of a type", "class selector styles only elements with that class", and a sensible advantage such as selective, reusable styling.
Related dot points
- Web analysis and design: identifying end-user and functional requirements, and designing the structure and page layouts of a website using a wireframe and a navigation structure.
An SQA National 5 Computing Science answer on web analysis and design, covering how to identify end-user and functional requirements for a website, how to design page layouts with a wireframe, and how to plan the navigation structure that links the pages together.
- JavaScript and media: adding interactivity with event-driven JavaScript (such as onmouseover, onmouseout and onclick), and using media files with appropriate standard file formats and compression, then testing and evaluating the website.
An SQA National 5 Computing Science answer on JavaScript and media, covering how event-driven JavaScript adds interactivity using events such as onmouseover, onmouseout and onclick, how media files (graphics, audio and video) use standard file formats and compression to manage file size, and how a website is tested and evaluated.
- Data types and structures: variables holding character, string, numeric (integer and real) and Boolean values, and the 1-D array as a structure for holding many values of the same type under one name.
An SQA National 5 Computing Science answer on data types and structures, covering the variable types of character, string, integer, real and Boolean, when each is chosen, and how a one-dimensional array stores many values of the same type under a single name accessed by an index.
- Design techniques: representing a program design with structure diagrams, flowcharts and pseudocode, and designing the user interface with a wireframe.
An SQA National 5 Computing Science answer on design techniques, covering how developers plan a program using structure diagrams, flowcharts and pseudocode, how to read and write each notation, and how a wireframe is used to design the layout of a user interface before coding begins.
- The iterative software development process: analysis, design, implementation, testing, documentation and evaluation, and why the process is iterative rather than strictly linear.
An SQA National 5 Computing Science answer on the software development process, covering the six stages of analysis, design, implementation, testing, documentation and evaluation, what is produced at each stage, and why the process is iterative so that developers loop back to earlier stages when problems are found.