Detailed Guide to HTML and CSS for Beginners

HTML and CSS were the first things I learned as a developer. Not frameworks, not libraries — just the raw building blocks of every webpage that has ever existed.

I keep coming back to write guides like this one for the same reason: the fundamentals don't expire. Frameworks come and go. React was new once. Tailwind was new once. But HTML and CSS are what all of it compiles down to, and understanding them deeply makes everything else easier.

This guide is part personal reference, part resource for friends and colleagues who are just starting out. The technical content draws heavily from W3Schools — still one of the best references for this stuff.

Open VS Code alongside this. Read a section, write the code, see what happens. That's the only way any of this actually sticks.

1. What Are HTML & CSS?

HTML (HyperText Markup Language) defines the structure of a webpage — what elements exist, what order they appear in, what they mean. HTML5 brought support for multimedia, semantic tags, form validation, audio, and video natively.

CSS (Cascading Style Sheets) defines how those elements look — colors, fonts, spacing, layouts, animations. CSS3 added flexbox, grid, transforms, and responsive design.

The syntax for CSS is: selector { property: value; }

Cascade priority (highest to lowest): inline → internal → external. Specificity scores: inline (1000), ID (100), class (10), tag (1).

Basic HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Web Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>A basic webpage.</p>
  </body>
</html>

Basic CSS:

body {
  background-color: #e6f3ff;
  margin: 0;
  padding: 0;
}
h1 {
  color: navy;
  text-align: center;
  font-size: 2em;
}
p {
  font-size: 16px;
  line-height: 1.6;
}

2. HTML Structure

Every HTML page follows this standard structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Webpage description for SEO" />
    <meta name="keywords" content="html, css, web" />
    <title>Page Title</title>
  </head>
  <body>
    <header>Header</header>
    <main>Main Content</main>
    <footer>Footer</footer>
  </body>
</html>

<!DOCTYPE html> — tells the browser to render in standards mode, not quirks mode.
<html lang="en"> — the root element. lang helps SEO, accessibility tools, and auto-translation.
<head> — metadata: charset="UTF-8" for Unicode support, viewport for responsive behavior, description and keywords for SEO.
<body> — everything visible. Use semantic tags here to give the content meaningful structure.

3. Basic HTML Tags

3.1. Semantic Tags

Semantic tags tell the browser (and search engines) what a piece of content means, not just how it looks.

<header> — page header, typically logo and navigation.
<nav> — navigation links.
<main> — primary content. Should appear once per page.
<section> — a standalone thematic section.
<article> — self-contained content (like a blog post).
<aside> — supplementary content, sidebars.
<footer> — page footer, copyright, contact links.

<header>
  <h1>Site Logo</h1>
  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
</header>
<main>
  <section>
    <h2>Section 1</h2>
    <p>Content.</p>
  </section>
</main>
<footer>
  <p>Copyright © 2025</p>
</footer>

3.2. Heading Tags (`<h1>` to `<h6>`)

Six levels of heading, h1 being the most important and visually largest. Use <h1> once per page for SEO — it signals the primary topic of the page to search engines. Use h2–h6 to create hierarchy within the content.

3.3. Paragraph Tag (`<p>`)

Block-level element with default top and bottom margins. Used for body text. Supports inline content like links, bold, and italic text inside it.

3.4. Text Formatting

<strong> — bold, semantic emphasis (screen readers treat this as important).
<em> — italic, semantic emphasis for tone.
<u> — underline. Use sparingly — users may confuse it with a link.
<mark> — highlighted text, useful for search results.
<sup> — superscript: x².
<sub> — subscript: H₂O.
<del> — strikethrough, indicates removed content.
<ins> — underline, indicates added content.

<p>
  <strong>Bold</strong>, <em>italic</em>, <u>underline</u>,
  <mark>highlight</mark>, x<sup>2</sup>, H<sub>2</sub>O,
  <del>deleted</del>, <ins>inserted</ins>.
</p>

3.5. Link Tag (`<a>`)

