HTML and CSS basics — a beginner's guide

HTML and CSS are the foundation of every website. If you dream of building sites, web apps, or simply want to understand how the internet works under the hood, these two technologies are exactly where you should start. In this guide you'll learn the most important concepts, see concrete code examples, and find out how to practice so you can make fast progress.

What is HTML?

HTML (HyperText Markup Language) is a markup language that describes the structure of a page. It's what tells the browser where the heading is, where a paragraph goes, and where an image belongs. HTML is not responsible for appearance — that's CSS's job. HTML says what is on the page, while CSS says how it looks.

Every HTML element is written using tags. Most have an opening and a closing tag, for example <p> and </p>.

Basic tags

Here are a few tags you'll meet right at the start:

<h1> through <h6> — headings, from most to least important
<p> — a paragraph of text
<a> — a link
<img> — an image
<ul>, <ol>, <li> — unordered and ordered lists
<div> — a generic container for grouping content
<button> — a button

Document structure

Every HTML page has a fixed skeleton. Here is a minimal, valid document:

Code

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is my first paragraph written in HTML.</p>
    <a href="https://codeworlds.pl">Visit CodeWorlds</a>
  </body>
</html>

The <head> section holds information about the page (title, character encoding, metadata), while <body> holds all the visible content.

What is CSS?

CSS (Cascading Style Sheets) is responsible for the appearance of a page: colors, fonts, spacing, and the arrangement of elements. Without CSS a page looks like a raw text document — with CSS it becomes attractive and readable.

Selectors

To style an element, you first have to target it with a selector. The most common selectors are:

element selector — p { } styles all paragraphs
class selector — .button { } styles elements with class="button"
id selector — #menu { } styles the element with id="menu"

Code

CSS

h1 {
  color: #b8860b;
  font-family: Arial, sans-serif;
}

.button {
  background-color: #2563eb;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
}

The box model

Every element on a page is a rectangular "box". The box model is made of four layers, counting from the inside out:

content — the content itself (text, image)
padding — the inner space between content and the edge
border — the outline
margin — the outer space separating the element from its neighbors

Understanding these four layers is the key to controlling layout. It's worth adding box-sizing: border-box; so that padding and border don't grow the element's declared width — this saves a lot of early frustration.

Flexbox basics

Flexbox is the modern way to lay out elements in rows or columns. Just give a container display: flex and its children will line up next to each other.

Code

CSS

.container {
  display: flex;
  justify-content: space-between; /* horizontal spacing */
  align-items: center;            /* vertical alignment */
  gap: 16px;
}

justify-content controls placement along the main axis, while align-items controls it along the cross axis. These two properties solve most everyday layout problems.

How to practice?

You can learn the theory in an hour, but real learning starts at the keyboard. The best way to learn is hands-on — writing code and immediately seeing the result in the browser.

In CodeWorlds, the first world — Ancient Egypt — introduces you to HTML and CSS through interactive exercises set inside a gamified story. Instead of dry lectures, you solve short tasks, earn progress, and build your first pages step by step. The free plan gives you a daily quota of exercises, so you can start at no cost.

If you want to learn systematically, check out the HTML & CSS course, browse the full list of available programming courses, or see the whole learning path on the roadmap. Most importantly: practice regularly, even just 20 minutes a day — consistency beats bursts.

FAQ - Frequently Asked Questions

Do I need to know HTML before I start learning CSS?

Yes, it's best to learn the basics of HTML first, because CSS styles HTML elements. You don't have to be an expert — knowing a handful of basic tags is enough to begin your CSS journey.

How long does it take to learn HTML and CSS?

You can grasp the basics in 2-4 weeks of regular study. Building simple pages comfortably usually takes a few months of practice. It all depends on how often you practice.

Do I need paid tools to learn?

No. A free code editor and a browser are enough. In CodeWorlds you can practice in the browser for free under the free plan with its daily quota of exercises.

What's the difference between HTML and CSS?

HTML describes the structure and content of a page (what's there), while CSS handles the appearance (how it looks). They are two complementary technologies used together.

What is the box model?

It's the concept that every element is a rectangle made of content, padding, border, and margin. Understanding it is essential for correctly positioning elements on a page.

Is flexbox hard to learn?

No. You can master the basics of flexbox in a single afternoon. Just remember display: flex, justify-content, and align-items to handle most common layouts.