HTML & CSS Basics (Years 7–11) — Computer Science

HTML tags and elements provide a page's structure and content; CSS rules of selector, property and value provide its style. How the two work together to build a page.

Every web page you have ever seen is built from two languages working as a team. One decides what is on the page — the headings, paragraphs, links and pictures. The other decides how it looks — the colours, fonts and layout. Once you can tell these two jobs apart, building your own page stops being mysterious and starts being fun.

Why this matters: HTML and CSS are the raw materials of the entire web. Knowing which language does structure and which does style lets you read any page's code, fix a wonky layout, and build sites of your own — and it is a skill exam boards and employers both value.

HTML gives a page its structure

HTML (HyperText Markup Language) provides the structure and content. You mark up content using tags written in angle brackets. Most content sits between an opening tag and a matching closing tag (the closing tag has a slash). A tag plus its content is called an element. For example <h1>Welcome</h1> is a heading; <p>Some text</p> is a paragraph; <a> makes a link and <img> adds an image.

An element = opening tag + content + closing tag.

Tags can carry extra information called attributes, written inside the opening tag as name="value". A link needs to know where to go, so <a href="https://triomatic.co.uk">Visit</a> uses the href attribute. An image needs to know which file to show and a text description, so <img src="logo.png" alt="Triomatic logo"> uses src and alt.

A page is a tree of nested elements

Elements nest inside each other, forming a tree from <html> downward.

A real page nests elements inside each other. The whole page lives inside <html>. Inside that, <head> holds hidden information (like the page title), while <body> holds everything you see — the headings and paragraphs. This nesting forms a tidy tree, which is exactly how the browser reads the page.

CSS gives a page its style

A CSS rule: a selector chooses elements, then property: value styles them.

CSS (Cascading Style Sheets) controls the appearance. You write rules. Each rule starts with a selector that chooses which elements to style, then a pair of curly braces holding one or more declarations. A declaration is a property and a value, separated by a colon and ended with a semicolon: h1 { color: green; } makes every <h1> green. Other common properties set the font, size, spacing and layout.

	HTML	CSS
Job	Structure & content	Style & appearance
Built from	Tags / elements	Rules (selector { property: value; })
Example	<p>Hello</p>	p { color: blue; }

Working together

HTML is the skeleton; CSS is the clothes; together they make the page.

The two languages are a partnership: HTML builds the skeleton and CSS dresses it. The same HTML page can look completely different just by swapping the CSS — which is why designers can restyle a whole site without rewriting its content.

Worked example: The HTML <p class="note">Hello</p> creates a paragraph and labels it with the class "note". The CSS rule .note { color: red; font-size: 20px; } then finds that paragraph and makes its text red and larger. HTML supplied the content; CSS supplied the look.

Common mistake: Forgetting the closing tag or the slash in it. <p>Hi<p> is wrong; it should be <p>Hi</p>. Missing closing tags are one of the commonest reasons a page displays incorrectly.

Tip: Keep your CSS in a separate file (a stylesheet) rather than mixed into the HTML. It keeps structure and style tidily apart, and one stylesheet can then style every page of a site.