Creates hyperlinks. Can link to URLs, page sections (#id), or email addresses.

<a href="https://www.google.com" target="_blank" title="Search">Google</a>
<a href="mailto:example@gmail.com">Send Email</a>
<a href="#section1">Jump to Section 1</a>

target="_blank" opens in a new tab. title shows a tooltip on hover.

3.6. Image Tag (`<img>`)

Self-closing. Always include alt — it's read by screen readers and shown when images fail to load.

<img src="photo.jpg" alt="Blue ocean at sunset" width="300" height="200" loading="lazy" />

loading="lazy" defers loading until the image is near the viewport — improves page performance.

3.7. List Tags

<ul> — unordered list (bullet points). For menus, feature lists, anything without meaningful order.
<ol> — ordered list (numbered). For steps, rankings, sequences.
<li> — list item, used inside both.

The type attribute on <ol> changes numbering: 1, A, a, I, i.

3.8. Table Tags

For tabular data — not for layout.

<table> — the table container.
<tr> — table row.
<th> — table header cell (bold, centered by default).
<td> — table data cell.
<thead>, <tbody>, <tfoot> — group rows semantically.
colspan, rowspan — span multiple columns or rows.

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
      <th scope="col">Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ann</td>
      <td>25</td>
      <td rowspan="2">90</td>
    </tr>
    <tr>
      <td>Ben</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
      <td>180</td>
    </tr>
  </tfoot>
</table>

3.9. HTML Forms

Forms collect user input and send it somewhere.

Key tags: <form>, <label>, <input>, <select>, <option>, <textarea>, <button>, <fieldset>, <legend>.

Input types: text, email, password, number, date, file, radio, checkbox, hidden, tel, url.

Validation attributes: required, minlength/maxlength, pattern, min/max, accept.

<form action="/submit" method="post">
  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Your name" required minlength="3" />
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />
  </fieldset>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

Always pair <label> with <input> using matching for and id attributes. This improves accessibility and makes the label clickable.

3.10. HTML Media

Audio:

<audio controls loop>
  <source src="song.mp3" type="audio/mpeg" />
  <source src="song.ogg" type="audio/ogg" />
  Your browser doesn't support audio.
</audio>

Video:

<video width="400" height="300" controls poster="thumbnail.jpg">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  Your browser doesn't support video.
</video>

YouTube embed:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

3.11. SVG

SVG is vector graphics in markup form — resolution-independent, scales to any size without blur.

In practice: copy SVG from Figma, Illustrator, or a library like Font Awesome, then adjust colors and dimensions as needed. Understanding the structure helps you make those tweaks without breaking anything.

Key elements: <svg>, <circle>, <rect>, <line>, <polygon>, <path>, <text>, <g> (group).

<svg width="200" height="200" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="80" stroke="blue" stroke-width="4" fill="yellow" />
  <rect x="20" y="20" width="160" height="160" fill="none" stroke="red" stroke-width="2" />
  <text x="100" y="105" font-size="20" text-anchor="middle" fill="black">SVG</text>
</svg>

4. CSS Basics

4.1. Adding CSS

Three ways, in order of specificity:

Inline — in the style attribute directly on an element. Highest specificity. Use for quick overrides, not for styling at scale.

<p style="color: red; font-size: 18px;">Red text</p>

Internal — in a <style> block inside <head>. Applies to the current page only.

<style>
  p { color: blue; font-size: 16px; }
</style>

External — a separate .css file linked with <link>. This is what you should use for any real project. Keeps markup clean, enables browser caching, and makes styles reusable.

<link rel="stylesheet" href="styles.css" />

4.2. Colors

p {
  color: red;                        /* color name (~140 available) */
  color: #ff0000;                    /* hex */
  color: #f00;                       /* shorthand hex */
  color: rgb(255, 0, 0);             /* rgb */
  color: rgba(255, 0, 0, 0.5);       /* rgb with opacity */
  color: hsl(0, 100%, 50%);          /* hue, saturation, lightness */
  color: hsla(0, 100%, 50%, 0.5);    /* hsl with opacity */
}

4.3. Text Properties

p {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  text-align: justify;
  text-decoration: underline dotted red;
  text-transform: uppercase;
  line-height: 1.5;
  letter-spacing: 0.5px;
  word-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

font-weight accepts keyword values (normal, bold) or numeric values from 100 to 900. font-size accepts px, em, rem, %, or vw.

4.4. Box Model

Every element is a box. The box has four layers from inside out: content → padding → border → margin.

+---------------------------+
|         Margin            |
|  +---------------------+  |
|  |       Border        |  |
|  |  +---------------+  |  |
|  |  |    Padding    |  |  |
|  |  |  +---------+  |  |  |
|  |  |  | Content |  |  |  |
|  |  |  +---------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

By default (box-sizing: content-box), width applies only to the content. Padding and border are added on top of that, making the element larger than you set.

Use box-sizing: border-box instead — width then includes padding and border. Much more intuitive. Apply it globally:

*, *::before, *::after {
  box-sizing: border-box;
}

div {
  width: 200px;
  padding: 15px;
  border: 5px solid black;
  margin: 20px auto;
  border-radius: 10px;
  box-sizing: border-box;
}

4.5. Layout

Display types:

block — takes full line width, supports all box model properties. <div>, <p>, headings.
inline — flows with text, no width/height, horizontal margin/padding only. <span>, <a>.
inline-block — inline flow but supports width and height.
none — removed from layout entirely.
flex — one-dimensional layout (row or column).
grid — two-dimensional layout (rows and columns).

Flexbox:

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

Grid:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Position:

static — default, follows document flow.
relative — offset from its normal position, keeps its space in the flow.
absolute — positioned relative to the nearest non-static ancestor, removed from flow.
fixed — fixed to the viewport, doesn't scroll.
sticky — relative until it hits a scroll threshold, then fixed.

div {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 10;
}

4.6. Float

Float pushes an element left or right, allowing other content to wrap around it. Mostly used in older layouts — flexbox and grid handle this better now.

img {
  float: left;
  margin: 0 15px 15px 0;
}
p {
  clear: both;
}

4.7. Responsive Design (Media Queries)

Media queries apply styles conditionally based on screen size or other device characteristics.

@media screen and (max-width: 576px) {
  body { font-size: 14px; }
  h1 { font-size: 1.5em; }
}

@media (min-width: 768px) and (max-width: 992px) {
  .container { flex-direction: column; }
}

@media print {
  body { color: black; background: white; }
}

Common breakpoints: 576px (mobile), 768px (tablet), 992px (desktop), 1200px (large desktop).

4.8. Pseudo-classes & Pseudo-elements

Pseudo-classes — target elements in a specific state:

:hover — mouse over
:active — being clicked
:focus — focused (keyboard or click)
:first-child, :last-child, :nth-child(n) — position in parent
:checked — checked checkbox or radio
:disabled — disabled input

a:hover { color: red; }
input:focus { border-color: blue; outline: none; }
li:nth-child(odd) { background: #f2f2f2; }

Pseudo-elements — style a part of an element:

::before, ::after — insert content before/after an element
::first-letter — the first letter of a block
::first-line — the first line of a block
::selection — text the user has highlighted

p::before {
  content: "★ ";
  color: gold;
}
p::first-letter {
  font-size: 2em;
  color: red;
}
::selection {
  background: yellow;
  color: black;
}

4.9. Vendor Prefixes

Some CSS properties require vendor prefixes for older browser support:

-webkit- — Chrome, Safari, modern mobile browsers
-moz- — Firefox
-ms- — Internet Explorer, old Edge
-o- — old Opera

div {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

Modern browsers handle most properties without prefixes. Use tools like Autoprefixer to handle this automatically in production.

5. Closing

HTML structures content. CSS makes it look like something. That's the whole relationship.

Everything else you build on the web — React components, Vue templates, server-rendered pages — compiles down to HTML and CSS in the end. The deeper you understand these fundamentals, the faster you debug, the cleaner you write, and the less you rely on cargo-culting solutions you don't understand.

W3Schools remains one of the best references for both. Use it alongside this guide.

Open VS Code. Write the examples. See what breaks. That's how you actually learn this.

If you have questions or something isn't clicking, feel free to reach out through the contact section on my portfolio.