So far, we have built our HTML page's scaffold. Everything works, but let us admit it: it is a little sad. Black and white, cramped together, anonymous font. Perfect for an obituary, less so for a modern web app.
Enter our friend CSS, the language giving web pages style, color and shape. If HTML is the skeleton, CSS is the clothing, expression and elegance.
✨ What is CSS?
CSS stands for Cascading Style Sheets. Introduced in the mid-1990s, when sites began needing appealing, consistent layouts alongside text and links. Before CSS, browsers more or less did as they pleased: imagine the chaos.
Today, CSS is the universal standard for styling web pages. It lets us:
- Change colors, fonts and spacing.
- Arrange elements in grids or rows.
- Handle animations, transitions and visibility.
- Make a site responsive, adapting to every screen.
🎯 Selectors: telling the browser "change this"
To style an element, we first select it. CSS works like this:
selettore {
property: value;
}For example:
h1 {
color: navy;
}The three most common selectors are:
- Element type:
p,h1,form. - Class, with a dot:
.box,.button-primary. - ID, with a hash:
#form-iscrizione.
1#titolo {
2 font-size: 24px;
3}
4
5.button {
6 background-color: black;
7 color: white;
8}When should you use each? A rule of thumb:
- A tag for generic styles applying to all elements of that type.
- A class for reusing styles across elements: the selector you will use 90% of the time.
- An ID for one specific element, because it must be unique on the page.
❔ How do you apply CSS in practice?
There are three ways to bring CSS into an HTML page.
1. Inline, directly on an element through its style attribute:
<p style="color: red;">Warning: the enemy is at the gates!</p>Simple and quick, but hard to reuse and clutters the code.
2. Internal, inside a <style> tag in <head>:
1<head>
2 <style>
3 p {
4 color: navy;
5 }
6 </style>
7</head>Fine for prototypes or individual pages; difficult to maintain as the page grows.
3. External, in a separate .css file connected with <link>:
<!-- in HTML -->
<link rel="stylesheet" href="stile.css" />1/* in stile.css */
2p {
3 color: darkgreen;
4}Reusable, clean, maintainable: this is the approach used in real projects, and the one we will use.
📦 The box model: everything is a box
In CSS, every element is a box, and every box has four layers:
- Content: text, an image, whatever is inside.
- Padding: internal space between content and border.
- Border: the box's edge.
- Margin: external space toward other elements.
Understanding the box model is essential for alignment, spacing and layout. When an element "does not move as expected", nine times out of ten the answer is here: inspect it in DevTools and look at the box diagram in Elements.
📐 Flexbox: your layout ally
Layouts once relied on float and manually calculated margins: a nightmare. Flexbox arranges elements in rows or columns, centers them easily and controls spacing and responsive behavior.
1.container {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5}Headers, cards, footers, forms: Flexbox handles almost any layout.
📱 Media queries: adapting to every screen
Media queries change styles according to screen size:
1@media (max-width: 600px) {
2 .form-container {
3 flex-direction: column;
4 }
5}This makes a site responsive: usable on a desktop monitor or a phone on the subway.
🛠️ CSS frameworks: why reinvent everything?
Writing CSS from scratch is excellent for learning, but can become tiring on large projects. CSS frameworks provide ready-made classes. One widely used example is Tailwind CSS, following a utility-first approach: compose styles from predefined classes rather than writing custom rules.
<button class="bg-black text-white py-2 px-4 rounded">
Invia
</button>No CSS files to write: classes do everything. For now, though, no frameworks: learn the basics before choosing shortcuts.
💡 Dressing the Night's Watch form
Return to last chapter's form and bring it to life with plain CSS. Rewrite index.html with classes. Notice a detail: the makeshift <br /> line breaks disappear. CSS now handles spacing properly.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8" />
5 <title>Arruolamento Guardiani della Notte</title>
6 <!-- link to the stylesheet -->
7 <link rel="stylesheet" href="guardiani.css" />
8</head>
9<body>
10 <h1 id="titolo-pagina">Night’s Watch recruitment form</h1>
11
12 <form class="form-dark">
13 <label for="name">First name:</label>
14 <input type="text" id="name" name="name" class="campo" required />
15
16 <label for="lastname">Last name:</label>
17 <input type="text" id="lastname" name="lastname" class="campo" required />
18
19 <label for="email">Email:</label>
20 <input type="email" id="email" name="email" class="campo" required />
21
22 <label>
23 <input type="checkbox" name="oath" required />
24 Accetto di servire fino alla morte 🧊
25 </label>
26
27 <button class="btn-invio">Join the Watch</button>
28 </form>
29</body>
30</html>Create guardiani.css in the same folder:
1/* the page: a dark background worthy of the Wall */
2body {
3 background-color: #1a1a1a;
4 font-family: sans-serif;
5}
6
7/* ID selector */
8#titolo-pagina {
9 text-align: center;
10 font-size: 32px;
11 color: #f2f2f2;
12}
13
14/* class selector: the form */
15.form-dark {
16 background-color: #2e2e2e;
17 padding: 20px;
18 border-radius: 8px;
19 max-width: 500px;
20 margin: 40px auto;
21 color: white;
22}
23
24/* text inputs */
25.campo {
26 display: block;
27 width: 100%;
28 margin-top: 8px;
29 margin-bottom: 16px;
30 padding: 8px;
31 background: #444;
32 border: none;
33 border-radius: 4px;
34 color: white;
35}
36
37/* the button */
38.btn-invio {
39 display: block;
40 margin-top: 16px;
41 background-color: #000;
42 color: white;
43 padding: 10px 16px;
44 border: none;
45 border-radius: 6px;
46 cursor: pointer;
47}
48
49.btn-invio:hover {
50 background-color: #222;
51}Reload in the browser: dark, serious, readable. A look worthy of the Night's Watch. Notice .btn-invio:hover: :hover is a pseudo-class, a style activated only while the mouse is over the element. Your first taste of interactivity without a line of JavaScript.
✅ Conclusion
CSS turns a rough page into a polished one, and a readable page into a memorable one. It is more than aesthetics: usability, accessibility, identity. Over time you will use it as a visual language, and discovering your power to position, animate and transform elements will be a lot of fun.
In the next chapter, JavaScript arrives, the frontend's interactive soul. Now that the page has structure and style, it is time to make it move. ⚡