HTML & CSS Essentials · Foundations

Every web page is built from three languages:

Language	Role	Analogy
HTML	structure and content	the skeleton
CSS	presentation and layout	the clothes
JavaScript	behaviour and interaction	the muscles

HTML: structure

HTML marks up content with elements, written as tags: <p>A paragraph</p>. Tags can have attributes: <a href="https://example.com">a link</a>.

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My first page</title>
</head>
<body>
  <h1>Hello, I'm Asha</h1>
  <p>I study <strong>computer science</strong> at Kalvium.</p>
  <a href="https://github.com">My GitHub</a>
</body>
</html>

<head> holds information about the page (title, character set, CSS links).
<body> holds what is shown.

Common elements

Element	Purpose
`<h1>` … `<h6>`	headings, from most to least important
`<p>`	paragraph
`<a href="…">`	link
`<img src="…" alt="…">`	image (the `alt` text is read by screen readers)
`<ul>`, `<ol>`, `<li>`	bulleted list, numbered list, list item
`<table>`, `<tr>`, `<th>`, `<td>`	table, row, header cell, data cell
`<form>`, `<input>`, `<button>`, `<label>`	forms
`<div>`, `<span>`	generic block and inline containers
`<header>`, `<nav>`, `<main>`, `<section>`, `<footer>`	semantic layout regions

Semantic elements tell browsers, search engines and screen readers what each part means — prefer them to plain <div>s.

CSS: style

CSS rules have a selector and declarations:

CSS

h1 {
  color: #2e8b47;
  font-size: 2rem;
}
.card {                 /* class selector: <div class="card"> */
  padding: 16px;
  border-radius: 12px;
}
#signup { }             /* id selector: <form id="signup"> */
nav a:hover { }         /* descendant + state */

Selector	Matches
`p`	every `<p>`
`.card`	elements with `class="card"`
`#main`	the element with `id="main"`
`nav a`	`<a>` elements inside `<nav>`
`a:hover`	links under the mouse pointer

When rules conflict, the more specific selector wins (id > class > element), and later rules beat earlier ones of equal specificity — the cascade.

The box model

Every element is a box: content, surrounded by padding, then a border, then margin (space outside).

CSS

.box {
  width: 200px;
  padding: 16px;          /* inside the border */
  border: 2px solid #333;
  margin: 24px auto;      /* outside; auto centres horizontally */
  box-sizing: border-box; /* width now includes padding and border */
}

Flexbox layout

Flexbox arranges children in a row or column with easy alignment and spacing:

CSS

.row {
  display: flex;
  gap: 12px;
  justify-content: space-between;   /* along the main axis */
  align-items: center;              /* across it */
  flex-wrap: wrap;
}

Try it: a live editor

Edit the HTML and CSS — the preview updates as you type:

Responsive design

Phones, tablets and laptops need different layouts. Two essentials:

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS

@media (max-width: 600px) {
  .row { flex-direction: column; }   /* stack on small screens */
}

Test yourself

4 questions · pick an answer to check it instantly

1
Which element creates a link?
2
Which CSS selector matches <div class="card">?
3
In the box model, which property adds space inside the border?
4
Why should <img> have an alt attribute?

#HTML: structure

#Common elements

#CSS: style

#The box model

#Flexbox layout

#Try it: a live editor

#Responsive design

Test yourself

HTML: structure

Common elements

CSS: style

The box model

Flexbox layout

Try it: a live editor

Responsive design