What HTML and CSS Are

Table of Contents

1. Two Languages, Two Jobs
2. HTML Is Not a Programming Language
3. Set Up Your Workspace
4. Your First Page
5. Adding a Little CSS
6. Meet DevTools Again
7. The Project You'll Build
8. Try It Yourself

1. Two Languages, Two Jobs

In Inside the Browser you saw that the browser downloads a response, parses it, and paints pixels. The thing it parses is HTML, and the thing that tells it how to paint is CSS. They have separate jobs:

A useful comparison is a house. HTML is the frame, walls, doors, and windows — it decides what exists and where each part belongs. CSS is the paint, flooring, and furniture layout. You can live in a house with no paint, and the web works the same way: a page with only HTML is plain but fully usable. A page with only CSS has nothing to style.

Keeping the two apart is the single most important habit in this series. When you decide what something is, reach for HTML. When you decide how it looks, reach for CSS. Choosing a heading tag because it "looks big" is the classic beginner mistake, and the next chapters show why it causes problems.

2. HTML Is Not a Programming Language

HTML has no variables, no if, no loops. It is a markup language: you wrap pieces of text in tags that label them.

<p>This is a paragraph.</p>

The <p> is an opening tag, </p> is the closing tag, and the whole thing is an element. The browser reads the labels and decides what to do: paragraphs get space around them, links become clickable, images get downloaded.

CSS isn't a programming language either. It's a list of rules — "make every paragraph this color" — that the browser applies. Both languages are declarative: you describe the result you want, and the browser works out how to produce it.

This is good news for a beginner. There is nothing to compile and nothing to install. A mistake doesn't crash anything; the browser simply does its best with what you wrote, and DevTools shows you what it understood.

3. Set Up Your Workspace

You need a folder for the project and an editor.

1. Install Visual Studio Code if you don't have it.
2. In a terminal (from Command Line Basics), create the project folder and open it in the editor:

mkdir dara-profile
cd dara-profile
code .

If code . isn't recognized, open VS Code, choose File → Open Folder, and pick dara-profile.

3. In VS Code, install the extension Live Server. It reloads the browser every time you save, which makes learning faster.

You'll also use Git in the last chapter, so it's worth running git init now:

git init

4. Your First Page

In VS Code, create a new file named index.html in the dara-profile folder. Type this in — don't paste it, typing builds the muscle memory:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Dara Sok</title>
  </head>
  <body>
    <h1>Hello, I'm Dara</h1>
    <p>I'm learning to build websites.</p>
  </body>
</html>

You'll learn what every line does in the next chapter. For now, open the file: right-click index.html in VS Code and choose Open with Live Server, or just double-click the file in your file manager.

Your browser shows a large heading and a paragraph. Look at the address bar: with Live Server it's http://127.0.0.1:5500/index.html; opened directly, it's file:///…/index.html. In both cases the browser is doing what it always does — getting HTML and rendering it. The only difference is that the "server" is your own machine.

Now change Dara to your own name, save, and watch the page update. That edit-save-look loop is how you'll work for the rest of the series.

5. Adding a Little CSS

Right now the browser is using its default styles — the built-in look every browser applies to a bare page. Add a <style> element inside <head>, after the <title>:

<style>
  body {
    font-family: sans-serif;
    background-color: #fdf6e3;
    color: #333333;
  }

  h1 {
    color: #b45309;
  }
</style>

Save. The background turns cream, the text goes dark gray, and the heading turns orange-brown. Each block is a CSS rule:

h1 {
  color: #b45309;
}
└┬┘  └──┬─┘ └──┬──┘
selector property value

The selector says which elements, and each line inside the braces says what to change. Chapter 6 covers selectors in depth; for now notice that you changed the look without touching the <h1> or <p> tags. The structure stayed the same.

6. Meet DevTools Again

Right-click the heading and choose Inspect (or press F12). The Elements panel shows the page as the browser understands it: a tree of elements.

html
├── head
│   ├── meta
│   ├── title
│   └── style
└── body
    ├── h1
    └── p

This tree is called the DOM — the Document Object Model. Your HTML text is the source; the DOM is what the browser built from it. They usually match, but when they don't (because of a typo, say), the DOM shows you what the browser actually did.

Click an element in the tree and look at the Styles pane on the right. It lists every CSS rule that applies, including the browser's default ones (labeled user agent stylesheet). You can click a value like #b45309 and edit it live. DevTools changes are temporary — they vanish when you reload — which makes it a safe place to experiment. Whenever you're stuck during this series, inspect the element.

7. The Project You'll Build

Over the next ten chapters, this one folder grows into a finished site:

Commit after each chapter, with a short message. By the end your Git history will show the page growing step by step.

git add .
git commit -m "Add first index.html"

8. Try It Yourself

1. Break it on purpose. Delete the closing </p> tag and save. Does the page look different? Open the Elements panel and check the tree. Then put it back. This shows how forgiving the parser is.
2. Edit the DOM. In DevTools, double-click the text inside the <h1> and type something else. Reload the page. What happened to your change, and why?
3. Change three styles in DevTools. Click the <body> element, find the background-color in the Styles pane, and try a new color. Add a new property of your own, like font-size: 24px.
4. View the source. Press Ctrl+U (Cmd+Option+U on macOS) on any website. This is the raw HTML the server sent. Compare it with the Elements panel on the same page. Why might they differ?

Next, we'll go through the page you just typed line by line and learn what a valid HTML document is made of.