What is CSS?

🎨 Chapter 1 — What is CSS?

HTML gives a webpage its structure — headings, paragraphs, lists, links. CSS gives it its appearance — colours, fonts, spacing, layout. This chapter introduces what CSS is, how it relates to HTML, and the three different ways you can attach styles to a page. By the end you will have written working CSS using all three methods and understand when to reach for each one.

1 — What is CSS?

CSS stands for Cascading Style Sheets. It is the language used to describe how HTML elements should be displayed — their colours, sizes, fonts, spacing, and layout. Without CSS, every webpage would look like a plain document: black text on a white background, with browser-default fonts and no visual hierarchy.

HTML

Structure and meaning

HTML defines what content is — a heading, a paragraph, an image, a list. It is concerned with semantics and structure, not appearance.

CSS

Presentation and style

CSS defines how that content looks — the font, colour, size, spacing, and position of every element on the page.

JavaScript

Behaviour and interaction

JavaScript adds dynamic behaviour — responding to clicks, fetching data, animating elements. The third pillar of the web alongside HTML and CSS.

The Browser

Brings it all together

The browser reads all three, builds a visual representation of the page, and handles user interaction. CSS is applied by the browser's rendering engine.

Separating structure (HTML) from presentation (CSS) is one of the most important principles of web development. It means you can completely redesign the look of a website by changing only the CSS, without touching the HTML — and you can apply the same stylesheet to thousands of pages at once.

Why "Cascading"? The word "cascading" refers to the way CSS resolves conflicts when multiple rules target the same element. Styles flow down from multiple sources — browser defaults, external files, and inline rules — and a specific set of rules determines which one wins. You will explore the cascade in detail in the Intermediate course; for now, just know the name has a precise meaning.

2 — CSS Syntax: Anatomy of a Rule

Everything in CSS is built from rules. A rule targets one or more HTML elements and declares how they should look. Here is the anatomy of a CSS rule:

