Detailed Guide to HTML and CSS for Beginners

I wrote this article to review basic HTML and CSS knowledge, reinforcing my own foundation.

It serves as a detailed, academic summary for quick reference by me, friends, and colleagues.

With practical experience in HTML and CSS from real projects, I present the content in a simple, visual, and clear way, ideal for beginners while offering depth for those diving deeper.

This article draws heavily from W3Schools.

I recommend opening VS Code and practicing along with the blog to master the concepts.

1. What Are HTML & CSS?

HTML (HyperText Markup Language): A markup language for structuring web content (headings, paragraphs, links, images). HTML5 supports multimedia, semantic tags, APIs, video, audio, and form validation.
CSS (Cascading Style Sheets): A styling language for designing layouts (colors, fonts, layouts, effects). CSS3 adds animations, transforms, responsive design, grid, and flexbox. Syntax: selector { property: value; }. Cascade priority: inline > internal > external; specificity scores: inline (1000), ID (100), class (10), tag (1).

Example HTML:

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

CSS Example:

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

Standard HTML5 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>: Declares HTML5, ensures browsers render in standards mode, avoiding quirks mode errors.
<html lang="en">: Root element, lang aids SEO, accessibility, and translation.
<head>: Contains metadata (charset="UTF-8" for Unicode; viewport for responsive design; description/keywords for SEO).
<body>: Visible content, using semantic tags for clear structure, aiding screen readers and search engines.

3. Basic HTML Tags

3.1. Semantic Tags

<header>: Page header (logo, menu).
<nav>: Navigation bar.
<main>: Primary content, non-repeating.
<section>: Independent content section.
<article>: Standalone content.
<aside>: Supplementary content (sidebar).
<footer>: Page footer (contact, copyright).

Example:

