HTML and CSS in Year 4 of high school

End of September 2026: in Year 4 of the applied sciences high school (the Italian liceo scientifico, opzione scienze applicate) the computer science syllabus restarted a few weeks ago, and the first block of the year is almost always the same — HTML and CSS, before JavaScript, before the entity-relationship model and SQL that come later. If your teacher opened the year with tags and selectors, the first test — often a practical computer-lab exercise together with a theory part — arrives in five to eight weeks, so between late October and November. This post prepares you for that, not for “learning to build websites”: there are very specific things that a school test insists on, and they are different from what an online tutorial counts.

What the test really asks

The Year 4 applied sciences syllabus, in its start-of-year part, covers HTML/CSS and the basics of JavaScript; the next block is the E-R model, the relational schema, normalisation, DBMSs and SQL. On HTML/CSS, the typical test asks for three things:

Reading an HTML page and answering questions on structure, tags and attributes — often by finding an error in a given fragment of code.
Predicting the effect of a piece of CSS, in particular when several rules compete for the same element: here it is not enough to know “what” a property does, you must know which rule wins.
Writing a page from a brief, in the lab, with semantic tags and a minimum of layout — often with flexbox to align two or three blocks.

These are three different skills: reading other people’s code, predicting a cascade of rules, writing from scratch. A review that sticks to “the main tags” covers only one of them.

The structure of an HTML5 document

Every HTML5 page starts from the same skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <section>...</section>
  </main>
  <footer>...</footer>
</body>
</html>

<!DOCTYPE html> tells the browser that the document is HTML5, and always goes on the first line. Inside <head> is everything that is not directly visible on the page: <meta charset="UTF-8"> (without it, accented letters break), the <title> that appears in the browser tab, and the link to the stylesheet. Inside <body> is everything you see.

Semantic tags — <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> — tell the browser (and whoever reads the code) what that part of the page represents, not just how it looks. A generic <div> works just the same on screen, but in a test a teacher almost always asks you to use the right semantic tag: <nav> for the menu, <article> for a self-contained piece of content, not a <div class="nav"> that does the same thing without saying so.

Attributes, links, images, lists, tables, forms

An attribute adds information to a tag, inside the opening tag: <a href="page.html">text</a>. href is the attribute, "page.html" is its value. The attributes that come up most often in tests:

<a href="..."> for links — href can point to another page, to an anchor in the same page (href="#section") or to an external address.
<img src="photo.jpg" alt="description"> for images — alt is not decorative: it is there for accessibility and for when the image fails to load, and a teacher checks it.
<ul>/<ol> with <li> for lists — <ul> unordered, <ol> ordered (numbered).
<table> with <tr> (row), <th> (header), <td> (cell) for tables.
<form> with <input>, <label>, <button> for forms — the type attribute of <input> changes everything (text, email, checkbox, submit…), and every <input> should have a <label> linked through for/id.

CSS: the three ways of adding it

There are three ways to connect CSS to a page, and a theory question almost always asks you to tell them apart:

Inline, inside the style attribute of a single tag: <p style="color: red;">text</p>. It has the highest priority of all, but it is discouraged because it mixes content and style and is not reusable.
Internal, inside a <style> tag in the document’s <head>. Useful for single pages or quick examples.
External, in a separate .css file, linked with <link rel="stylesheet" href="style.css"> in the <head>. It is the right way for a real site: one file, reusable across several pages.

Selectors, specificity and the cascade

A selector says which elements a CSS rule applies to:

p { color: black; }          /* type selector: all <p> elements */
.highlight { color: red; }   /* class selector: elements with class="highlight" */
#title { color: blue; }      /* id selector: the one element with id="title" */
nav a { color: green; }      /* descendant selector: the <a> elements inside a <nav> */

The point where most marks are lost in tests is specificity: when two rules compete for the same property on the same element, it is not “the last one written” that wins — the more specific rule wins. The order of strength, from weakest to strongest, is: type selector < class selector < id selector < inline style. With equal specificity, then yes, the last rule declared in the stylesheet wins.

Example: if you have p { color: black; } and further down .highlight { color: red; }, and a <p class="highlight"> — red wins, because the class is more specific than the type, regardless of order. But if you had two rules with the same specificity (for example two different class selectors that both touch the same element), then order counts: the one written lower down in the file wins.

The box model

Every HTML element, on screen, is a rectangle made of four concentric layers, from the centre outwards: content, padding (the inner space, between content and border), border, margin (the outer space, between this element and the others).