h1 { color: #4f8ef7; font-size: 2rem; margin-bottom: 1rem; }

Selector — targets the element(s) to style (h1)

Property — the aspect to change (color, font-size)

Value — what to set it to (#4f8ef7, 2rem)

Declaration — one property + value pair, ending in ;

The selector identifies which HTML element(s) the rule applies to.
Declarations sit inside curly braces { }.
Each declaration is a property and a value, separated by a colon :.
Each declaration ends with a semicolon ;. The last one is technically optional, but always include it — it prevents errors when you add more declarations later.
A rule can contain as many declarations as you like.

Multiple selectors, multiple declarations

You can style multiple elements with one rule by separating selectors with a comma.

/* Style all h1, h2, and h3 headings at once */
h1, h2, h3 {
    font-family: Georgia, serif;
    color: #ffffff;
    line-height: 1.3;
}

/* Style paragraph text separately */
p {
    font-size: 1rem;
    color: #a0a4b8;
    margin-bottom: 1rem;
}

💡 CSS is not case-sensitive — but by convention, always write property names and values in lowercase. It keeps your code consistent and readable.

3 — Method 1: Inline CSS

Inline The simplest way to add CSS is directly on an HTML element using the style attribute. The value of the attribute is a list of CSS declarations — exactly what you would put inside the curly braces of a rule, but without the selector (you are already on the element).

🌐 HTML — Inline CSS examples

<h1 style="color: #4f8ef7; font-size: 2rem;">Hello, CSS!</h1>

<p style="color: #7ecfa0; font-style: italic;">This paragraph is green and italic.</p>

<button style="background-color: #4f8ef7; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">
    Click me
</button>

Notice: multiple declarations are still separated by semicolons, all inside a single set of double quotes.

When to use inline CSS

Quick testing — when you want to see the effect of a style immediately without touching a stylesheet.
Email HTML — many email clients strip external and internal CSS, so inline is often required for HTML emails.
Dynamic styles via JavaScript — when JavaScript needs to set a specific style value on an element at runtime.

⚠️ Inline CSS has serious drawbacks. It mixes presentation with structure, making HTML hard to read. It cannot be reused — if you want 50 paragraphs to look the same, you must copy the same style attribute 50 times. It is also very difficult to override with a stylesheet. For anything beyond a quick test or a special case, avoid inline CSS.

4 — Method 2: Internal CSS

Internal Internal CSS lives inside a <style> element, placed in the <head> section of your HTML file. You write full CSS rules here — selectors, curly braces, and all — and they apply to every element on that page.

🌐 HTML — Internal CSS inside <head>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>

    <style>
        /* These rules apply to the whole page */

        body {
            background-color: #0d0d0d;
            color: #e2e4ec;
            font-family: Georgia, serif;
            padding: 20px;
        }

        h1 {
            color: #4f8ef7;
            border-bottom: 2px solid #4f8ef7;
            padding-bottom: 8px;
        }

        p {
            line-height: 1.75;
            margin-bottom: 1rem;
        }
    </style>

</head>
<body>
    <h1>Hello, Internal CSS!</h1>
    <p>This paragraph is styled by the rules above.</p>
</body>
</html>

The <style> tag belongs in <head>. Placing it in <body> works in most browsers but is invalid HTML.

When to use internal CSS

Single-page projects — a page that will never need its styles shared with another page.
Prototyping and demos — when you want a self-contained HTML file with no external dependencies.
Email templates — in combination with inline styles, some email clients support <style> in <head>.

Better than inline, but still limited. Internal CSS is far more maintainable than inline — you write a rule once and it applies everywhere on the page. But it still does not scale across multiple pages. Every HTML file gets its own <style> block, with no sharing between them.

5 — Method 3: External CSS

External An external stylesheet is a separate .css file containing nothing but CSS rules. You link it to an HTML page using a <link> element in the <head>. The same stylesheet can be linked from as many HTML pages as you like — change the stylesheet once and every page updates instantly.

🎨 CSS — styles.css (the stylesheet file)

/* styles.css — shared styles for the whole website */

body {
    background-color: #0d0d0d;
    color: #e2e4ec;
    font-family: Georgia, serif;
    margin: 0;
    padding: 20px 40px;
}

h1 {
    color: #4f8ef7;
    font-size: 2rem;
    border-bottom: 2px solid #4f8ef7;
    padding-bottom: 8px;
}

p {
    line-height: 1.75;
    max-width: 700px;
}

a {
    color: #7ab8ff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

🌐 HTML — Linking the external stylesheet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>

    <!-- Link the external stylesheet -->
    <link rel="stylesheet" href="styles.css">

</head>
<body>
    <h1>Hello, External CSS!</h1>
    <p>All pages that link styles.css will share these styles.</p>
</body>
</html>

The href is a relative path from the HTML file to the CSS file. If they are in the same directory, just the filename is enough.

Linking multiple stylesheets

You can link more than one stylesheet to a page — the browser applies them all. This is commonly used to separate a site-wide base stylesheet from a page-specific one:

Multiple <link> tags

<link rel="stylesheet" href="base.css">       <!-- site-wide styles -->
<link rel="stylesheet" href="blog.css">       <!-- blog-specific styles -->
<link rel="stylesheet" href="dark-theme.css">  <!-- theme override -->

💡 Browser caching. When a browser downloads an external CSS file, it caches it. The next page that links the same file loads it from the cache — not from the server. This makes external CSS faster for multi-page sites than internal CSS, which must be re-downloaded on every page.

6 — Comparing the Three Methods

Method	Where it lives	Reusable across pages?	Best for
Inline	`style` attribute on an element	No — one element only	Quick tests, email HTML, JS-driven styles
Internal	`<style>` tag in `<head>`	No — one page only	Single-page projects, self-contained demos
External	Separate `.css` file	Yes — link from any page	Almost everything: multi-page sites, real projects

In practice: the vast majority of web development uses external stylesheets. You will reach for internal CSS occasionally for isolated demos or single-file deliverables, and inline CSS rarely — usually only when JavaScript is setting a style dynamically. When in doubt, write an external stylesheet.

7 — CSS Comments

CSS comments are written with /* to open and */ to close. Everything between those markers is ignored by the browser. Unlike HTML comments () or JavaScript comments (//), CSS has only one comment syntax and it works for both single-line and multi-line comments.

🎨 CSS — Comment styles

/* Single-line comment */

h1 {
    color: #4f8ef7;  /* inline comment after a declaration */
}

/* ─────────────────────────────────────────────
   Section header: Typography
   ───────────────────────────────────────────── */

p {
    font-size: 1rem;
    /* font-weight: bold; */  /* commented-out rule — not applied */
}

Commenting out a declaration (/* property: value; */) is a handy way to temporarily disable a style during development without deleting it.

8 — Your Best Friend: Browser DevTools

Every modern browser includes developer tools that let you inspect and edit CSS live in the browser. This is an essential skill — you will use DevTools constantly while writing CSS.

Opening DevTools

Works in Chrome, Firefox, Edge, and Safari.

Right-click any element on the page → "Inspect"

Or use keyboard shortcuts:
  F12                          — open DevTools
  Ctrl + Shift + I             — open DevTools (Windows/Linux)
  Cmd + Option + I             — open DevTools (Mac)
  Ctrl + Shift + C             — open DevTools and pick an element

In the DevTools Elements panel (Chrome/Edge) or Inspector (Firefox), you can:

Click any element to see exactly which CSS rules are applied to it.
See which rules are overriding others (shown with a strikethrough).
Edit property values live — changes appear instantly on the page (but are lost on refresh).
Toggle declarations on and off with a checkbox.
Add new declarations directly in the browser.

💡 DevTools is your CSS scratchpad. Experiment with values in DevTools first, then copy the working styles into your actual stylesheet. This saves enormous time compared to editing a file, saving, and refreshing on every change.

✏️ Exercises

Create a simple HTML file for each exercise and open it in your browser to see the results. Try to complete each one before looking at the sample solution.

Exercise 1

Using only inline CSS, create an HTML page with a heading and two paragraphs. Style the heading so it is blue, and style each paragraph a different colour. Give one paragraph a larger font size than the other.

Hint: use the style attribute directly on each element. Use color for text colour and font-size for size (e.g. 1.2rem or 18px).

Sample Solution

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Exercise 1</title></head>
<body>
    <h1 style="color: #4f8ef7;">My Styled Heading</h1>

    <p style="color: #7ecfa0; font-size: 1.2rem;">
        This paragraph is green and a bit larger than normal.
    </p>

    <p style="color: #c9a8ff; font-size: 0.9rem;">
        This paragraph is purple and slightly smaller.
    </p>
</body>
</html>

Exercise 2

Rewrite Exercise 1 using internal CSS in a <style> block. Remove all style attributes from the HTML elements. The page should look identical but the styles should now live in the <head>.

Hint: use element selectors (h1, p) in your rules. To style the two paragraphs differently you will need to give them id or class attributes — try id="intro" and id="detail" and select them with #intro and #detail in CSS.

Sample Solution

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exercise 2</title>
    <style>
        h1       { color: #4f8ef7; }
        #intro  { color: #7ecfa0; font-size: 1.2rem; }
        #detail { color: #c9a8ff; font-size: 0.9rem; }
    </style>
</head>
<body>
    <h1>My Styled Heading</h1>
    <p id="intro">This paragraph is green and a bit larger than normal.</p>
    <p id="detail">This paragraph is purple and slightly smaller.</p>
</body>
</html>

The #intro and #detail selectors are ID selectors — they target elements with a matching id attribute. Selectors are covered in full in Chapter 2.

Exercise 3

Take your Exercise 2 page and convert it to use external CSS. Move all the CSS into a file called styles.css in the same directory. Update the HTML to link to it using a <link> tag. The page should still look identical.

Hint: create styles.css with just the CSS rules (no HTML). In your HTML file, replace the <style> block with: <link rel="stylesheet" href="styles.css">

styles.css

h1       { color: #4f8ef7; }
#intro  { color: #7ecfa0; font-size: 1.2rem; }
#detail { color: #c9a8ff; font-size: 0.9rem; }

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exercise 3</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>My Styled Heading</h1>
    <p id="intro">This paragraph is green and a bit larger than normal.</p>
    <p id="detail">This paragraph is purple and slightly smaller.</p>
</body>
</html>

Exercise 4

Create a page with a heading, a paragraph, and a button. Use an external stylesheet to style all three: the heading should have a coloured bottom border, the paragraph should have a comfortable line height and a maximum width, and the button should have a background colour, white text, rounded corners, and no default browser border. Open the page in your browser and then use DevTools to experiment — try changing the button's background colour live in the inspector.

Hint: the CSS properties you will need are border-bottom, line-height, max-width, background-color, color, border-radius, border, and padding.

styles.css

body {
    font-family: Georgia, serif;
    padding: 40px;
    background-color: #0d0d0d;
    color: #e2e4ec;
}

h1 {
    color: #4f8ef7;
    border-bottom: 2px solid #4f8ef7;
    padding-bottom: 8px;
}

p {
    line-height: 1.75;
    max-width: 600px;
    color: #a0a4b8;
}

button {
    background-color: #4f8ef7;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
}

The cursor: pointer declaration changes the mouse cursor to a pointing hand when hovering over the button — a small but important UX touch that signals the element is clickable.