What HTML & CSS is
HTML and CSS are the two languages every web page is written in. HTML (HyperText Markup Language) says what is on the page and what each piece is, a heading, a paragraph, a link, by wrapping content in tags. CSS (Cascading Style Sheets) says how those pieces look and where they sit. Neither runs step-by-step instructions the way a programming language does; writing them is more like describing a document, which makes the first page quick and the hundredth layout surprisingly subtle.
Where HTML & CSS is used
- Every web page you have ever opened
- Whatever framework produced it, what reaches the browser is HTML for the content and CSS for the look; reading them by hand is how you understand what React or Vue is doing.
- Content and marketing sites
- Blogs, documentation and company sites are often written in Markdown or a content management system and turned into HTML. Knowing HTML and CSS lets you fix the layout when the tool gets it wrong.
- Email newsletters
- Many email programs ignore modern CSS, so newsletters are still built with older, more limited techniques, and someone has to know them.
- Apps built with web technology
- Editors such as VS Code draw their whole interface with HTML and CSS inside a browser engine, and many mobile apps embed a web view for parts of their screens.
- Design and prototyping
- A mock-up that looks and behaves like the real page can be built in a day with plain HTML and CSS, which is why many designers learn enough to build what they draw.
Your first HTML & CSS program
Saved as index.html. You can paste it into the playground to see it rendered, or follow the steps in the next section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My first page</title>
<style>
body { font-family: sans-serif; max-width: 40em; margin: 2em auto; }
h1 { color: darkslateblue; }
p { line-height: 1.5; }
a { color: crimson; }
</style>
</head>
<body>
<h1>Hello, web</h1>
<p>This page was written by hand in a text editor.</p>
<a href="https://developer.mozilla.org/">Read the HTML reference at MDN</a>
</body>
</html>What the browser shows
The browser tab is titled "My first page".
A large, bold heading in dark slate blue reads: Hello, web
Beneath it, a paragraph in the default sans-serif font reads: This page was written by hand in a text editor.
Beneath that, an underlined crimson link reads: Read the HTML reference at MDN
Everything sits in a centred column about 640 pixels wide, with space above it and on either side.- Unlike a Python or JavaScript program, this file prints nothing. The browser reads it top to bottom, builds a tree of elements from the tags, applies the styles and draws the result; the output above describes that drawing.
- Line 1, the doctype, tells the browser to use modern standards rendering rather than a compatibility mode that imitates very old pages. Lines 2 and 19 wrap everything in the html element; lang tells screen readers which language to pronounce.
- Lines 3 to 13 are the head: information about the page that is not drawn on it. charset says the file is UTF-8, so accented letters display correctly; viewport tells a phone to lay the page out at its real width rather than pretending to be a desktop screen; title becomes the text on the tab.
- Lines 7 to 12 hold the CSS. Each rule is a selector naming which elements it applies to, then declarations in braces: property, colon, value. Line 8 gives the body a sans-serif font, a maximum width of 40em (about 640 pixels at the default font size) and margin: 2em auto, where the automatic side margins centre the column. Lines 9 to 11 set colours and line spacing.
- Lines 14 to 18 are the body, the content people see: h1 is a top-level heading, p a paragraph, and a an anchor (a link) whose href says where it goes. The browser gives these a default look, headings large and bold, links underlined, and your CSS layers on top.
Run HTML & CSS on your own computer
There is nothing to install and no build step. A text editor and the browser you already have are the whole toolchain, and they stay so for a long time.
Create the file
Open a plain-text editor (VS Code, Notepad++ or Sublime Text; Notepad also works), paste the page and save it as index.html. On Windows, check it has not become index.html.txt; on macOS, TextEdit saves rich text unless switched to plain text, so a code editor is simpler.
Open it in a browser
Double-click index.html, or drag it onto an open browser window. The address bar shows a path beginning with file:// rather than https://, which is fine: the browser is reading the file straight from your disk.
Edit, save, reload
Change the heading text, save, then reload the tab (F5, Ctrl+R, or Cmd+R on macOS). This save-and-reload loop is how all HTML and CSS work is done; there is nothing to compile and nothing to wait for.
Use the browser's developer tools
Right-click anything on the page and choose Inspect (Chrome, Edge and Firefox; Safari needs its Develop menu switched on). The Elements panel shows the page as a tree, and the Styles panel shows every rule applied to the selected element, overridden ones crossed out. You can change values live; nothing is saved to your file.
A local server, much later
Opening files directly is enough for HTML and CSS. A few JavaScript features refuse to run from a file:// address; when you reach them, any small local server will do. If Python is installed, this one line serves the current folder at http://localhost:8000.
Shellpython3 -m http.server
A learning order for HTML & CSS
Stages, not a timetable. Each one exists because the next would not make sense without it, and how long each takes depends on how much you write.
Stage 1. The anatomy of a page
- doctype, head and body
- headings and paragraphs
- links and images
- lists
- tags, attributes and nesting
- comments
Everything on the web is built from these. An hour here gives you a page you can open, and the habit of nesting elements properly saves days of confusion later.
Stage 2. Markup that means something
- semantic elements: header, nav, main, article, footer
- tables for tabular data
- forms, inputs and buttons
- alt text and accessible names
- validating your HTML
What an element is decides what screen readers, search engines and your own CSS can do with it. Choosing the right tag is most of the craft of HTML, and cheaper to learn before you have written a hundred divs.
Stage 3. CSS fundamentals
- selectors: type, class and id
- the cascade and specificity
- the box model: content, padding, border, margin
- colour and units: px, em, rem and %
- linking an external stylesheet
The cascade and the box model are the two ideas behind every CSS puzzle you will ever meet. Learn them slowly here and most later questions about why something looks the way it does answer themselves.
Stage 4. Layout
- display: block and inline
- Flexbox
- Grid
- positioning
- media queries and responsive design
- the viewport meta tag
Arranging things on a page is where most of the time goes and most of the frustration lives. Flexbox and Grid made it far saner than it once was, but each has a mental model worth learning deliberately.
Stage 5. Typography, images and polish
- web fonts
- responsive images with srcset
- hover, focus and other states
- transitions and simple animation
- custom properties (CSS variables)
- dark mode with prefers-color-scheme
Once the structure holds, this is what makes a page feel finished rather than merely correct. Focus states in particular matter to keyboard users and are easy to forget.
Stage 6. Real sites and what comes next
- a multi-page site with shared styles
- the developer tools, thoroughly
- testing in more than one browser
- image weight and loading speed
- a first taste of JavaScript
A site with several pages exposes everything a single page hides: repeated styles, broken links, slow images. It is also where you discover which parts need behaviour, and that is where JavaScript begins.
Mistakes beginners make in HTML & CSS
- Leaving a tag unclosed or nesting tags out of order
- The browser never stops with an error; it guesses what you meant and draws something, often a page where everything after a certain point is bold or inside a link, with the real mistake fifty lines above the symptom. The W3C validator at validator.w3.org lists every structural problem in a file.
- A rule that does not apply, and reaching for !important
- When two rules disagree, CSS picks a winner by specificity: an id outweighs a class, a class outweighs an element name, and an inline style beats all three; between equals, the later rule wins. !important overrides this once and creates a rule only another !important can beat. Check the Styles panel first; the crossed-out rules usually point at the cause.
- Building everything out of divs, or out of tables
- A div means nothing, so a page made only of divs tells screen readers, search engines and other developers nothing about its structure. Tables used for layout, the standard trick of the 1990s, fail badly on phones. Use header, nav, main, button and a for what they are, and keep tables for data with rows and columns.
- Forgetting the viewport meta tag
- Without <meta name="viewport" content="width=device-width, initial-scale=1"> in the head, a phone lays the page out as if it were a desktop screen and shrinks the result to fit, so the text is unreadably small. One line fixes it, and it belongs in every page you write.
- Confusing margin with padding
- Padding is the space inside an element's border, and the background shows through it; margin is the space outside, always transparent. Two twists catch people: vertical margins between neighbouring blocks collapse into one (20px and 20px give 20px, not 40px), and padding and borders are added on top of the width you set unless you use box-sizing: border-box.
Strengths and trade-offs
Where it is strong
- Nothing to install and nothing to compile: a text file and a browser, and the result is visible the instant you reload.
- The most durable output in software: a plain HTML page written decades ago still opens today on any device with a browser, and one written today will do the same.
- The browser is forgiving, so a beginner sees a result even when the markup is imperfect and can fix it one piece at a time.
- Every site is an open example: the developer tools let you read the HTML and CSS of any page you visit and change it live to see what happens.
Where it is not
- They are not programming languages in the usual sense: there are no conditions or loops, and nothing on the page can respond to a click without JavaScript. Anyone who wants interactive things will need a third language soon after.
- Layout is genuinely hard to get right. Centring, equal-height columns and content that overflows its box have puzzled experienced people for years; Flexbox and Grid help greatly, but the box model and collapsing margins still catch everyone.
- Browsers differ. They agree far more than they once did, but new CSS features reach them at different times, and a page checked in only one browser can surprise you in another. MDN's compatibility tables show what is safe.
- Forgiveness cuts both ways: because the browser never reports a broken tag, a page can look right on your screen while its markup is wrong underneath, and only a validator or a different device reveals it.
Who HTML & CSS is for
HTML and CSS are the entry point to every kind of web work: front-end development, design, content sites, a portfolio, a small business page. Designers who want to build what they draw and writers who maintain a site get a great deal from them without going further. If your interest is data, games or phone apps, start elsewhere and expect to meet them anyway. If what draws you is making things behave, plan on adding JavaScript soon after.
Questions about learning HTML & CSS
- Is HTML a programming language?
- Not in the usual sense, and nor is CSS. HTML is a markup language that labels content; CSS is a stylesheet language that describes appearance. Neither has the conditions, loops or functions a program is made from. That does not make them unimportant; it means that when you want a page to do something, you add JavaScript, the browser's programming language.
- Should I learn HTML first, then CSS, or both at once?
- Start with HTML for about an hour, long enough to make a page with a heading, a paragraph and a link, then bring in CSS straight away. Every page needs both, and the ideas reinforce each other: selectors only make sense once you know what elements are, and it is hard to care about elements until you can style them.
- Do I need Bootstrap, Tailwind or another framework?
- Not to learn, and not for a small site. Those frameworks are CSS someone else wrote, useful once you can read CSS well enough to know what they do and fix them when they do not fit. Learning on top of one hides the cascade and the box model, which are exactly what you need when a framework component misbehaves.
- Why does my page look wrong on my phone?
- Usually one of three things: the viewport meta tag is missing, something has a fixed pixel width wider than the phone, or the layout was never tested at a narrow size. The developer tools in Chrome, Edge and Firefox can emulate phone sizes, and media queries let you change the layout below a chosen width.
The primary source
When this guide and the official documentation disagree, the documentation is right and we would like to hear about it.