CSS: Making Things Beautiful

Selectors, properties, colours, the box model — how to style a web page.

From plain to polished

CSS — Cascading Style Sheets — is what turns bare HTML into something worth looking at. Colours, fonts, spacing, borders, backgrounds, layout: all CSS. The model is simple — you select some HTML elements, then declare how they should look.

h1 {
    color: navy;
    font-size: 48px;
    text-align: center;
}

Read it as a sentence: "for every h1, make the text navy, 48 pixels tall, and centred." The part before the braces is the selector (what to style); inside the braces are declarations, each a property and a value separated by a colon and ended with a semicolon. That structure never changes, so once you've seen one rule you can read them all.

Connecting CSS to HTML

The professional way to add CSS is a separate .css file linked from the HTML's <head>. This keeps structure and style cleanly apart:

<head>
    <link rel="stylesheet" href="style.css">
</head>

Keeping HTML and CSS in separate files mirrors the "content versus appearance" split from chapter one. You can restyle an entire site by editing one CSS file, without touching the HTML at all — a powerful separation of concerns.

Selectors: choosing what to style

You can target elements three main ways, and you'll mix them constantly:

/* By tag name — every paragraph */
p {
    line-height: 1.6;
}

/* By class — any element with class="highlight" */
.highlight {
    background-color: yellow;
}

/* By id — the single element with id="hero" */
#hero {
    padding: 40px;
}

The class selector (a dot) is the one you'll use most. You add class="highlight" to as many HTML elements as you like, and the style applies to all of them. Classes are reusable; ids are unique to one element. Favour classes — they're the flexible workhorse of real-world CSS.

The box model: the key to layout

Here's the concept that unlocks CSS layout, and the one beginners most need to internalise: every element is a rectangular box, and that box has four layers from the inside out — content, padding, border, and margin.

.card {
    width: 300px;
    padding: 20px;      /* space INSIDE the box, around content */
    border: 2px solid gray;
    margin: 16px;       /* space OUTSIDE the box, pushing others away */
}

The difference between padding and margin trips up everyone at first, so fix it firmly: padding is space inside the box (between content and border); margin is space outside (between this box and its neighbours). When two elements are too close, you want margin. When text is cramped against an edge, you want padding. Almost every spacing question in CSS comes down to this distinction.

Colours, fonts, and a styled card

CSS gives you rich control over colour (by name, hex code, or rgb) and typography. Let's style a simple card to see it come together:

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: #f4f4f8;
    color: #333;
}

.card {
    background-color: white;
    border-radius: 12px;          /* rounded corners */
    padding: 24px;
    margin: 20px auto;            /* auto centres it horizontally */
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);  /* soft shadow */
}

.card h2 {
    color: #2563eb;
    margin-bottom: 8px;
}

Small touches — a subtle shadow, rounded corners, generous padding, a calm background — are the difference between an amateur page and a professional one. Notice .card h2: that's a descendant selector, styling only h2 elements that sit inside a card. Combining selectors like this gives you precise control.

Why "cascading"?

The "C" in CSS is worth understanding. When multiple rules target the same element, CSS resolves conflicts by specificity (more specific selectors win — an id beats a class beats a tag) and by order (later rules override earlier ones). When a style "isn't applying," the cause is almost always another, more specific rule overriding it. Knowing the cascade turns that frustration into a quick diagnosis. With styling basics down, the next chapter tackles the part everyone finds hardest — arranging elements on the page with modern layout tools.

Reading mode · scroll to read at your own pace

Finished "CSS: Making Things Beautiful"?

Mark this chapter complete so you can pick up exactly where you left off. Your progress saves locally — sign in to sync across devices.

Was this chapter clear?

Try it yourself — open the Code Playground15+ languages — Python, JavaScript, Java, C++, SQL & more — full IDE-style editor, instant run. Your code is auto-saved per language.Open