<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>`)

Levels 1 (most important, largest) to 6 (least important, smallest).
<h1> used once per page for SEO.
Browsers apply default size and weight; customizable with CSS.

Example:

<h1>Main Heading (Level 1)</h1>
<h2>Subheading (Level 2)</h2>
<h3>Level 3 Heading</h3>

3.3. Paragraph Tag (`<p>`)

Block-level, adds default top/bottom margins.
Used for main text content, supports flow content.

Example:

<p>First paragraph with extended content.</p>
<p>Second paragraph, automatically spaced.</p>

3.4. Text Formatting

<strong>: Bold text, emphasizes meaning, highlighted by screen readers.
<em>: Italic text, emphasizes tone.
<u>: Underlined text, rarely used to avoid hyperlink confusion.
<mark>: Highlighted text, aids in-page search.
<sup>: Superscript (x²).
<sub>: Subscript (H₂O).
<del>: Strikethrough, indicates deleted content.
<ins>: Underlined, indicates inserted content.

Example:

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

3.5. Link Tag (`<a>`)

Creates hyperlinks for navigation.
Attributes: href (URL, #id, mailto:), target="_blank" (new tab), title (tooltip).

Example:

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

3.6. Image Tag (`<img>`)

Inserts images, self-closing.
Attributes: src (path), alt (SEO, accessibility), width/height (size), loading="lazy" (optimizes load).

Example:

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

3.7. List Tags

<ul>: Unordered list, bullet points (menus, items).
<ol>: Ordered list (1, a, i), for steps.
<li>: List item.
Attributes: type for <ol> (1, A, a, I, i).

Example:

<ul>
  <li>Item 1</li>
  <li>Item 2 with <a href="#">link</a></li>
</ul>
<ol type="A">
  <li>Step A</li>
  <li>Step B</li>
</ol>

3.8. Table Tags

Creates data tables: <table>, <tr> (row), <th> (header, bold, centered), <td> (data).
<thead>, <tbody>, <tfoot>: Group rows.
Attributes: colspan, rowspan, scope (accessibility).

Example:

<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

Collects user input, sends to server.
Tags: <form>, <label>, <input>, <select>, <option>, <textarea>, <button>, <fieldset>, <legend>.
Attributes: action (URL), method (get/post), enctype="multipart/form-data" (file upload).

Example:

<form action="/submit" method="post" enctype="multipart/form-data">
  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input
      type="text"
      id="name"
      name="name"
      placeholder="Enter name"
      required
      minlength="3"
    />
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" minlength="8" />
    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="18" max="100" />
    <label for="dob">Date of Birth:</label>
    <input type="date" id="dob" name="dob" />
    <label for="file">File:</label>
    <input type="file" id="file" name="file" accept="image/*" />
    <label>Gender:</label>
    <input type="radio" id="male" name="gender" value="male" /> Male
    <input type="radio" id="female" name="gender" value="female" /> Female
    <label>Hobbies:</label>
    <input type="checkbox" name="hobby" value="read" /> Reading
    <input type="checkbox" name="hobby" value="sport" /> Sports
    <label for="city">City:</label>
    <select id="city" name="city" multiple>
      <option value="hn">Hanoi</option>
      <option value="hcm">Ho Chi Minh City</option>
      <option value="dn">Da Nang</option>
    </select>
    <label for="message">Message:</label>
    <textarea
      id="message"
      name="message"
      rows="4"
      cols="50"
      placeholder="Enter message"
    ></textarea>
  </fieldset>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

Input types: text, email, password, number, date, file, radio, checkbox, hidden, tel, url.
Validation: required, minlength/maxlength, pattern, min/max, accept.

3.10. HTML Media

Audio: Plays audio (MP3, WAV, Ogg), attributes: controls, autoplay, loop, muted, preload (auto/metadata/none).

<audio controls loop>
  <source src="song.mp3" type="audio/mpeg" />
  <source src="song.ogg" type="audio/ogg" />
  Browser does not support audio.
</audio>

Video: Plays video (MP4, WebM, Ogg), attributes: controls, autoplay, loop, muted, poster, preload.

<video width="400" height="300" controls poster="thumbnail.jpg">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  Browser does not support video.
</video>

YouTube: Embeds video, attributes: frameborder, allowfullscreen, allow.

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

3.11. SVG Graphics

Vector graphics, resolution-independent, used for icons, logos, charts.
Tags: <svg>, <circle>, <rect>, <line>, <polygon>, <path>, <text>, <g> (group).
Attributes: viewBox (viewport scaling), stroke, fill, stroke-width.
Tip: Understand SVG structure for tweaks, but often copy-pasted from tools (Figma, Illustrator) or libraries (Font Awesome, SVGOMG), adjusting colors/sizes.

Example:

<svg width="200" height="200" viewBox="0 0 200 200">
  <g>
    <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"
    />
    <line x1="0" y1="0" x2="200" y2="200" stroke="green" stroke-width="3" />
    <polygon
      points="100,10 40,198 190,78 10,78 160,198"
      fill="lime"
      stroke="black"
    />
    <path d="M10 10 L100 10 L100 100 Z" fill="purple" stroke="black" />
    <text x="100" y="100" font-size="20" text-anchor="middle" fill="black">
      SVG
    </text>
  </g>
</svg>

<circle>: Circle, cx/cy center, r radius.
<rect>: Rectangle, x/y top-left, width/height.
<line>: Line, x1/y1 to x2/y2.
<polygon>: Polygon, points for vertices.
<path>: Complex path, commands: M (move), L (line), Z (close).
<text>: Text, text-anchor for alignment.
<g>: Groups elements for shared attributes.

4. CSS Basics

4.1. Adding CSS

Inline: In style attribute, high specificity, for quick overrides.

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

Internal: In <style> within <head>, applies to one page.

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

External: Separate .css file, linked via <link>, best for large projects, browser caching.

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

/* styles.css */
p {
  color: green;
  font-size: 16px;
  border: 1px solid #ccc;
}

4.2. Colors

Names: red, blue, transparent (~140 standard names).
HEX: #ff0000 (red), #f00 (shortened).
RGB: rgb(255, 0, 0) (red, 0-255).
RGBA: rgba(255, 0, 0, 0.5) (red, 50% opacity).
HSL: hsl(0, 100%, 50%) (hue 0-360, saturation/lightness 0-100%).
HSLA: hsla(0, 100%, 50%, 0.5) (with opacity).

Example:

p {
  color: hsl(240, 100%, 50%);
  background-color: #f0f0f0;
  border-color: rgba(0, 0, 0, 0.1);
}

4.3. Text Properties

p {
  font-family: "Helvetica Neue", Arial, sans-serif; /* Main, fallback fonts */
  font-size: 16px; /* px, em, rem, %, vw */
  font-weight: 700; /* normal=400, bold=700, 100-900 */
  font-style: italic; /* normal, oblique */
  font-variant: small-caps; /* Small caps */
  text-align: justify; /* left, right, center, justify */
  text-decoration: underline dotted red; /* none, overline, line-through */
  text-transform: uppercase; /* lowercase, capitalize */
  line-height: 1.5; /* Number, px, %, line spacing */
  letter-spacing: 0.5px; /* Letter spacing */
  word-spacing: 2px; /* Word spacing */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Shadow: x y blur color */
  white-space: nowrap; /* normal, pre, pre-wrap */
}

4.4. Box Model

Every element is a box: content + padding + border + margin.
Total size: width/height + padding + border + margin.
box-sizing: content-box (default, width is content only); border-box (includes padding, border, recommended).

Illustration:

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

Detailed Example:

div {
  width: 200px; /* Content (content-box) or total (border-box) */
  height: 100px;
  padding: 15px; /* top right bottom left */
  padding-top: 10px; /* Top padding */
  padding-right: 20px; /* Right padding */
  padding-bottom: 10px; /* Bottom padding */
  padding-left: 20px; /* Left padding */
  padding: 10px 20px; /* top/bottom 10px, left/right 20px */
  padding: 10px 20px 30px 40px; /* top right bottom left */
  border: 5px solid black; /* Width, style, color */
  border-top: 2px dashed red; /* Top border */
  border-width: 5px 3px 5px 3px; /* top right bottom left */
  border-radius: 10px; /* Rounded corners, or 10px 20px 10px 20px */
  margin: 20px; /* top right bottom left */
  margin-top: 15px; /* Top margin */
  margin-right: auto; /* Center horizontally */
  margin-bottom: 25px; /* Bottom margin */
  margin-left: 15px; /* Left margin */
  margin: 20px auto; /* top/bottom 20px, left/right auto */
  box-sizing: border-box;
}

4.5. Layout

Display:

block: Full line, supports width/height/margin/padding (<div>, <p>).
inline: Inline, no width/height, only horizontal margin/padding (<span>, <a>).
inline-block: Width/height, inline.
none: Hidden, no space.
flex: 1D layout (row/column).
grid: 2D grid layout.

div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Position:

static: Default, follows flow.
relative: Moves relative to original position, keeps space.
absolute: Relative to nearest non-static parent, no space.
fixed: Fixed to viewport, no scroll.
sticky: Relative until scrolled past, then fixed.

div {
  position: absolute;
  top: 20px; /* From top */
  right: 30px; /* From right */
  bottom: 40px; /* From bottom */
  left: 50px; /* From left */
  z-index: 10; /* Stacking order */
}

4.6. Float

Pushes elements left/right, wraps text, used in older layouts.
float: left/right/none.
clear: both/left/right to clear floats.

Example:

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

4.7. Responsive (Media Queries)

Adjusts styles based on device.
@media with screen, print, max-width, min-width, orientation.
Breakpoints: 576px (mobile), 768px (tablet), 992px (desktop), 1200px (large).

Example:

@media screen and (max-width: 576px) {
  body {
    background: lightgreen;
    font-size: 14px;
    padding: 10px;
  }
  h1 {
    font-size: 1.5em;
    margin: 5px;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .container {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
@media print {
  body {
    color: black;
    background: white;
    margin: 0;
  }
}

4.8. Pseudo-classes & Pseudo-elements

Pseudo-classes: Element states.

:hover: Mouse hover.
:active: Clicked.
:focus: Focused input.
:first-child, :last-child, :nth-child(n): Selects children.
:checked: Checkbox/radio.
:disabled: Disabled input.

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

Pseudo-elements: Virtual parts.

::before, ::after: Add content.
::first-letter: First letter.
::first-line: First line.
::selection: Selected text.

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

4.9. Vendor Prefixes

Support experimental features in older browsers.
-webkit-: Chrome, Safari, Android (WebKit/Blink).
-moz-: Firefox (Mozilla).
-o-: Old Opera (Presto).
-ms-: Internet Explorer, old Edge (Microsoft).
-khtml-: Konqueror, old Safari.
-apple-: Safari-specific (rare).

Example:

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

5. Conclusion

HTML structures content, CSS styles it beautifully.
Start with small projects like portfolios or blogs, use semantic HTML for better SEO, external CSS for maintainability, and test responsiveness on Chrome, Firefox, Edge, and Safari (F12).
W3Schools is a fantastic resource for learning and reference.
I started as a beginner on this site, coding, making mistakes, and improving over time.

= Use VS Code with Live Server for instant previews.

If you have any questions or need clarification, feel free to reach out through the contact section.

Happy learning and mastering HTML & CSS!

1. What Are HTML & CSS?

2. HTML Structure

3. Basic HTML Tags

3.1. Semantic Tags

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

3.3. Paragraph Tag (<p>)

3.4. Text Formatting

3.5. Link Tag (<a>)

3.6. Image Tag (<img>)

3.7. List Tags

3.8. Table Tags

3.9. HTML Forms

3.10. HTML Media

3.11. SVG Graphics

4. CSS Basics

4.1. Adding CSS

4.2. Colors

4.3. Text Properties

4.4. Box Model

4.5. Layout

4.6. Float

4.7. Responsive (Media Queries)

4.8. Pseudo-classes & Pseudo-elements

4.9. Vendor Prefixes

5. Conclusion

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

3.3. Paragraph Tag (`<p>`)

3.5. Link Tag (`<a>`)

3.6. Image Tag (`<img>`)