What HTML and CSS Actually Do in Your Browser

HTML is the content and structure of a web page. CSS is how that content looks. A browser reads both and draws what you see. That is the whole job for this course.

You do not need a framework, a build tool or a paid editor to start. A text editor and a browser are enough. If you skip that and paste a finished template first, you will not know which part to change when something looks wrong.

Two languages, two jobs

Mix them up and nothing you read online will make sense.

• HTML puts things on the page: headings, paragraphs, links, images, forms.
• CSS decides how those things look: colours, spacing, fonts, layout.

Example. A "Contact us" heading. HTML makes it a heading. CSS makes it blue and 32 pixels tall. Change the CSS and the words stay the same. Change the HTML and the style still applies if the tag or class matches.

JavaScript is a third language. It makes the page react after it loads: clicks, typing, calculations. This course does not cover it. JavaScript for Beginners starts there when you are ready.

What the browser does with your files

You save index.html. You open it in Chrome or Edge. The browser:

1. Reads the HTML from top to bottom.
2. Builds a tree of elements (the DOM).
3. Applies CSS rules that match those elements.
4. Paints the result on the screen.

If the HTML is wrong, the tree is wrong. If the CSS is wrong, the tree is fine but it looks wrong. Knowing which file to open first saves hours.

A tiny page, no style yet

Here is a complete HTML page. Don't worry about every word yet. The next lesson gets you opening it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Store hours</title>
</head>
<body>
  <h1>Store hours</h1>
  <p>Open Monday to Saturday, 9am to 6pm.</p>
</body>
</html>

Save that as index.html, open it, and you should see a heading and a paragraph. Default browser font. Default margins. Ugly is fine. It proves the pipeline works.

What they can't do

HTML and CSS are not a database, a login system or a payment processor. They describe and style a page. If you need data to save when the visitor leaves, you need a server and usually another language. If you need the page to recalculate a total when quantity changes, you need JavaScript.

Common mistakes when starting

• Learning a page builder first. Builders hide the HTML. When something breaks, you have nothing to inspect.
• Putting all CSS inline on every tag. It works once. Changing the brand colour later means editing twenty places.
• Skipping the browser's Inspect tool. The browser will show you which CSS rule won. Beginners often never open it.

What happens if you skip this

You can jump straight into tags. Plenty of people do. But if you don't know whether a colour problem is HTML or CSS, you will edit the wrong file and wonder why nothing changes.

So, a quick test before the next lesson. On the last website you used, pick one thing that is content (a heading, a price) and one thing that is only look (a colour, a font). Which file would you open first to change each?