Frontend
Beginner 12 min read Frontend

HTML & CSS Basics

HTML gives structure to web documents while CSS controls presentation. Learn the DOM tree, semantic elements, the cascade and the box model — the foundation every frontend framework builds on.

HTMLCSSDOMbox modelcascadesemantic markup
Introduction

What is this?

HTML is the markup language that structures a page into a document tree (the DOM); CSS is a style language that binds presentation rules to nodes in that tree. Browsers parse HTML into the DOM, match CSS selectors against it, resolve conflicting declarations with the cascade, and paint the result on screen. Together they define content and presentation, and both are required for every web page.

Motivation

Why do you need it?

  • HTML is the only universally guaranteed contract: every browser, screen reader and search crawler interprets the same DOM.
  • Separating content (HTML) from presentation (CSS) lets one stylesheet restyle an entire site and keeps markup readable.
  • Semantic elements such as main, nav and article give accessibility and SEO a head start with zero extra code.
  • Every modern framework — React, Vue, Svelte — ultimately compiles down to HTML and CSS in the browser.
Think about it

Mental model

Imagine

A skeleton and skin

Think of

HTML and CSS

The skeleton defines the shape and where every part attaches; the skin determines color, texture and presentation. You can swap the skin without breaking the skeleton — exactly like replacing a stylesheet for a whole new design.

Mechanics

How it works

  • The browser fetches HTML and parses it into a tree of nodes called the DOM, preserving nesting.
  • CSS rules are loaded and matched against the DOM with selectors; the cascade decides which declaration wins when rules conflict.
  • The box model computes the rendered size of every element from content, padding, border and margin.
  • Layout engines (Blink, Gecko, WebKit) place boxes on the page, then painting and compositing produce the pixels you see.
  • Scripts can read and mutate the DOM, which triggers style and layout recalculations.

From a document to a rendered page.

HTML source
Parse into DOM
CSS rules
Style resolution
Render tree
Painted page
Reference

Key commands

mkdir my-site && cd my-site

Create a folder for the project.

npx serve .

Serve the current folder over HTTP so the browser loads it as a real page.

Serving! Local: http://localhost:3000
curl http://localhost:3000

Fetch the served HTML to confirm it is reachable.

<!DOCTYPE html><html lang=en>...
npx html-validate index.html

Validate the document against the HTML spec and flag common issues.

npx stylelint '**/*.css'

Lint the CSS for invalid properties, ordering and browser pitfalls.

npx prettier --write '**/*.{html,css}'

Format all HTML and CSS consistently.

Hands-on

Examples

A semantic card with a stylesheet

A semantic card with a stylesheet
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Article Card</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <article class="card">
        <h2>A semantic article</h2>
        <p>Structure comes from HTML, styling from CSS.</p>
        <a href="/read-more">Read more</a>
      </article>
    </main>
  </body>
</html>
 
/* styles.css */
body { font-family: system-ui, sans-serif; margin: 0; }
main { padding: 2rem; }
.card {
  max-width: 320px;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 12px;
}
.card h2 { margin-top: 0; }
.card a { color: #0a66c2; font-weight: 600; }

The HTML defines semantic landmarks (main, article) and links a separate stylesheet. The CSS targets .card and its descendants; max-width, padding, border and border-radius are all box-model properties applied to the article element.

Real world

In production

  • Static marketing sites, documentation and email templates still ship raw HTML and CSS because a framework would add cost without benefit.
  • Design systems define CSS custom properties (variables) once and let themes, dark mode and white-labeling reuse the same tokens.
  • Accessibility and SEO audits — Lighthouse, axe, Core Web Vitals — are largely scored on how well your HTML and CSS are structured.
  • CSS is the delivery layer for every framework: even heavy React apps render a DOM and apply a cascade.
Guidelines

Best practices

  • Use semantic landmarks (header, nav, main, footer) instead of generic divs so the document has a meaningful outline.
  • Declare a UTF-8 charset and a viewport meta tag in every page head.
  • Provide alt text for informative images and an empty alt attribute for decorative ones.
  • Prefer rem-based font sizes so text scales with the user's browser setting.
  • Set an explicit lang attribute on the html element so screen readers and translation tools pick the right language.
Watch out

Common mistakes

  • Reaching for divs and spans for everything, which erases the document outline and hurts accessibility.
  • Piling everything into inline style attributes, making styles unreusable and hard to override.
  • Forgetting the viewport meta tag, so mobile browsers render the page at desktop width.
  • Using tables or float hacks for layout instead of Flexbox and Grid.
Root cause analysis

Common issues

Error
My styles are not applying at all
Root cause

Selector specificity, an earlier rule, or a cached stylesheet.

Fix

Open DevTools, select the element and read the Computed panel to find the winning rule; hard-reload to bypass the cache.

Error
The page looks different on mobile
Root cause

Missing viewport meta tag or fixed pixel widths.

Fix

Add the viewport meta tag and use relative units and responsive layouts.

Error
Text is tiny on iOS Safari
Root cause

iOS auto-inflates text when a page is treated as desktop width.

Fix

Ensure the viewport meta tag is present and the page is genuinely responsive.

When things break

Debugging tips

  • Inspect any element with DevTools and read the Computed panel to see exactly which CSS rule won.
  • Temporarily set outline: 1px solid red on an element to visualize its box boundaries.
  • Validate HTML at validator.w3.org to catch unclosed tags and invalid nesting.
  • Hard-reload (Ctrl+Shift+R) to rule out a stale cached stylesheet when changes do not appear.
Interviews

Interview checkpoint

Practice

Hands-on lab

Build a Semantic Landing Page
25 min · beginner
In progress
Objectives
  • Create a valid HTML5 document with the correct head metadata
  • Structure a page with semantic landmarks
  • Style the page with an external stylesheet
  • Serve and validate the result

Build a Semantic Landing Page

25 min · beginner

0/5 steps
0%
sandbox · Linux sandbox
$
Try these commands
Test yourself

Quick quiz

0/3
1

Which element is the correct semantic landmark for the primary content of a page?

2

The viewport meta tag is required for pages to scale correctly on mobile devices.

3

Which property changes the text color of an element?

Quick reference

Cheat sheet

Document skeleton
<!DOCTYPE html>Declares an HTML5 document
<html lang='en'>Root element with language hint
<head>Metadata and linked assets
<meta charset='utf-8'>Character encoding
<meta name='viewport' ...>Responsive viewport control
Core selectors
elementMatches by tag name
.classMatches by class
#idMatches a unique id
a:hoverPseudo-class for a state
Go deeper

Official documentation

HTML: HyperText Markup Language (MDN)
docs
CSS Reference (MDN)
docs
HTML Living Standard
spec
MDN Getting Started with the Web
docs