What Are HTML and CSS?

What is a web page, really?

Every web page you have ever visited, from a newspaper to a railway timetable, arrives on your phone or computer as a plain text file. There are no pictures of the page inside it, no finished layout. There is only text: the words of the page, plus short instructions saying what each part is and how it should look.

Your web browser (Chrome, Safari, Firefox, Edge and so on) reads those instructions and draws the page from them: it sets the headings in large type, lines up the columns, places the pictures and colours the buttons. That is why the same page can look right on a small phone and on a wide screen: the browser draws it afresh to fit each one.

Those instructions are written in two languages, and learning them is what this course is about.

HTML: what each part of the page is

HTML stands for HyperText Markup Language. “Markup” means marking up a piece of text to say what each part of it is: this is the main heading, this is a paragraph, this is a list, this is a link to another page, this is a picture. (“Hypertext” is an old word for text containing links.)

The marks are called tags. A tag is a word inside angle brackets, such as <h1> for the main heading or <p> for a paragraph. Here is a small piece of HTML, with the page the browser draws from it underneath. The page appears by itself, a moment after the box comes into view.

Notice that the tags themselves are not shown on the page. The browser reads them, and uses them to decide what each part is: the first line became a large, bold heading, and each <p> became a separate paragraph with a little space around it. Lesson 1.2 explains exactly how these lines are written.

CSS: how the page looks

CSS stands for Cascading Style Sheets. HTML says what each part of a page is; CSS says how it should look: its colours, its fonts and sizes, the space around it, and where it sits on the screen.

Here is the same page with a few lines of CSS added at the bottom, inside <style>. Compare the two pages.

The words and the structure have not changed at all, but the page now has a colour scheme, a different typeface and a line under the heading. You do not need to understand the CSS yet; Module 4 starts it properly. For now, try one change: in the line that starts with h1, replace #2c3e8f with darkred. The page redraws itself a moment after you stop typing.

There is a third language of the web, JavaScript, which makes pages do things, such as responding to a click. It is taught in VICTORIA INSTITUTIONS' separate JavaScript course. This course stays with HTML and CSS, which every web page is built from and which come first.

Why learn this when AI can write web pages?

It is a fair question. Today you can describe a page to an AI tool and receive the HTML and CSS for it in seconds. But what the AI gives you is exactly the kind of code this course teaches, and someone still has to:

• check it: does the page actually say and show what it should, on a phone as well as a computer?
• fix it: AI tools make mistakes, such as a missing closing tag, a colour that is hard to read, or a menu that falls apart on a small screen;
• change it: move a heading, correct a price, add a line, match your organisation's colours, without asking for (and checking) a whole new page each time;
• ask for the right thing: knowing the names of things, such as a grid layout or a media query, makes your requests to an AI much more precise.

HTML and CSS also appear far beyond ordinary websites: in email newsletters, e-books, online shop listings, blogs and the content editors of most organisations. Reading them comfortably is a basic skill of working with anything online, and it takes only a few weeks to learn.

How this course works

This is a text course with no videos, but it is not a course you only read. Every lesson has boxes of real HTML and CSS, like the two above. You read them, change them, and watch the page change.

• The page under each box is drawn by your own browser, exactly as a real website would be.
• After you change the code, the page redraws itself a moment after you stop typing. The Show page button redraws it straight away, and Reset puts back the original code.
• If your code contains a common mistake, such as a tag that is never closed or a misspelt word the browser does not understand, a yellow box under the page lists it, with the line number and a plain-English explanation.

What you will build

Across the course you will learn to write the text, links, pictures, tables and forms of a page (Modules 1 to 3); to style it with colours, fonts and spacing (Modules 4 and 5); to lay it out in columns and grids that adapt to phones, tablets and computers (Modules 6 to 8); and to add finishing touches that make a page pleasant and usable for everyone (Module 9). In the final project you put it all together as a small website for a tea house in Calicut.

Each lesson assumes only what earlier lessons taught, so if a word is unfamiliar, it will have been explained already or will be explained where it first matters.

Quick check

Three questions to confirm the main ideas before you move on.

Found a mistake on this page, or something unclear? Report a problem and mention “HTML Lesson 1.1”.