HTML and CSS for Beginners: Build Your First Web Page

1About This Guide

see results instantly in a browser. This guide takes you from nothing to a styled web page. By the end

2HTML and CSS: The Two Jobs

Think of a web page like a house. HTML is the structure — the walls and rooms (headings, paragraphs,

images). CSS is the decoration — the paint, furniture, and layout (colours, fonts, spacing). You need

3Your First HTML Page

Save it as index.html , open it in a browser, and you have a web page.

4Essential HTML Tags

This section provides key insights and practical guidance.

• <h1> to <h6> — headings.
• <div> — a container for grouping.

5Adding CSS

This section provides key insights and practical guidance.

6CSS Selectors

Selectors choose what to style: by tag ( p ), by class ( .note ), or by id ( #title ). Classes are the

7The Box Model

Every element is a box with content, padding (space inside), border, and margin (space outside).

Understanding the box model is the key to controlling spacing — the thing beginners struggle with most.

• Forgetting to close tags — every <p> needs a </p> .
• Inline styles everywhere — keep CSS separate and use classes.
• Fighting spacing — learn the box model early.
• Not testing in the browser as you go.
• HTML is structure; CSS is style.