HTML and CSS Basics for Beginners: Understand How Every Web Page Is Built

Whether a website is built with WordPress, Shopify, a page builder or custom PHP, the browser ultimately receives HTML (the structure and content) and CSS (the design). Learning HTML and CSS basics helps you make small edits confidently, understand your developer, and start a career in web design.

HTML: the structure

HTML uses tags to mark up content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sharma Sweets – Ludhiana</title>
</head>
<body>
  <h1>Fresh Sweets in Ludhiana</h1>
  <p>Order <strong>kaju katli</strong>, ladoo and more for weddings and festivals.</p>
  <a href="tel:+919800000000">Call to order</a>
  <img src="sweets.webp" alt="Box of assorted Indian sweets" width="800" height="600">
</body>
</html>

Important tags

• <h1> to <h6>: headings (one <h1> per page, the main topic)
• <p>: paragraphs
• <a href="">: links
• <img src="" alt="">: images (always write alt text)
• <ul>, <ol>, <li>: lists
• <header>, <nav>, <main>, <section>, <footer>: page structure
• <form>, <input>, <button>: forms

Using the right tags (semantic HTML) helps SEO and accessibility. See website accessibility basics.

CSS: the design

CSS selects HTML elements and styles them:

body {
  font-family: system-ui, sans-serif;
  color: #1a1f36;
  line-height: 1.6;
}
h1 { font-size: 2rem; color: #1B6FD8; }
.btn {
  display: inline-block;
  background: #F5C400;
  color: #111;
  padding: 12px 24px;
  border-radius: 10px;
  text-decoration: none;
}

Key ideas

• Selectors: h1 (all h1 tags), .btn (elements with class "btn"), #header (one element with id "header")
• Box model: every element has content, padding, border and margin
• Colours: hex (#1B6FD8), rgb, hsl
• Units: px (fixed), rem (relative to root font size), % and vw (relative to screen)
• Layout: Flexbox and Grid. See Flexbox vs Grid
• Responsive design: media queries adjust layouts for phones

@media (max-width: 600px) {
  h1 { font-size: 1.5rem; }
}

How to practise

1. Create a folder with index.html and style.css
2. Link the CSS in the head: <link rel="stylesheet" href="style.css">
3. Open the HTML file in your browser
4. Use browser DevTools (F12) to inspect any website and experiment with styles live
5. Rebuild a simple section you like (a pricing card, a contact block)

A good code editor helps. See best VS Code extensions.

Common beginner mistakes

• Forgetting the viewport meta tag (site looks tiny on phones)
• Using many <br> tags for spacing instead of CSS margin/padding
• Images without width/height, causing layout shift
• Inline styles everywhere instead of reusable classes
• Multiple <h1> tags used just for big text

FAQs

How long does it take to learn HTML and CSS basics?

A few weeks of regular practice is enough to build simple pages. Mastery of layout and responsive design takes longer.

Do I need to learn JavaScript too?

For interactive features, yes, but start with HTML and CSS first.

Prefer to have experts build it? Joboo Web creates fast, clean websites from ₹4,999. Get in touch.