Why this matters
Every web page you have ever opened is built from a few plain-text languages. Two of them do the bulk of the work for a static page (one that just shows information): HTML decides what is on the page, and CSS decides how it looks. Knowing which is which lets you read, change, and ask AI for the page you actually want.
The idea
HTML (HyperText Markup Language) builds the structure and content: a heading with
<h1>, a paragraph with <p>, a title, a list. You wrap content in tags to say what it is.
CSS (Cascading Style Sheets) defines the design: text colour, size, fonts, background colour, spacing. You don't repeat styling on every element; you write a rule once and it applies everywhere it matches.
The power comes from combining them. Put a class on an HTML element (for example
class="name"), then write a CSS rule for .name, and you can style that one element on its
own, and even other elements with the same tag stay unchanged. Change the rule in one place and
every matching element updates at once.
A page built only with HTML and CSS is a static page: it displays, but it doesn't react to the user. Adding behaviour comes in the next lesson.
Picture it
flowchart TD P[A web page] --> H[HTML: structure and content] P --> C[CSS: design and style] H --> H1[headings, paragraphs, lists] C --> C1[colour, size, font, background] H -. class links them .-> C
Worked example
Here is a tiny self-introduction page. The HTML gives it structure; the CSS colours the heading. (This is for reading, not for grading.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About Me</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="name">Mariam</h1>
</body>
</html>
.name {
color: blue;
}
The <h1> is the content (HTML); the .name rule turns it blue (CSS). The <link> tag joins
the stylesheet to the page. Because the colour lives in CSS, you change it in one spot.
Your turn
Open a browser editor (or ask an AI: "Create a simple self-introduction page using HTML and CSS") and try it. Add more content, then change the text size, font, or background colour in the CSS. Notice that what you add is HTML and how it looks is CSS. Then do the practice questions to sort tasks into the right language.
Recap
- HTML = structure and content (tags like
<h1>,<p>). - CSS = design and style (colour, size, font, background).
- A class lets CSS style one specific element; one rule can restyle many at once.
- HTML + CSS alone makes a static page that displays but does not react.