With box-sizing: content-box (the default value), width and height refer only to the content: padding and border are added on top. With box-sizing: border-box, width and height include padding and border, and the content shrinks accordingly.

This is the calculation a test almost always asks for:

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  box-sizing: content-box;
}

With content-box, the total width of the outer edge of the border is content + padding on both sides + border on both sides:

200 + 2 \cdot 20 + 2 \cdot 5 = 250 px

The margin (10 px per side) is not part of the box itself, but of the space the box “occupies” relative to neighbouring elements: $250 + 2 \cdot 10 = 270$ px. If instead the same rule had box-sizing: border-box, the 200 px would already be the total width (content + padding + border), and the content would shrink to $200 - 2 \cdot 20 - 2 \cdot 5 = 150$ px.

Display and basic flexbox

Every HTML element has a default display value: block elements (<div>, <p>, <section>…) take up all the available width and break onto a new line before and after; inline elements (<span>, <a>, <strong>…) take up only the space of their content and sit in line with the surrounding text.

Flexbox is for aligning several elements in a row or a column without the tricks of the past (floats, absolute positioning). The basics:

.container {
  display: flex;
  justify-content: space-between; /* distribution along the main axis */
  align-items: center;            /* alignment along the cross axis */
  gap: 16px;                      /* space between the items */
}

display: flex on the container turns its direct children into flexible items, in a row by default. justify-content controls the horizontal distribution (in the most common case), align-items the vertical one. For a school test, knowing how to align three boxes in a row with flex and justify-content: space-between covers most of what is asked in the lab.

Exercises in the test format

1. Find the error. What is wrong with this HTML?

<ul>
  <li>First item
  <li>Second item</li>
</ul>
<div id="box1">Content</div>
<div id="box1">More content</div>

Solution: the first <li> is not closed (the </li> is missing before the second <li>) — browsers often “fix” it themselves and show the page anyway, but it is invalid code and in a test it must be flagged. The second error is more serious: the id box1 is used twice, and an id must be unique on the page — for styles or elements that repeat you use class, not id.

2. Predict the final colour. Given this CSS and <p class="text" id="intro">Hello</p>:

p { color: black; }
.text { color: blue; }
#intro { color: red; }
p.text { color: green; }

Solution: #intro { color: red; } wins. An id selector has higher specificity than any combination of classes and types, so it beats even p.text, which is more specific than .text alone or p alone.

3. Calculate the total width. A box has width: 300px, padding: 15px, border: 3px solid, box-sizing: content-box. What is the total visible width (border included, margin excluded)?

300 + 2 \cdot 15 + 2 \cdot 3 = 336 px

4. Write a page from a brief. “Create a page with a header containing the site title, a navigation menu with three links, a main block with two paragraphs, and a footer with the copyright. Align the three menu links in a row with even spacing between them.” This is exactly the kind of brief you get in a practical test: it requires semantic structure (header, nav, main, footer) plus one line of flexbox (display: flex; justify-content: space-between;) on the container of the links.

Typical mistakes that cost marks

Unclosed or badly nested tags. <b><i>text</b></i> is incorrect nesting: tags must be closed in the reverse order to that in which they were opened (<b><i>text</i></b>). A forgotten tag often does not “blow up” the page — the browser is tolerant — but in a test it is still an error.
Repeated ids. An id is unique by definition; if you need to apply the same style to several elements, use class.
Mixing up class and id in the CSS selector: .name for classes, #name for ids — swapping them is the most common syntax mistake in a practical test, and the CSS simply does not apply, with no visible error on the page.
Forgetting box-sizing and being surprised that a box “overflows” its container: with content-box (the default) padding and border are always added to the declared width.

How to tell whether you are ready

Try this, with the book closed: write the complete HTML5 skeleton from scratch with the semantic tags, then write three CSS rules of different specificity on the same element and predict aloud which one wins before checking. If you manage without hesitating, and can explain the difference between content-box and border-box with a number to hand, you are in the right position for the test.

There is no dedicated practice test on this topic yet in the category of high-school practice tests. For the block that comes right after HTML/CSS, the E-R model and SQL, the reference post is Databases: from the ER model to the relational schema and SQL: it is written for the university exam, but the basic concepts — entities, relationships, keys — are the same ones you will see this year.

For the next step, dynamic interfaces, I have written about React from scratch; if instead code in general still has to be built up, start from Python from scratch.

If HTML and CSS still look to you like a set of unconnected rules rather than a method, the computer science page explains how we work on these topics in lessons, and a free introductory call is the simplest way to find out where to start before the test.

HTML and CSS in Year 4: the first test