Your own web page: HTML and CSS

What you'll learn

Write a web page with a heading, paragraphs and lists in HTML
Set colours, spacing and font sizes with CSS
Style several elements the same way with classes

Web pages are made of three languages

Every web page on the internet has three parts:

Language	What for	Example
HTML	What’s on the page	heading, text, list, button
CSS	What it looks like	colours, sizes, spacing
JavaScript	What happens	clicks, maths, games

This lesson is about HTML and CSS. The editor says index.html at the top – that’s the name of the start page of almost every website. Below the code you see the preview. It changes as soon as you type.

HTML: building blocks in angle brackets

HTML is made of tags. A tag has a start <h1> and an end </h1>. The content goes in between. Try it and change the text:

<h1>Hello, world!</h1>
<p>This is my first web page.</p>
<p>It has two paragraphs.</p>
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

Tag	Meaning
`<h1>` … `<h6>`	headings, from big to small
`<p>`	paragraph
`<ul>` and `<li>`	bullet list
`<strong>`	important (bold) text
`<button>`	button

CSS: what it looks like

CSS goes in a <style> part. First you say what you want to style (for example h1). Then the properties follow in curly brackets:

<style>
  body {
    font-family: sans-serif;
    background: #fff8e7;
  }
  h1 {
    color: darkorange;
    font-size: 40px;
  }
  p {
    color: #444;
    line-height: 1.6;
  }
</style>

<h1>Pizza recipe</h1>
<p>Roll out the dough, add tomato sauce, cheese on top – done!</p>

Every property ends with a semicolon ;. Try other colours like crimson, teal or #7b2ff7.

Classes: several elements at once

If only some paragraphs should look different, give them a class. In CSS, the class name has a dot in front:

<style>
  .important {
    background: gold;
    padding: 8px;
    border-radius: 8px;
  }
</style>

<p>A perfectly normal paragraph.</p>
<p class="important">Trip tomorrow – bring a rain jacket!</p>
<p>Another normal paragraph.</p>
<p class="important">Meeting point: 8 o'clock at the bus.</p>

Good to know: The preview runs in a sealed-off window. Your page can’t load anything from the internet there and can’t send anything. That’s why pictures from other websites don’t appear – colours, shapes and text do.

Your task

Your turn

Build your own profile page. It needs a heading <h1> with your name (or a made-up name), a paragraph <p> about you and a list <ul> with at least three hobbies. Give the heading a colour in the <style> part. And: all list items get the class hobby, which makes them bold (font-weight: bold).

<style>
  body {
    font-family: sans-serif;
    background: #f4f0ff;
  }
</style>

<h1>My name</h1>

Something to think about
A paragraph goes between <p> and </p>.
Which command helps?
A list: <ul> and inside it <li>Hobby</li> for every item.
Write in the <style> part: h1 { color: tomato; } – or another colour.
In the <style> part: .hobby { font-weight: bold; } – the dot before hobby means “class”.

Solve it without hints to earn a ⭐ on your progress page.

Show solution

Try it yourself first – mistakes teach you the most. Here is one possible solution:

<style>
  body {
    font-family: sans-serif;
    background: #f4f0ff;
  }
  h1 {
    color: rebeccapurple;
  }
  .hobby {
    font-weight: bold;
  }
</style>

<h1>Robo Rita</h1>
<p>I build robots and program them with Python.</p>
<ul>
  <li class="hobby">Building robots</li>
  <li class="hobby">Climbing</li>
  <li class="hobby">Drawing</li>
</ul>