HTML & CSS: Complete Notes & Examples

Full W3Schools-style HTML & CSS syllabus in simple English — every topic with a real-life example and copy-paste code, ending in a responsive landing page project.

What is HTML?

HTML means HyperText Markup Language. It is the language used to build the structure of every web page — headings, paragraphs, links, images, and forms.

You do not write programs in HTML. You write tags that tell the browser what content exists and how it is organized.

Real-life example: Think of HTML like the skeleton of a human body. Bones give shape and hold everything in place. CSS is like clothes and skin (how it looks). JavaScript is like muscles (movement and action).

How websites work — HTML, CSS, and JavaScript

Every website uses three main parts. HTML gives structure (what is on the page). CSS gives style (colors, fonts, layout). JavaScript gives action (buttons that work, forms that check input, menus that open).

When you open a site like Rishtaara in your browser, the server sends HTML first. Then the browser loads CSS and JavaScript files linked inside that HTML.

Real-life example: Building a school notice board — HTML is the board and pinned papers (content). CSS is the paint, borders, and neat arrangement. JavaScript is the person who updates the board when new notices arrive.

HTML = structure (headings, text, links, images)
CSS = look (colors, spacing, mobile layout)
JavaScript = behavior (clicks, validation, animations)

HTML HOME — what this course covers

This Rishtaara HTML course covers everything from your first page to forms, tables, media, and accessibility — explained in simple English.

You will learn tags one by one, write real code, and build small pages step by step. No need to memorize everything — practice and bookmark this course.

Real-life example: Learning HTML is like learning the alphabet before writing sentences. Each tag is one letter. Soon you combine them into full pages.

Basic pages, text, links, and images
Lists, tables, forms, and layout boxes
Head section, semantics, and responsive setup
Video, audio, canvas, SVG, and web APIs

Tip: Keep one folder on your computer called my-website. Save every lesson file there so you can open and review them anytime.

What you will learn in this HTML part

By the end of these 12 lessons you will be able to create a complete static web page with text, images, links, a contact form, and basic media.

You will understand how browsers read HTML, how to use DevTools (F12), and how to write clean code that works on mobile phones too.

Real-life example: After this course you can make a simple shop menu page, a personal portfolio, or a school project page — just like designing a notebook cover and filling it with organized notes.

HTML Editors

An HTML editor is any program where you type code. VS Code is free and very popular. You can also use Notepad, Sublime Text, or online editors.

Install VS Code, create a file ending in .html, and open it in Chrome or Firefox. Press F12 to open DevTools and inspect your page.

Real-life example: An editor is like your school notebook. The .html file is one page. You write on it, save, and show it to the browser (teacher) to check.

VS Code — free, color highlights, extensions
Live Server extension — auto refresh when you save
Browser DevTools (F12) — see HTML tree and errors

HTML Basic — your first page

Every HTML page starts with <!DOCTYPE html>. Then comes <html>, with <head> (hidden info) and <body> (visible content).

Save the file, double-click it, or use Live Server. You will see your text in the browser tab and on the page.

Real-life example: <!DOCTYPE html> is like writing "Official Letter" at the top. <head> is the envelope label (address, stamp). <body> is the letter people actually read.

Your first HTML page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, Rishtaara!</h1>
  <p>This is my first web page.</p>
</body>
</html>

HTML Elements

An element has an opening tag, content, and a closing tag. Example: <p>Hello</p>. Some tags are empty (void) and have no closing tag, like <br>, <img>, and <hr>.

Tags are written in lowercase. Nesting means putting one element inside another — always close inner tags before outer tags.

Real-life example: An element is like a lunch box (tag) with food inside (content). You open the box, eat, and close it. Nested boxes go inside bigger boxes.

Tip: If your page looks wrong, check that every opening tag has a matching closing tag.

Elements and nesting

<h1>Main Title</h1>
<p>This paragraph has <strong>bold text</strong> inside.</p>
<br />
<hr />

HTML Attributes

Attributes give extra information to elements. They go inside the opening tag as name="value". Common ones: href, src, alt, class, id, and style.

Always use quotes around attribute values. One element can have many attributes.

Real-life example: A student ID card has attributes — name, roll number, class. The card (element) stays the same; the details (attributes) change for each student.

Common attributes

<a href="https://rishtaara.com">Visit Rishtaara</a>
<img src="photo.jpg" alt="My photo" width="200" />
<p class="intro" id="welcome">Welcome!</p>

HTML Headings

Headings use <h1> to <h6>. <h1> is the biggest and most important — use only one per page. <h2> is for sections, then <h3>, and so on.

Do not skip levels (like h1 then h4) just to make text big. Use CSS for size later. Headings help Google and screen readers understand your page.

Real-life example: Headings are like chapter titles in a textbook. h1 is the book name, h2 is each chapter, h3 is sections inside a chapter.

Heading levels

<h1>Rishtaara Learning Hub</h1>
<h2>HTML Course</h2>
<h3>Lesson 3: Text</h3>

HTML Paragraphs

Use <p> for normal text blocks. Each paragraph starts on a new line with space above and below.

Pressing Enter many times in your editor does not create extra space in the browser. Use separate <p> tags or CSS for spacing.

Real-life example: Each <p> is one paragraph in your school essay — one idea, then the next paragraph below it.

Paragraphs

<p>HTML is easy to learn.</p>
<p>You can build real websites with practice.</p>

HTML Styles (inline)

You can add quick style with the style attribute on any element. It sets color, font size, background, and more.

Inline style is fine for learning, but later you will move styles to CSS files for cleaner code.

Real-life example: Inline style is like using a marker directly on one word in your notebook. CSS file is like a rule book that styles the whole notebook.

Inline styles

<p style="color: blue; font-size: 18px;">Blue text</p>
<p style="background-color: yellow;">Highlighted note</p>

HTML Text Formatting

Format text with semantic tags: <strong> for important, <em> for emphasis, <mark> for highlight, <small> for fine print, <del> for deleted, <ins> for inserted.

<b> and <i> only change look. Prefer <strong> and <em> when meaning matters.

Real-life example: Formatting is like highlighter pens in notes — red for important, green for examples, yellow for remember-this.

Formatting tags

<p><strong>Warning:</strong> Save your file often.</p>
<p>Price: <del>₹500</del> <ins>₹399</ins></p>
<p><mark>Exam on Monday</mark></p>

HTML Quotations

Use <q> for short inline quotes. Use <blockquote> for long quotes on their own block. <cite> names the source title.

<abbr title="Full form"> shows the full meaning when the user hovers.

Real-life example: blockquote is like copying a famous quote on a separate line in your project file, with the author name below.

Quotations

<p>He said <q>Practice daily</q> and left.</p>
<blockquote>
  The only way to learn HTML is to write HTML.
</blockquote>
<p><abbr title="HyperText Markup Language">HTML</abbr> is fun.</p>

HTML Comments

Comments use . The browser hides them. They help you and other developers remember why code was written.

Do not put secrets in comments — anyone can see them in View Source.

Real-life example: Comments are like pencil notes in the margin of your textbook — only for you, not part of the final exam answer.

Comments

<!-- Navigation section starts -->
<nav>
  <a href="/">Home</a>
</nav>
<!-- TODO: add footer later -->

HTML Colors

Colors can be names (red, blue), hex (#ff0000), rgb(255, 0, 0), or hsl(0, 100%, 50%). Use them in style or in CSS.

Pick good contrast — dark text on light background is easiest to read.

Real-life example: Choosing colors is like picking uniform and house colors — they should look good together and be easy to read from far away.

Tip: Use a free tool like coolors.co to pick matching color sets for your Rishtaara project page.

Color values

<p style="color: #2563eb;">Hex blue</p>
<p style="color: rgb(34, 197, 94);">RGB green</p>
<p style="background-color: hsl(45, 100%, 90%);">Soft yellow background</p>

HTML Links

Links use the <a> (anchor) tag with href="URL". Clicking opens another page, file, or section on the same page.

Use target="_blank" to open in a new tab. Add rel="noopener" for security when linking outside your site.

Real-life example: A link is like a phone number in your diary — tap it and you go to that person (page).

Links

<a href="https://rishtaara.com">Rishtaara Home</a>
<a href="about.html">About Page</a>
<a href="#contact">Jump to Contact section</a>
<a href="https://example.com" target="_blank" rel="noopener">External site</a>

HTML Images

Images use <img src="path" alt="description" />. src is the file path or URL. alt text helps blind users and shows when the image fails to load.

Always write meaningful alt text. Use width and height to avoid layout jump while loading.

Real-life example: An image tag is like sticking a photo in your album — src is which photo, alt is the caption written underneath.

Images

<img src="images/logo.png" alt="Rishtaara logo" width="120" />
<img src="https://picsum.photos/400/200" alt="Sample banner" />

Favicon

A favicon is the small icon in the browser tab. Add it in <head> with <link rel="icon" href="favicon.ico" />.

Use .ico, .png, or .svg. Size 32×32 or 64×64 works well.

Real-life example: Favicon is like the small school emblem on your ID card — tiny, but people recognize you quickly.

Favicon in head

<head>
  <link rel="icon" type="image/png" href="favicon.png" />
  <title>My Site</title>
</head>

Page Title

The <title> tag goes in <head>. It shows in the browser tab, bookmarks, and Google search results.

Make it short and clear — describe the page, not the whole website.

Real-life example: Title is like the name written on the cover of your notebook — "Math Notes" not "Notebook page 1 section A".

Page title

<head>
  <title>Contact Us — Rishtaara</title>
</head>

File Paths

Absolute path starts from the root: /images/photo.jpg. Relative path goes from the current file: images/photo.jpg or ../images/photo.jpg (one folder up).

Keep images in an images folder and CSS in a css folder for a clean project.

Real-life example: File path is like giving directions — "in my room, on the shelf, blue folder" (relative) vs "House 12, Block B, shelf 3" (absolute from root).

Relative paths

<!-- Same folder -->
<img src="photo.jpg" alt="Photo" />

<!-- Inside images folder -->
<img src="images/photo.jpg" alt="Photo" />

<!-- One folder up, then css -->
<link rel="stylesheet" href="../css/style.css" />

Small HTML project tip

Build a one-page "About Me" site: your photo, three links (social or favorite sites), a short bio, and a favicon.

Use one folder: index.html, images/, and favicon.png. Open index.html in the browser after each change.

Real-life example: This mini project is like your first cooking dish — simple ingredients (h1, p, img, a) but you made something real you can show family.

Tip: Name your homepage index.html so hosting servers open it automatically.

HTML Lists — unordered (ul)

Unordered lists use <ul> with <li> items. Bullets show by default. Good for steps with no fixed order — features, shopping items, hobbies.

Real-life example: A ul list is like a grocery list on your phone — items in any order, each with a bullet dot.

Unordered list

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

HTML Lists — ordered (ol)

Ordered lists use <ol> with numbered <li> items. Use for steps, rankings, or recipes where order matters.

Real-life example: An ol list is like exam instructions — Step 1, Step 2, Step 3. Order is important.

Ordered list

<ol>
  <li>Open VS Code</li>
  <li>Create index.html</li>
  <li>Write HTML and save</li>
  <li>Open in browser</li>
</ol>

HTML Lists — description (dl)

Description lists use <dl>, <dt> (term), and <dd> (definition). Good for glossaries and FAQ-style content.

Real-life example: dl is like a dictionary page — word on the left (dt), meaning below (dd).

Description list

<dl>
  <dt>HTML</dt>
  <dd>Structure of web pages</dd>
  <dt>CSS</dt>
  <dd>Style and layout</dd>
</dl>

HTML Tables — basics

Tables use <table>, <tr> (row), <th> (header cell), and <td> (data cell). Use tables for real tabular data — not for whole page layout.

Real-life example: A table is like the timetable on your classroom wall — rows for periods, columns for days.

Simple table

<table border="1">
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Riya</td>
    <td>92</td>
  </tr>
  <tr>
    <td>Aarav</td>
    <td>88</td>
  </tr>
</table>

caption, thead, and tbody

<caption> gives the table a title. <thead> groups header rows. <tbody> groups body rows. This structure helps screen readers and styling.

Real-life example: caption is the title "Monthly Sales" on a shop ledger. thead is the column names row. tbody is all the daily entries.

Structured table

<table>
  <caption>Class Marks — March</caption>
  <thead>
    <tr>
      <th>Student</th>
      <th>Math</th>
      <th>English</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Priya</td>
      <td>85</td>
      <td>90</td>
    </tr>
  </tbody>
</table>

colspan and rowspan

colspan merges cells across columns. rowspan merges cells across rows. Add the number on <td> or <th>.

Real-life example: colspan is like one big merged cell in an Excel sheet for a heading that covers two columns.

Tip: For mobile-friendly data tables, keep columns few or scroll horizontally with CSS later.

Merged cells

<table border="1">
  <tr>
    <th colspan="2">Contact Info</th>
  </tr>
  <tr>
    <td>Email</td>
    <td>hello@rishtaara.com</td>
  </tr>
  <tr>
    <td rowspan="2">Phone</td>
    <td>Home: 123456</td>
  </tr>
  <tr>
    <td>Mobile: 987654</td>
  </tr>
</table>

Block and Inline elements

Block elements start on a new line and take full width — <div>, <p>, <h1>, <ul>. Inline elements stay in the same line flow — <span>, <a>, <strong>, <img>.

You can change display with CSS later, but knowing defaults helps you fix layout bugs.

Real-life example: Block is like stacking lunch boxes one below another. Inline is like words in one sentence on the same line.

Block vs inline

<p>Block paragraph one</p>
<p>Block paragraph two</p>
<p>Inline <span>highlight</span> and <a href="#">link</a> inside text.</p>

The div element

<div> is a generic block container with no meaning of its own. Use it to group elements for layout or styling.

Prefer semantic tags (<header>, <section>) when they fit — you will learn those in a later lesson.

Real-life example: div is like an empty plastic box — you decide what to put inside and label it with class or id.

Div wrapper

<div class="card">
  <h2>Course Card</h2>
  <p>Learn HTML step by step.</p>
</div>

HTML Classes

class="name" labels elements for CSS or JavaScript. Many elements can share the same class.

One element can have multiple classes separated by spaces: class="btn primary".

Real-life example: Class is like a school house name — many students (elements) can be in "Blue House" and wear the same badge style.

Classes

<p class="intro">Welcome!</p>
<button class="btn primary">Join</button>
<button class="btn secondary">Learn More</button>

HTML Id

id="unique-name" must be unique on the page. Use for one special element — jump links, form labels, or JavaScript targets.

Never duplicate the same id twice on one page.

Real-life example: Id is like your Aadhaar number — only one person (element) has that exact number on the page.

Id for jump link

<a href="#top">Back to top</a>
...
<section id="top">
  <h1>Page Start</h1>
</section>

HTML Buttons

Use <button> for actions on the page. Use <button type="submit"> inside forms to send data.

Buttons can contain text and icons. style or CSS makes them look clickable.

Real-life example: A button is like a doorbell — you press it and something should happen (JavaScript or form submit).

Buttons

<button type="button">Click Me</button>
<button type="submit">Send Form</button>

HTML Iframes

Only embed trusted sites. Too many iframes slow the page.

Real-life example: Iframe is like a TV screen inside your shop window showing another channel — your wall, their content inside a frame.

Tip: Use class for styling groups. Use id when exactly one element needs a unique name.

Iframe embed

<iframe
  src="https://www.openstreetmap.org/export/embed.html"
  width="400"
  height="300"
  title="Map location"
></iframe>

HTML Forms

Forms collect user input — login, search, contact, signup. Wrap fields in <form action="/submit" method="post">.

method="get" sends data in the URL (search). method="post" sends in the body (passwords, long forms).

Real-life example: A form is like a paper admission form — blank boxes you fill, then hand to the office (server).

Basic form

<form action="/contact" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <button type="submit">Send</button>
</form>

Form Attributes

action is where data goes. method is get or post. autocomplete="on|off" helps browsers fill saved data. novalidate skips browser check (use carefully).

target="_blank" opens the response in a new tab — rare for forms.

Real-life example: action is the address on the envelope. method is whether you send a postcard (get, visible) or sealed letter (post).

action — URL that receives the form
method — get or post
name on inputs — keys sent to the server

Form Elements

Common elements: <input>, <textarea>, <select>, <option>, <button>, and <label>. Always pair <label for="id"> with input id.

Labels help everyone click the right field — especially on mobile.

Real-life example: label is the printed question on a form — "Father's name:" next to the blank line (input).

Labels and textarea

<label for="msg">Message:</label>
<textarea id="msg" name="msg" rows="4" placeholder="Type here..."></textarea>

<label for="city">City:</label>
<select id="city" name="city">
  <option value="">Choose...</option>
  <option value="delhi">Delhi</option>
  <option value="mumbai">Mumbai</option>
</select>

Input Types

type sets keyboard and validation: text, email, password, number, date, checkbox, radio, file, color, range, tel, url, search, and more.

Use the most specific type — email on mobile shows @ key.

Real-life example: Input type is like choosing the right box on a form — date box for birthday, not a plain text line.

Common input types

<input type="email" name="email" placeholder="you@email.com" />
<input type="password" name="pass" />
<input type="number" name="age" min="1" max="120" />
<input type="date" name="dob" />
<input type="checkbox" name="agree" /> I agree
<input type="radio" name="plan" value="free" /> Free
<input type="radio" name="plan" value="pro" /> Pro

Input Attributes

Important attributes: name, value, placeholder, required, disabled, readonly, min, max, maxlength, pattern, and step.

required stops submit until the field is filled. pattern uses regex for custom rules.

Real-life example: required is like "must fill" marked with a red star on school forms.

Validation attributes

<input type="text" name="username" required minlength="3" maxlength="20" />
<input type="tel" name="phone" pattern="[0-9]{10}" placeholder="10 digit mobile" />

Input Form Attributes

form="form-id" links an input outside the form tag. formaction and formmethod on submit buttons can override the form defaults.

These are advanced but useful for one input that belongs to a distant form.

Real-life example: form attribute is like a detachable coupon — the coupon (input) sits on another page but still belongs to the main form when submitted.

Tip: Test forms with required and type="email" before connecting a real server.

Complete contact form

<form id="contact-form" action="/send" method="post">
  <label for="fullname">Full name</label>
  <input type="text" id="fullname" name="fullname" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="topic">Topic</label>
  <select id="topic" name="topic">
    <option value="course">Course help</option>
    <option value="other">Other</option>
  </select>

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Send to Rishtaara</button>
</form>

The HTML Head

Everything in <head> is metadata — not shown on the page but used by browser, Google, and social apps.

Common tags: <title>, <meta charset>, <meta name="viewport">, <meta name="description">, <link rel="stylesheet">, <link rel="icon">.

Real-life example: head is like the back cover of a book with ISBN, author, and price — readers see the story (body), shops need the back cover info.

Full head example

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Learn HTML with Rishtaara — simple lessons." />
  <title>HTML Course</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="icon" href="favicon.ico" />
</head>

HTML Layout (classic structure)

A typical page has header (top), nav (menu), main (content), aside (sidebar), and footer (bottom). Old sites used tables for layout — do not do that now.

Use divs first, then upgrade to semantic tags below.

Real-life example: Layout is like a school building — gate (header), corridor signs (nav), classroom (main), notice board side (aside), office (footer).

Page regions

<header>Logo and title</header>
<nav><a href="/">Home</a></nav>
<main>
  <article>Lesson content here</article>
</main>
<aside>Related links</aside>
<footer>© 2026 Rishtaara</footer>

Responsive meta viewport

Without it, mobile users must pinch-zoom to read text.

Real-life example: Viewport meta is like telling a tailor to measure your actual phone screen, not assume a desktop TV size.

Viewport meta

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

HTML Semantics

Semantic tags describe meaning: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <figcaption>.

They help SEO, accessibility, and clean code. Screen readers jump by landmarks.

Real-life example: Semantic tags are like labeled shelves in a kitchen — "Spices", "Plates" — not just "Box 1", "Box 2".

Semantic article

<article>
  <header>
    <h1>HTML Semantics</h1>
    <p>Published July 2026</p>
  </header>
  <section>
    <h2>Why it matters</h2>
    <p>Clear structure helps everyone.</p>
  </section>
</article>

HTML Style Guide

Write lowercase tags. Quote attributes. Indent nested code. One <h1> per page. Meaningful alt text. Do not use tables for layout.

Keep line length readable. Use comments for big sections only.

Real-life example: A style guide is like classroom rules — uniform, neat notebooks, clear headings — so anyone can read your work.

Lowercase tags and attribute names
Double quotes for attribute values
Semantic HTML before extra divs
Validate with W3C validator when stuck

HTML JavaScript (script tag)

Add JavaScript with <script src="app.js"></script> or inline code inside <script>...</script>.

Put scripts at the end of <body> or use defer so HTML loads first.

Real-life example: script is like hiring a helper after the shop is built — structure (HTML) first, then the helper (JS) handles customers.

External and inline script

<button id="hi">Say Hi</button>
<script>
  document.getElementById("hi").addEventListener("click", function () {
    alert("Hello from Rishtaara!");
  });
</script>
<script src="app.js" defer></script>

HTML Computercode

Show code in pages with <code> for inline snippets and <pre> for multi-line blocks. <kbd> shows keyboard keys. <samp> shows program output.

Real-life example: code tag is like monospace font in your textbook when showing a formula — stands out from normal sentences.

Tip: Always include viewport meta and lang="en" on <html> for every new project.

Code display tags

<p>Use the <code>&lt;p&gt;</code> tag for paragraphs.</p>
<pre><code>&lt;h1&gt;Title&lt;/h1&gt;
&lt;p&gt;Text&lt;/p&gt;</code></pre>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

HTML Media overview

Modern HTML plays video and audio without old browser plugins. Use <video> and <audio> with src or <source> for multiple formats.

Always give controls so users can play, pause, and adjust volume.

Real-life example: Media tags are like a music player and TV built into your web page — no separate app needed.

<video> — movies, tutorials, clips
<audio> — podcasts, music, sound effects
<source> — backup file format if one fails

HTML Video

Use <video controls width="..."> with <source src="file.mp4" type="video/mp4" />. Add text inside for old browsers.

Common formats: mp4 (best support), webm. Keep files small for slow networks.

Real-life example: video tag is like inserting a DVD into a classroom projector — press play on the page itself.

Video element

<video controls width="480">
  <source src="lesson-intro.mp4" type="video/mp4" />
  <source src="lesson-intro.webm" type="video/webm" />
  Your browser does not support video.
</video>

HTML Audio

<audio controls> works like video but for sound only. Good for language lessons or background music with a mute option.

Real-life example: audio tag is like a voice note on WhatsApp — play button, pause, simple and inline.

Audio element

<audio controls>
  <source src="pronunciation.mp3" type="audio/mpeg" />
  Your browser does not support audio.
</audio>

Plug-ins note

Old pages used Flash and other plugins. They are dead on modern browsers for security and mobile support.

Use native <video>, <audio>, or iframe embeds (YouTube) instead. Never ask beginners to install plugins.

Real-life example: Plugins were like extra batteries sold separately — today the phone (browser) has everything built in.

YouTube embed

Embed YouTube with <iframe src="https://www.youtube.com/embed/VIDEO_ID">. Copy embed code from YouTube Share menu.

Set width, height, and title. Lazy loading with loading="lazy" saves data.

Real-life example: YouTube iframe is like putting a small TV in your shop that only plays one channel you chose.

Tip: Compress large video files before hosting yourself — or use YouTube and embed.

YouTube iframe

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Tutorial video"
  loading="lazy"
  allowfullscreen
></iframe>

HTML Canvas — simple drawing

<canvas> is a blank bitmap drawing area. JavaScript draws lines, shapes, and charts on it with getContext("2d").

Canvas is good for games, charts, and dynamic art. It is not SEO-friendly for static images — use <img> or SVG for logos.

Real-life example: Canvas is like a whiteboard — empty until you draw with a marker (JavaScript).

Canvas rectangle

<canvas id="board" width="300" height="150"></canvas>
<script>
  const ctx = document.getElementById("board").getContext("2d");
  ctx.fillStyle = "#2563eb";
  ctx.fillRect(20, 20, 120, 60);
  ctx.fillStyle = "#ffffff";
  ctx.font = "16px sans-serif";
  ctx.fillText("Rishtaara", 35, 55);
</script>

HTML SVG — simple shape

SVG (Scalable Vector Graphics) uses XML tags like <circle>, <rect>, <line> inside <svg>. It scales without blur.

SVG is great for icons, logos, and simple diagrams. You can style with CSS.

Real-life example: SVG is like a plastic stencil — stretch it big or small, edges stay sharp.

Tip: Use SVG for icons and logos. Use canvas when pixels change every frame (games, live charts).

SVG shapes

<svg width="200" height="120" viewBox="0 0 200 120">
  <rect x="10" y="10" width="80" height="50" fill="#22c55e" />
  <circle cx="150" cy="60" r="40" fill="#2563eb" />
  <line x1="10" y1="100" x2="190" y2="100" stroke="#333" stroke-width="2" />
</svg>

HTML Entities

Some characters break HTML if typed raw — like < and &. Use entities: < for <, > for >, & for &.

Entities start with & and end with ;. They display as normal characters in the browser.

Real-life example: Entities are like escape codes — you write a secret symbol so the system knows you mean a literal < not a new tag.

Common entities

<p>5 &lt; 10 and Tom &amp; Jerry</p>
<p>Copyright &copy; 2026 Rishtaara</p>

HTML Symbols

Many math and currency symbols have entities or Unicode: & euro;, & pound;, & times;, & divide;, & plusmn;.

You can also paste Unicode characters directly if your file is UTF-8.

Real-life example: Symbols are like special keys on a Hindi-English keyboard — one code gives ₹, ©, or °.

Symbols

<p>Temperature: 25&deg;C</p>
<p>Price: &euro;10 or &#8377;999</p>

HTML Emojis

Emojis are Unicode characters. With UTF-8 charset you can type them directly: 😀 🎉 📚.

Decimal or hex codes also work: 😀 for 😀.

Real-life example: Emojis in HTML are like stickers on your notebook — same stickers work if your notebook supports Unicode (UTF-8).

Emojis

<p>Welcome to the course! 🎉</p>
<p>Code emoji: &#128218;</p>

HTML Charset

Save your .html files as UTF-8 in your editor. Without this, Hindi or emoji may show as boxes.

Real-life example: Charset is like choosing Hindi+English keyboard layout — wrong layout and typing looks broken.

UTF-8 charset

<head>
  <meta charset="UTF-8" />
  <title>नमस्ते — Hello</title>
</head>

URL Encode

URLs cannot have spaces or special characters raw. Browsers encode them: space becomes %20, & becomes %26.

When you build links in JavaScript, use encodeURIComponent() for query values.

Real-life example: URL encode is like writing PIN code in an address — spaces and symbols get a safe coded form for the post office.

Encoded URL

<a href="https://example.com/search?q=html%20tutorial">Search HTML tutorial</a>

HTML vs XHTML

XHTML was a stricter version — all tags closed, lowercase, quoted attributes. HTML5 is the standard today and is more forgiving.

Write clean HTML5 anyway: close tags, quote attributes, one root <html>. That habit works everywhere.

Real-life example: XHTML was like strict exam handwriting rules. HTML5 is the friendly teacher — but neat writing still gets better marks.

Use <!DOCTYPE html> for HTML5
Close tags and quote attributes for quality
XHTML is legacy — learn HTML5

Tip: Always set charset UTF-8 so Hindi text and emoji work on Rishtaara pages.

Web APIs overview

Web APIs are built-in browser tools JavaScript can use — location, storage, drag-drop, and more. HTML gives the page; APIs add superpowers.

You need JavaScript to call them. They work in secure contexts (https or localhost).

Real-life example: HTML is the shop. Web APIs are services connected to the shop — GPS delivery, storage room, extra workers.

Geolocation API

What: Gets the user's latitude and longitude. When: Maps, local weather, find-nearby-shop features.

The browser asks permission first. Never track users without clear reason.

Real-life example: Like sharing live location on WhatsApp — only works when you allow it.

Get location

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function (pos) {
    console.log("Lat:", pos.coords.latitude);
    console.log("Lng:", pos.coords.longitude);
  });
} else {
  console.log("Geolocation not supported");
}

Drag and Drop API

What: Lets users drag items and drop them on targets. When: Kanban boards, file upload zones, reorder lists.

Use draggable="true" on elements and listen for drag events in JavaScript.

Real-life example: Dragging app icons on your phone home screen — same idea on a web page.

Draggable item

<div draggable="true" id="item">Drag me</div>
<div id="drop">Drop here</div>
<script>
  const item = document.getElementById("item");
  const drop = document.getElementById("drop");
  item.addEventListener("dragstart", () => item.style.opacity = "0.5");
  drop.addEventListener("dragover", (e) => e.preventDefault());
  drop.addEventListener("drop", () => alert("Dropped!"));
</script>

Web Storage API

What: Saves key-value data in the browser — localStorage (stays) and sessionStorage (tab session). When: Theme choice, draft form, quiz progress.

Not for passwords. Data is plain text on that device.

Real-life example: localStorage is like a sticky note on your fridge — stays until you remove it. sessionStorage is a note on one class desk — gone when class ends.

localStorage

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
console.log(theme); // "dark"

Web Workers API

What: Runs JavaScript in a background thread so heavy work does not freeze the page. When: Big calculations, image processing, parsing large files.

Workers cannot touch the DOM directly — they message the main page.

Real-life example: Like hiring an extra kitchen helper to chop vegetables while you serve customers — main page stays responsive.

Simple worker message

// main.js
const worker = new Worker("worker.js");
worker.postMessage("start");
worker.onmessage = (e) => console.log("Result:", e.data);

// worker.js — separate file
self.onmessage = () => self.postMessage("Done counting!");

Server-Sent Events (SSE)

What: Server pushes live updates to the browser over one open connection. When: Live scores, stock prices, chat notifications, progress bars.

Simpler than WebSockets for one-way server-to-client streams.

Real-life example: SSE is like a radio news ticker — the station sends updates; you listen without sending back each time.

Listen to SSE

const source = new EventSource("/updates");
source.onmessage = (event) => {
  console.log("Live update:", event.data);
};

HTML Accessibility

Accessibility (a11y) means everyone can use your site — blind users with screen readers, keyboard-only users, low vision, and motor difficulties.

Use semantic HTML, alt on images, labels on inputs, good color contrast, and aria-* only when HTML alone is not enough.

Real-life example: A ramp and braille signs at school help everyone enter — accessibility features on web pages do the same.

One <h1>, logical heading order
alt text on every meaningful image
<label> linked to every form field
Focus visible on buttons and links
lang attribute for screen reader pronunciation

Accessible button and image

<button type="button" aria-label="Close dialog">×</button>
<img src="chart.png" alt="Sales grew 20% from Jan to Jun" />

Summary of HTML

HTML is the structure of the web. You learned tags for text, links, images, lists, tables, forms, media, semantics, and more.

Good HTML is the foundation — CSS makes it beautiful, JavaScript makes it alive, and accessibility makes it for everyone.

Real-life example: You started with an empty plot (blank page). Now you have a house frame with rooms, doors, windows, and switches — ready for paint (CSS) and electricity (JS).

Structure with semantic HTML5
Connect pages with links and paths
Collect data with accessible forms
Add media, graphics, and APIs with JS
Next in this course: CSS styling in depth

Tip: Build one full page combining everything — header, nav, article, form, image, and footer — and share it on Rishtaara when ready.

What is CSS?

CSS (Cascading Style Sheets) is the language that controls how a web page looks. HTML tells the browser what is on the page. CSS tells the browser how big, what color, and where things should appear.

Real-life example: HTML is like the walls and rooms of a house. CSS is the paint, lights, furniture, and decoration that make the house feel nice to live in.

CSS was made to separate content (HTML) from design (CSS).
One CSS file can style many HTML pages.
You can change the whole look of a site by editing one stylesheet.

CSS Syntax

A CSS rule has a selector (which element to style) and a declaration block (what styles to apply). Each declaration is a property and a value, separated by a colon and ended with a semicolon.

Real-life example: A selector is like a name tag on a person. The declarations are the instructions: wear a blue shirt, sit in the front row.

Always end each CSS declaration with a semicolon (;). Missing semicolons are one of the most common beginner mistakes.

Basic rule structure

/* selector { property: value; } */
p {
  color: navy;
  font-size: 18px;
  line-height: 1.6;
}

h1 {
  color: #0891b2;
  text-align: center;
}

Three ways to add CSS

You can write CSS in three places: inline on one element, inside a <style> tag in the HTML head, or in a separate .css file linked from HTML. For real projects, use an external file.

Real-life example: Inline CSS is like writing a note on one cup only. Internal CSS is a small rule sheet for one room. External CSS is a master rule book for the whole house.

Inline, internal, and external CSS

<!-- 1. Inline (avoid for big projects) -->
<p style="color: red; font-size: 16px;">Hello</p>

<!-- 2. Internal (OK for tiny demos) -->
<head>
  <style>
    p { color: green; }
  </style>
</head>

<!-- 3. External (best for real sites) -->
<head>
  <link rel="stylesheet" href="style.css" />
</head>

style.css (external file)

body {
  font-family: system-ui, sans-serif;
  margin: 0;
  background: #f8fafc;
}

p {
  color: #334155;
  max-width: 60ch;
}

CSS Comments

Comments help you remember why you wrote certain styles. They are ignored by the browser. Wrap comments in /* and */.

Real-life example: Comments are like sticky notes on a recipe — they help you cook again later, but guests do not eat the notes.

Comment examples

/* This is a full-line comment */

.card {
  padding: 1rem; /* padding inside the card */
  /* border-radius: 8px; — turned off for now */
}

Common CSS Errors

Small typos can break your whole design. Check spelling of property names, always use colons and semicolons, and make sure selectors match your HTML.

Real-life example: A typo in CSS is like dialing the wrong phone number — nothing connects, even if everything else is perfect.

Wrong: colour: blue; (British spelling — use color in CSS).
Wrong: font-size 16px (missing colon).
Wrong: color: blue (missing semicolon before next line).
Wrong: .buton { } when HTML uses class="button".
Wrong: forgetting to link style.css in HTML.

Use browser DevTools (F12 → Elements → Styles). Crossed-out rules mean another rule won. Red warnings mean a syntax error.

Correct vs broken

/* ✅ Correct */
.button {
  color: white;
  background: #0891b2;
  padding: 0.5rem 1rem;
}

/* ❌ Broken — typo in property name */
.buton {
  bakground: red;
}

Basic Selectors

Selectors tell CSS which HTML elements to style. You can select by tag name, class, id, or group many selectors together.

Real-life example: Tag selector (p) is like saying all students. Class (.card) is like saying all students in the science club. Id (#logo) is like one specific student with a unique roll number.

Element, class, id, and grouping

/* All paragraphs */
p { line-height: 1.6; }

/* All elements with class="card" */
.card {
  border: 1px solid #e2e8f0;
  padding: 1rem;
}

/* One unique element with id="logo" */
#logo {
  font-weight: 800;
  font-size: 1.25rem;
}

/* Group selectors — same styles for many */
h1, h2, h3 {
  color: #0f172a;
}

Combinators

Combinators describe relationships between elements. Descendant (space), child (>), adjacent sibling (+), and general sibling (~) help you target nested or nearby elements.

Real-life example: Descendant selector is like all books inside a library. Child selector is like books only on the front shelf, not in the back room.

Combinator examples

/* All <a> inside .nav (any depth) */
.nav a {
  text-decoration: none;
  color: #0891b2;
}

/* Direct <li> children of .menu only */
.menu > li {
  list-style: none;
}

/* <p> immediately after <h2> */
h2 + p {
  margin-top: 0.25rem;
  color: #64748b;
}

/* All <p> siblings after <h2> */
h2 ~ p {
  font-size: 0.95rem;
}

Attribute Selectors

Attribute selectors match elements by their HTML attributes — like type, href, or data-* values. They are useful for forms and links.

Real-life example: Attribute selectors are like finding people by uniform color or badge type, not just by name.

Common attribute patterns

/* Inputs with type="text" */
input[type="text"] {
  border: 1px solid #cbd5e1;
  padding: 0.5rem;
}

/* Links that open in new tab */
a[target="_blank"] {
  color: #7c3aed;
}

/* Any element with a title attribute */
[title] {
  cursor: help;
}

/* Class starts with "btn-" */
[class^="btn-"] {
  border-radius: 999px;
  font-weight: 600;
}

Pseudo-classes

Pseudo-classes style an element in a special state — like when you hover, focus, or visit a link. They start with a single colon (:).

Real-life example: :hover is like a shop door that lights up when you walk near it. :focus is like a microphone that glows when someone is speaking.

Useful pseudo-classes

a:link { color: #0891b2; }
a:visited { color: #6366f1; }
a:hover { text-decoration: underline; }
a:active { color: #be123c; }

input:focus {
  outline: 2px solid #0891b2;
  border-color: #0891b2;
}

li:first-child { font-weight: 700; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background: #f1f5f9; }

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

Pseudo-elements

Pseudo-elements style a specific part of an element. They use double colons (::). Common ones are ::before, ::after, and ::first-line.

Real-life example: ::before is like adding a decorative sticker before a book title. ::first-line is like highlighting only the first sentence of a paragraph.

Prefer class selectors for styling hooks. Use id only when something is truly unique on the page.

Pseudo-element examples

h1::first-letter {
  font-size: 2.5rem;
  color: #0891b2;
}

.quote::before {
  content: "“";
  color: #94a3b8;
  font-size: 2rem;
}

.quote::after {
  content: "”";
  color: #94a3b8;
}

p::first-line {
  font-weight: 600;
}

input::placeholder {
  color: #94a3b8;
}

CSS Colors

CSS offers many ways to set color: color names, HEX, RGB, RGBA, HSL, and HSLA. All of them paint text, backgrounds, and borders.

Real-life example: Color names are like saying red or blue. HEX and RGB are like exact paint mix codes from a hardware shop.

Color formats

.named { color: tomato; }

.hex {
  color: #0891b2;       /* cyan */
  background: #f0fdfa;
}

.rgb {
  color: rgb(8, 145, 178);
  background: rgb(240, 253, 250);
}

.rgba {
  /* last number = opacity 0 to 1 */
  background: rgba(8, 145, 178, 0.15);
}

.hsl {
  /* hue, saturation, lightness */
  color: hsl(188, 91%, 36%);
  background: hsl(166, 76%, 97%);
}

Background Color

background-color fills the area behind an element's content and padding. It does not include the margin area.

Real-life example: background-color is like painting the wall behind a photo frame, not the space outside the frame.

Background color

body {
  background-color: #f8fafc;
}

.alert {
  background-color: #fef2f2;
  color: #991b1b;
  padding: 1rem;
  border-radius: 8px;
}

Background Image & Repeat

You can set a background image with background-image. background-repeat controls whether the image tiles. Use no-repeat for logos and hero sections.

Real-life example: repeat is like wallpaper that copies the same pattern. no-repeat is like hanging one big poster on the wall.

Image and repeat

.hero {
  background-image: url("hero-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.pattern {
  background-image: url("dots.png");
  background-repeat: repeat;
}

Background Attachment & Shorthand

background-attachment: fixed keeps the image still while you scroll (parallax feel). The shorthand background combines color, image, repeat, position, and size in one line.

Real-life example: fixed attachment is like a window view that stays still while furniture moves. Shorthand is like writing one order instead of five separate notes.

Attachment and shorthand

.parallax {
  background: url("sky.jpg") center / cover no-repeat fixed;
  min-height: 60vh;
}

.card {
  /* color image repeat position / size */
  background: #fff url("icon.svg") no-repeat 1rem center / 24px;
  padding-left: 3rem;
}

Opacity

opacity makes the whole element see-through, from 0 (invisible) to 1 (solid). It affects the element and all its children together.

Real-life example: opacity is like frosted glass — everything inside the glass looks lighter, not just one part.

For text on colored backgrounds, prefer rgba or hsla on background-color instead of opacity on the whole box — child text stays sharp.

Opacity vs rgba

.fade-box {
  opacity: 0.7;
}

/* Better for text readability — only background is transparent */
.soft-panel {
  background: rgba(15, 23, 42, 0.6);
  color: white;
  padding: 1.5rem;
}

CSS Borders

border adds a line around an element. You set width, style (solid, dashed, dotted), and color. You can style each side separately.

Real-life example: A border is like a frame around a picture. width is frame thickness, style is frame pattern, color is frame paint.

Border basics

.box {
  border: 2px solid #0891b2;
  padding: 1rem;
}

.card {
  border-top: 4px solid #7c3aed;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  border-left: 1px solid #e2e8f0;
}

.dashed {
  border: 2px dashed #94a3b8;
}

Outline

outline draws a line outside the border. It does not take space in layout. Browsers use it for keyboard focus rings — do not remove focus styles without replacing them.

Real-life example: outline is like a highlighter pen around a box — it sits outside and does not push other boxes away.

Outline for accessibility

button:focus-visible {
  outline: 3px solid #0891b2;
  outline-offset: 2px;
}

/* Avoid this without a replacement */
/* button:focus { outline: none; } */

Rounded Corners (border-radius)

border-radius rounds the corners of an element. Use small values for cards and large values (or 999px) for pill buttons.

Real-life example: border-radius is like cutting rounded corners on paper with scissors instead of sharp 90-degree corners.

border-radius patterns

.card {
  border-radius: 12px;
}

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%; /* circle */
}

.pill {
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
}

.fancy {
  border-radius: 20px 4px 20px 4px;
}

Border Images

border-image lets you use a picture as a border. It is advanced and less common than solid borders, but useful for decorative frames.

Real-life example: border-image is like wrapping a gift with a patterned ribbon that becomes the box edge.

For most UI work, solid border + border-radius is enough. Save border-image for special decorative designs.

Simple border-image

.fancy-frame {
  border: 16px solid transparent;
  border-image: url("frame.png") 30 round;
  padding: 1rem;
}

The Box Model

Every HTML element is a box with four layers: content, padding, border, and margin. Content holds text and images. Padding is space inside the border. Margin is space outside the border.

Real-life example: Content is a book. Padding is bubble wrap inside the box. Border is the cardboard edge. Margin is empty space between this box and the next box on the shelf.

See all four layers

.demo-box {
  width: 200px;
  padding: 20px;
  border: 5px solid #0891b2;
  margin: 30px;
  background: #ecfeff;
}

Box model layers

Padding & Margin

padding adds space inside the element. margin adds space outside. You can set all four sides at once or one side at a time (top, right, bottom, left).

Real-life example: padding is space between your shirt and your skin. margin is space between you and the next person in a queue.

Padding and margin shorthand

.card {
  padding: 1rem;              /* all sides */
  margin: 1.5rem auto;        /* top/bottom 1.5rem, left/right auto */
}

.section {
  padding: 2rem 1rem;         /* vertical | horizontal */
  margin-bottom: 3rem;
}

.no-top-gap {
  margin-top: 0;
}

Width & Height

width and height set the size of the content area by default. Percentages relate to the parent. Use min-height for sections that should fill the screen.

Real-life example: width and height are like setting the size of a suitcase before packing clothes inside.

Sizing examples

.sidebar {
  width: 250px;
  min-height: 100vh;
}

.hero {
  width: 100%;
  min-height: 70vh;
}

.thumbnail {
  width: 120px;
  height: 120px;
  object-fit: cover;
}

box-sizing & max-width

By default, width does not include padding and border (content-box). box-sizing: border-box makes width include padding and border — much easier for layouts. max-width stops elements from becoming too wide on big screens.

Real-life example: border-box is like a tiffin box labeled 500ml — the label includes the walls, not just the food inside.

Modern sizing reset

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

.container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 1rem;
}

Measurement Mindset

Use px for small fixed sizes, rem for text and spacing (scales with root font size), % for fluid widths, and vh/vw for viewport-based sections.

Real-life example: rem is like measuring in cups that grow if the whole kitchen scale changes. px is a fixed ruler that never stretches.

1rem usually equals 16px if html { font-size: 100%; }.
Use rem for padding and font-size so users who zoom see consistent layouts.
Use max-width + margin: auto to center content columns.

Open DevTools, click an element, and inspect the box model diagram — it shows content, padding, border, and margin visually.

CSS Text

Text properties control alignment, spacing, decoration, and transformation. Good text styling makes pages easy to read.

Real-life example: text-align is like choosing left, center, or right alignment on a school notice board.

Common text properties

p {
  text-align: left;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.link-line {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

CSS Fonts

font-family picks the typeface. font-size sets size. font-weight controls boldness. Always add fallback fonts in case the first one fails to load.

Real-life example: font-family is like choosing Hindi, English, or Marathi for a sign — with backup languages if the first font is missing.

Font stack

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 400;
}

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
}

Icons (Font Awesome & Google)

Icon fonts and SVG icons add symbols without many image files. Font Awesome and Google Material Icons are popular. Load them from a CDN or npm in real projects.

Real-life example: Icon fonts are like a sticker sheet — one font file gives you hundreds of small symbols (phone, email, menu).

Icon usage idea

<!-- Font Awesome (CDN link in head) -->
<a href="tel:+911234567890">
  <i class="fa-solid fa-phone"></i> Call us
</a>

<!-- Google Material Icons -->
<span class="material-icons">menu</span>

Style icon + text

.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #0891b2;
  text-decoration: none;
}

Styling Links & Lists

Links should look clickable and show hover/focus states. Lists can lose default bullets and become navigation or feature lists.

Real-life example: Styling links is like coloring road signs blue so drivers know they can follow them.

Links and lists

a {
  color: #0891b2;
  text-decoration: none;
}
a:hover { text-decoration: underline; }

.nav-list {
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: 0;
  margin: 0;
}

.feature-list li {
  list-style: square;
  margin-bottom: 0.5rem;
  color: #334155;
}

Styling Tables

Tables display rows and columns of data. Use border-collapse for clean grids, zebra stripes for readability, and padding for breathing room.

Real-life example: A styled table is like a neat marksheet — clear lines, headers stand out, and every row is easy to scan.

Table styles

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th, td {
  border: 1px solid #e2e8f0;
  padding: 0.75rem 1rem;
  text-align: left;
}

th {
  background: #f1f5f9;
  font-weight: 700;
}

tr:nth-child(even) {
  background: #f8fafc;
}

Text Effects & Google Fonts

Text effects include shadows, gradients on text, and spacing tricks. Google Fonts lets you use free custom fonts — link the font in HTML, then use it in CSS.

Real-life example: text-shadow is like a faint shadow behind letters on a shop sign. Google Fonts is like borrowing beautiful handwriting from a free library.

Do not load too many font weights — 2–3 weights (regular, semibold, bold) keep pages fast.

Google Fonts + text effects

<!-- In HTML head -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" />

Custom font and effects

body {
  font-family: "Poppins", sans-serif;
}

.hero-title {
  text-shadow: 0 2px 12px rgba(8, 145, 178, 0.35);
}

.gradient-text {
  background: linear-gradient(90deg, #0891b2, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

CSS Display

display controls how an element behaves in layout. block elements take full width and start on a new line. inline elements flow with text. none hides the element completely.

Real-life example: block is like a full-width bus stop. inline is like a word in a sentence. none is like removing a poster from the wall.

display values

.block-box {
  display: block;
  background: #ecfeff;
  margin-bottom: 1rem;
}

.hidden-mobile {
  display: none; /* use carefully — still in DOM */
}

CSS Position

position sets how an element is placed. static is default. relative moves from its normal spot. absolute is placed inside a positioned parent. fixed sticks to the viewport. sticky blends both.

Real-life example: fixed is like a sticker on your phone screen that stays while you scroll. absolute is like placing a sticker inside one photo frame.

position types

.relative-badge {
  position: relative;
  top: 4px;
}

.parent {
  position: relative;
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ef4444;
  color: white;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
}

Position Offsets & z-index

top, right, bottom, and left move positioned elements. z-index controls stacking order — higher numbers appear on top.

Real-life example: z-index is like stack order of plates — the plate with the higher number sits on top.

Offsets and stacking

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 1000;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
}

Overflow

overflow controls what happens when content is bigger than its box. hidden cuts off extra content. auto adds scrollbars when needed. scroll always shows scrollbars.

Real-life example: overflow: hidden is like a window too small for a long banner — you only see the part that fits.

overflow examples

.scroll-box {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  padding: 1rem;
}

.avatar-crop {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 50%;
}

Float (legacy) & inline-block

float was used for text wrapping around images and old layouts. Today prefer Flexbox and Grid. inline-block lets elements sit side by side but still accept width and height.

Real-life example: float is like an old boat layout — still floating in some old websites. inline-block is like small boxes that can sit in a row but still have fixed size.

float note and inline-block

/* Legacy — know it when reading old code */
.img-float {
  float: left;
  margin-right: 1rem;
}

/* Modern alternative for small rows */
.tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: #ecfeff;
  border-radius: 999px;
  margin: 0.25rem;
}

Align & Centering

text-align centers inline content. margin: auto centers block elements with a set width. For modern layouts, Flexbox and Grid centering are easier and more powerful.

Real-life example: margin: auto is like equal empty space on left and right of a car in a parking slot.

For new projects, use Flexbox or Grid for layout — not float.

Centering patterns

.narrow {
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

Navigation Bars

A navbar usually has a logo, links, and maybe a button. Flexbox makes it easy to spread items left and right and wrap on small screens.

Real-life example: A navbar is like the main menu board at a restaurant — logo on one side, dish names in the middle, order button on the other side.

Simple navbar

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #0f172a;
  color: white;
}

.navbar a {
  color: white;
  text-decoration: none;
}

.navbar nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

Dropdowns

Dropdowns show extra links when you hover or click. Hide the menu by default, then show it when the parent is hovered or has a .open class (JavaScript can toggle .open).

Real-life example: A dropdown is like a folder tab — closed normally, opens to show more papers inside.

CSS-only hover dropdown

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.5rem 0;
  display: none;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu a {
  display: block;
  padding: 0.5rem 1rem;
  color: #0f172a;
}

Image Gallery

A gallery shows many images in a grid. Use CSS Grid or Flexbox with gap. Add hover effects for a polished feel.

Real-life example: An image gallery is like a photo wall at a wedding — many frames arranged neatly on one wall.

Responsive gallery

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

.gallery img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.2s ease;
}

.gallery img:hover {
  transform: scale(1.03);
}

Image Sprites

A sprite is one image file with many icons. background-position shows only one part. This was popular before SVG icons — still useful to understand old code.

Real-life example: A sprite sheet is like a stamp sheet — you peel one stamp by showing only that corner of the sheet.

Sprite icon

.icon-home {
  width: 24px;
  height: 24px;
  background: url("icons-sprite.png") no-repeat 0 0;
}

.icon-user {
  width: 24px;
  height: 24px;
  background: url("icons-sprite.png") no-repeat -24px 0;
}

Forms & Buttons

Forms need clear labels, comfortable input size, and visible focus states. Buttons should look clickable with padding, color, and hover feedback.

Real-life example: A styled form is like a clean government form — big boxes to write in, clear labels, and a bright submit button.

Form and button styles

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

input, textarea, select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font: inherit;
}

input:focus, textarea:focus, select:focus {
  outline: 2px solid #0891b2;
  border-color: #0891b2;
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.25rem;
  background: #0891b2;
  color: white;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover {
  background: #0e7490;
}

Tooltips & Pagination

Tooltips are small hint boxes on hover. Pagination splits long content into numbered pages. Both are common UI patterns built mostly with CSS and a little HTML structure.

Real-life example: A tooltip is like a whispered hint when you point at something. Pagination is like page numbers at the bottom of a notebook.

Tooltip and pagination

.tooltip {
  position: relative;
  cursor: help;
}

.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: white;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.tooltip:hover::after {
  opacity: 1;
}

.pagination {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

.pagination a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  text-decoration: none;
  color: #0f172a;
}

.pagination a.active {
  background: #0891b2;
  color: white;
  border-color: #0891b2;
}

CSS Units

CSS has absolute units (px) and relative units (%, em, rem, vw, vh). Relative units help responsive and accessible design.

Real-life example: px is a fixed ruler. rem is a ruler that grows if the user changes base text size — better for eyesight needs.

Common units

html { font-size: 100%; } /* usually 16px */

.text {
  font-size: 1.125rem;  /* 18px if root is 16px */
  padding: 1rem;
  margin-bottom: 2rem;
}

.hero {
  min-height: 80vh;
  width: 100%;
}

.sidebar {
  width: 25%;
}

Inheritance

Some CSS properties pass from parent to child — like color and font-family. Others do not — like margin and border. You can use inherit to force a child to copy a parent value.

Real-life example: Inheritance is like children copying the family language at home — but not copying each person's pocket money.

Inheritance example

body {
  color: #334155;
  font-family: system-ui, sans-serif;
}

.card {
  /* children inherit color and font unless overridden */
  border: 1px solid #e2e8f0;
}

.link-inherit {
  color: inherit;
  text-decoration: underline;
}

Specificity & !important

When two rules conflict, the browser picks a winner using specificity (id > class > tag) and source order. !important forces a rule to win but makes code hard to maintain — use rarely.

Real-life example: Specificity is like priority numbers on tickets — a VIP ticket beats a normal ticket. !important is like shouting over everyone — use only in emergencies.

Specificity examples

p { color: gray; }           /* tag — low */
.text { color: blue; }         /* class — medium */
#main { color: green; }         /* id — high */

/* Wins: green (if same element has id="main") */

.alert {
  color: red !important; /* avoid unless fixing third-party CSS */
}

Cascade order

Math Functions (calc, min, max, clamp)

CSS can do math. calc() adds and subtracts sizes. min(), max(), and clamp() create flexible values that respond to screen size.

Real-life example: clamp() is like a tailor — never smaller than S, never bigger than L, but flexible in between.

Math in CSS

.sidebar-layout {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: calc(1rem + 2vw);
}

.fluid-heading {
  font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}

.box {
  width: min(100%, 900px);
  margin-inline: auto;
}

CSS Counters

Counters automatically number headings, steps, or list items using counter-reset and counter-increment — no manual numbering in HTML.

Real-life example: Counters are like an automatic ticket machine that prints 1, 2, 3 without you writing numbers by hand.

Step counter

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
}

.steps li {
  counter-increment: step;
  margin-bottom: 1rem;
  padding-left: 2.5rem;
  position: relative;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  background: #0891b2;
  color: white;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
}

Optimization, Accessibility & Layout Overview

Write small, reusable classes. Avoid deep nesting. Use semantic HTML first. Ensure color contrast, focus states, and readable font sizes. Most sites use header, main, sections, and footer — styled with Flexbox or Grid.

Real-life example: Optimization is like packing a school bag — only what you need, neatly arranged, so you are not slow walking to class.

Combine CSS files in production to reduce requests.
Remove unused CSS in large projects (build tools help).
Minimum body text: about 16px (1rem).
Contrast ratio: dark text on light background (or reverse) with good difference.
Layout overview: mobile-first base styles, then wider breakpoints.

Accessibility is not extra — visible focus rings, alt text in HTML, and readable colors help everyone, including Hindi readers using screen readers.

Linear Gradients

A linear gradient blends two or more colors in a straight line. You choose direction (to right, 45deg) and color stops.

Real-life example: A linear gradient is like a sunset sky — orange slowly changing to purple from left to right.

Linear gradient

.hero {
  background: linear-gradient(135deg, #0891b2, #7c3aed);
  color: white;
  padding: 3rem 1.5rem;
}

.subtle-bg {
  background: linear-gradient(to bottom, #f8fafc, #ecfeff);
}

Radial & Conic Gradients

Radial gradients spread from a center point like a ripple. Conic gradients go around a circle like a color wheel or pie chart.

Real-life example: Radial is like a torch light on a wall — bright in center, darker outside. Conic is like a pizza cut into colored slices in a circle.

Radial and conic

.spotlight {
  background: radial-gradient(circle at top, #fef3c7, #f8fafc 60%);
}

.color-wheel {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#ef4444, #eab308, #22c55e, #3b82f6, #ef4444);
}

Box Shadow

box-shadow adds depth behind an element. Values: horizontal offset, vertical offset, blur, spread, and color. Multiple shadows can stack.

Real-life example: box-shadow is like a soft shadow of a book on a table — makes the book look lifted.

Box shadows

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(15, 23, 42, 0.08);
}

.card:hover {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
}

.elevated {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 8px 24px rgba(15, 23, 42, 0.1);
}

Text Shadow & Advanced Tips

text-shadow adds depth to letters. Combine gradients with semi-transparent overlays for modern hero sections. Use color-mix() in modern browsers to blend colors cleanly.

Real-life example: text-shadow on white text over a photo is like a thin dark outline so letters stay readable on a busy background.

Heavy shadows on many elements can slow painting on old phones — use shadows on cards and modals, not every small tag.

Text shadow and layered backgrounds

.hero-title {
  color: white;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.hero-overlay {
  background:
    linear-gradient(rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.55)),
    url("photo.jpg") center / cover no-repeat;
}

2D Transforms

transform moves, rotates, scales, or skews an element without changing document flow. Common functions: translate, rotate, scale, skew.

Real-life example: transform is like sliding a paper on a desk — it moves visually but the desk space stays the same.

2D transform

.card:hover {
  transform: translateY(-4px) scale(1.02);
}

.icon-spin-hover:hover {
  transform: rotate(12deg);
}

.skew-badge {
  transform: skewX(-6deg);
}

3D Transforms (simple)

3D transforms add perspective and rotateX/rotateY for flip effects. Set perspective on the parent for realistic depth.

Real-life example: rotateY is like turning a playing card to show the back face — flat object with a flip feeling.

Simple 3D flip

.flip-card {
  perspective: 800px;
}

.flip-inner {
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

CSS Transitions

Transitions smoothly change CSS properties over time when a state changes (like hover or a class toggle). Specify property, duration, and easing.

Real-life example: transition is like a door closing slowly instead of slamming shut — smooth and pleasant.

Transition examples

.btn {
  background: #0891b2;
  color: white;
  transition: background 0.25s ease, transform 0.2s ease;
}

.btn:hover {
  background: #7c3aed;
  transform: translateY(-2px);
}

CSS Animations (@keyframes)

Animations run automatically or loop using @keyframes. You define start and end styles, then attach the animation to a selector.

Real-life example: @keyframes is like storyboard frames for a cartoon — frame 0%, frame 50%, frame 100% — played as a short film.

Keyframe animation

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-content {
  animation: fadeInUp 0.7s ease-out both;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.live-dot {
  animation: pulse 1.5s ease-in-out infinite;
}

Respect prefers-reduced-motion

Some users feel dizzy from motion. The prefers-reduced-motion media query lets you turn off or simplify animations for them.

Real-life example: This setting is like offering a calm elevator instead of a roller coaster — same destination, gentler ride.

Use short transitions for buttons and cards. Save big looping animations for special hero moments only.

Accessible motion

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Image Styling

Images can have borders, shadows, rounded corners, and hover effects. Always set max-width: 100% so images shrink on mobile.

Real-life example: Styling an image is like choosing a frame and mat for a photo before hanging it on the wall.

Styled image

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.photo {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

Image Modal Idea & Centering

A modal is a popup layer over the page. CSS positions it fixed in the center with a dark backdrop. JavaScript usually opens/closes it — CSS handles the look.

Real-life example: A modal is like a magnifying glass sheet placed over a book — the page is still there, but you focus on one big image.

Centered modal (CSS)

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.7);
  padding: 1rem;
}

.modal img {
  max-width: min(90vw, 700px);
  max-height: 85vh;
  border-radius: 8px;
}

.center-img-wrap {
  display: grid;
  place-items: center;
  min-height: 240px;
}

CSS Filters

filter changes how an image looks — blur, grayscale, brightness, contrast. Hover filters are a simple way to add polish.

Real-life example: filter: grayscale is like a black-and-white TV. blur is like looking through frosted glass.

Filter examples

.thumb {
  filter: grayscale(30%);
  transition: filter 0.3s ease;
}

.thumb:hover {
  filter: none;
}

.soft-bg {
  filter: blur(4px) brightness(0.9);
}

Shapes (clip-path) & object-fit

clip-path cuts an element into shapes like circles or slanted edges. object-fit controls how an image fills its box — cover crops nicely, contain shows the full image.

Real-life example: clip-path is like cutting paper with scissors into a circle. object-fit: cover is like cropping a photo to fill a frame without stretching faces.

clip-path and object-fit

.avatar {
  width: 96px;
  height: 96px;
  object-fit: cover;
  object-position: center top;
  clip-path: circle(50%);
}

.banner-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
}

.slant {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

Masking (intro)

mask-image hides parts of an element using another image or gradient. It is similar to clip-path but can use soft edges.

Real-life example: Masking is like a stencil — paint only goes through the cut-out shape.

Simple gradient mask

.fade-bottom {
  mask-image: linear-gradient(to bottom, black 60%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent);
}

CSS Variables (Custom Properties)

CSS variables store values you reuse — colors, spacing, fonts. Define them with --name on :root, use them with var(--name).

Real-life example: Variables are like labeled jars in the kitchen — --salt, --sugar — change the jar once, every recipe updates.

CSS variables

:root {
  --primary: #0891b2;
  --text: #0f172a;
  --radius: 12px;
  --space: 1rem;
}

.btn {
  background: var(--primary);
  color: white;
  border-radius: var(--radius);
  padding: var(--space) calc(var(--space) * 1.5);
}

@property (intro)

@property registers a custom property with a type and initial value. It helps animations on variables work more predictably in modern browsers.

Real-life example: @property is like telling the kitchen exactly what is inside each jar — number, color, or length — so machines can measure it safely.

Registered custom property

@property --progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.bar {
  width: var(--progress);
  height: 8px;
  background: #0891b2;
  transition: --progress 0.4s ease;
}

Media Queries

Media queries apply CSS only when a condition is true — usually screen width. This is the heart of responsive design.

Real-life example: Media queries are like different clothes for seasons — same person, different outfit when weather (screen size) changes.

Mobile-first media queries

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Responsive breakpoints

Multiple Columns

column-count and column-gap split text into newspaper-style columns — great for long articles on wide screens.

Real-life example: Multi-column text is like a Hindi newspaper — long story flows down column one, then continues in column two.

Column layout

.article-columns {
  column-count: 2;
  column-gap: 2rem;
  column-rule: 1px solid #e2e8f0;
}

@media (max-width: 700px) {
  .article-columns {
    column-count: 1;
  }
}

User Interface (resize, outline, caret)

resize lets users drag to resize textareas. caret-color changes the blinking text cursor color. Always keep visible focus for keyboard users.

Real-life example: resize is like a stretchable rubber band on a box corner. caret-color is like choosing the color of the pen tip while typing.

Start with mobile styles first, then add min-width breakpoints — easier than fixing desktop-first layouts later.

UI properties

textarea {
  resize: vertical;
  min-height: 120px;
  caret-color: #0891b2;
}

input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #0891b2;
  outline-offset: 2px;
}

Flexbox Introduction

Flexbox lays out items in a row or column. It solves alignment, equal heights, and spacing problems that were hard with old CSS.

Real-life example: Flexbox is like arranging books on a shelf — you choose row or column, gap between books, and whether they stretch to the same height.

Flex container

Flex Container Properties

On the parent: display: flex, flex-direction (row/column), justify-content (main axis alignment), align-items (cross axis alignment), gap, and flex-wrap.

Real-life example: justify-content: space-between is like two friends sitting at opposite ends of a bench with empty space between them.

Container properties

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.column-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

Flex Item Properties

On children: flex-grow (share extra space), flex-shrink (shrink if needed), flex-basis (starting size), and align-self (override one item's alignment).

Real-life example: flex: 1 is like saying each child gets an equal share of leftover space on the plate.

Item properties

.sidebar { flex: 0 0 240px; }
.main { flex: 1 1 auto; }

.push-right {
  margin-left: auto;
}

.card-equal {
  flex: 1 1 220px;
}

Flex Navbar Pattern

A classic Flexbox pattern: logo and links in one row, space-between, wrap on small screens.

Real-life example: Like a shop counter — shop name on the left, menu items spread nicely, order button on the right.

Flex navbar

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #0f172a;
}

.navbar nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.navbar a {
  color: white;
  text-decoration: none;
}

Flex Card Row & Center Everything

Use flex-wrap and flex: 1 1 250px for responsive card rows. Use justify-content + align-items center to dead-center content vertically and horizontally.

Real-life example: Centering with Flexbox is like placing a plate exactly in the middle of a table — equal space on all sides.

When Flexbox feels confusing, draw main axis (flex-direction) and cross axis on paper — alignment clicks faster.

Card row and center

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card-row .card {
  flex: 1 1 250px;
  background: white;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.page-center {
  min-height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

Grid Introduction

CSS Grid splits a page into rows and columns like a spreadsheet. It is perfect for full page layouts, dashboards, and card grids.

Real-life example: Grid is like a chess board or Excel sheet — fixed rows and columns where each piece (element) can sit in one or many cells.

Page grid areas

Grid Container

On the parent: display: grid, grid-template-columns, grid-template-rows, gap, and grid-template-areas for named regions.

Real-life example: grid-template-areas is like labeling rooms on a house map — header, sidebar, main, footer.

Grid container

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
  gap: 1rem;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Grid Items

Children can span multiple columns or rows with grid-column and grid-row. place-items centers content inside a cell.

Real-life example: grid-column: span 2 is like one shop taking two stalls in a market row.

Spanning cells

.wide-card {
  grid-column: span 2;
}

.tall-box {
  grid-row: span 2;
}

.center-cell {
  display: grid;
  place-items: center;
}

12-Column Layout

Many design systems use 12 columns. Each section spans some columns — flexible and familiar to designers.

Real-life example: A 12-column grid is like cutting a roti into 12 equal slices — a hero might use all 12, a card might use 4.

12-column grid

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-12 { grid-column: span 12; }

@media (max-width: 768px) {
  .span-4, .span-6 {
    grid-column: span 12;
  }
}

CSS @supports

@supports checks if the browser understands a CSS feature before applying rules. Use it for progressive enhancement — base layout works everywhere, extras where supported.

Real-life example: @supports is like asking does this kitchen have an oven? before baking — otherwise use the stove.

Use Grid for page layout (header, sidebar, footer). Use Flexbox for one-dimensional rows like navbars and toolbars. Many sites combine both.

@supports example

.cards {
  display: block;
}

@supports (display: grid) {
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
  }
}

Responsive Web Design (RWD) Intro

Responsive web design means one website looks good on phone, tablet, and desktop. You use fluid layouts, flexible images, and media queries instead of building three separate sites.

Real-life example: RWD is like one school uniform with adjustable buttons — same clothes, fits different body sizes.

Mobile-first: write small screen CSS first, add wider rules later.
Use relative units (rem, %, fr) more than fixed px for layout.
Test at 320px (small phone), 768px (tablet), and 1200px (desktop).

Viewport Meta Tag

Without the viewport meta tag, mobile browsers zoom out and show a tiny desktop page. This tag tells the browser to use the device width.

Real-life example: Viewport meta is like telling a tailor your actual height — otherwise they guess wrong and the coat does not fit.

Required viewport meta

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

Grid View & Media Queries

Grid view means seeing many columns of content on wide screens and fewer on narrow screens. Media queries switch column counts and spacing at breakpoints.

Real-life example: Grid view is like market stalls — many stalls on a wide street, only one stall line on a narrow lane.

Responsive grid columns

.products {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .products { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .products { grid-template-columns: repeat(3, 1fr); }
}

RWD Images & Videos

Images should never overflow the screen. Videos in iframes need a wrapper with aspect-ratio so they scale cleanly.

Real-life example: A responsive image is like a rubber photo frame — shrinks on a small wall, grows on a big wall, never cracks the wall.

Fluid media

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

.video-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 800px;
}

.video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

CSS Frameworks & Templates (note)

Frameworks like Bootstrap and Tailwind give ready-made classes for grids, buttons, and spacing. Templates are starter HTML/CSS layouts you customize. Learn plain CSS first — then tools speed you up.

Real-life example: Frameworks are like ready-made spice mixes — fast cooking, but you should still know how to cook rice and dal from scratch.

Bootstrap — popular, component classes, good for quick prototypes.
Tailwind CSS — utility classes, very common in modern apps (Rishtaara uses Tailwind).
Templates — download a landing page skeleton, replace text and colors.

SASS Tutorial (intro)

SASS (Syntactically Awesome Style Sheets) is a CSS preprocessor. You write .scss with variables, nesting, and mixins. A build tool compiles it into normal .css that browsers understand.

Real-life example: SASS is like writing a neat recipe notebook with shortcuts — then printing a simple cooking sheet (CSS) that anyone in the kitchen can follow.

Learn plain CSS first (this course). Add SASS later when your stylesheets get long. LESS is another preprocessor — similar idea.

SCSS nesting and variables → CSS

/* style.scss (SASS) */
$primary: #0891b2;

.nav {
  background: $primary;

  a {
    color: white;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

/* Compiles to normal CSS:
.nav { background: #0891b2; }
.nav a { color: white; text-decoration: none; }
.nav a:hover { text-decoration: underline; }
*/

Practice path — quiz, examples & interview

On Rishtaara, practice the same skills with MCQs and interview questions after you finish the project below.

Real-life example: The certificate is like a school report card — useful, but the real skill is cooking the meal (building pages) yourself.

MCQ practice: /mcq/html-mcq and /mcq/css-mcq
Interview prep: /interview/html-interview
Full notes: /knowledge/html-css-zero-to-hero
Next course: JavaScript Fundamentals
Keep MDN and CSS-Tricks Almanac bookmarked for property lookups

Final Project Brief

Build a small product landing page for a fictional chai brand called ChaiConnect. It uses CSS variables, Flexbox navbar, Grid product cards, media queries, and a soft hover animation. Copy both files into one folder and open index.html in your browser.

Real-life example: This project is like your first shop opening — signboard (navbar), welcome banner (hero), product shelf (grid), and contact counter (footer).

Sticky Flexbox header with logo + nav.
Hero with gradient background and CTA button.
Three product cards in a responsive CSS Grid.
Footer with social links.
Works from 320px phone to 1200px desktop.

Complete index.html

index.html

<!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="ChaiConnect — fresh masala chai delivered to your door." />
  <title>ChaiConnect — Fresh Masala Chai</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="site-header">
    <a class="logo" href="#">ChaiConnect</a>
    <nav class="nav" aria-label="Main">
      <a href="#flavors">Flavors</a>
      <a href="#story">Our Story</a>
      <a class="btn btn-small" href="#order">Order now</a>
    </nav>
  </header>

  <main>
    <section class="hero" id="order">
      <div class="hero-inner">
        <p class="eyebrow">Fresh • Local • Masala</p>
        <h1>Chai that tastes like home</h1>
        <p>Order ginger, elaichi, or cutting chai — hot delivery in 30 minutes.</p>
        <a class="btn" href="#flavors">See flavors</a>
      </div>
    </section>

    <section class="flavors" id="flavors" aria-labelledby="flavors-title">
      <h2 id="flavors-title">Pick your cup</h2>
      <div class="product-grid">
        <article class="product-card">
          <h3>Ginger Chai</h3>
          <p>Strong adrak kick for rainy evenings.</p>
          <span class="price">₹40</span>
        </article>
        <article class="product-card">
          <h3>Elaichi Chai</h3>
          <p>Light, sweet cardamom aroma.</p>
          <span class="price">₹45</span>
        </article>
        <article class="product-card">
          <h3>Cutting Chai</h3>
          <p>Small cup, big Mumbai energy.</p>
          <span class="price">₹20</span>
        </article>
      </div>
    </section>

    <section class="story" id="story">
      <h2>Our story</h2>
      <p class="prose">
        We started with one kettle on a street corner. Today we deliver the same slow-brewed masala chai
        to your desk — made with milk, ginger, and love.
      </p>
    </section>
  </main>

  <footer class="site-footer">
    <p>&copy; 2026 ChaiConnect. Made with CSS Grid + Flexbox.</p>
    <div class="footer-links">
      <a href="#">Instagram</a>
      <a href="#">WhatsApp</a>
    </div>
  </footer>
</body>
</html>

Complete style.css

After building ChaiConnect, try changing :root colors and grid breakpoints — you will feel how variables and responsive CSS speed up redesigns.

style.css

:root {
  --primary: #b45309;
  --primary-dark: #92400e;
  --accent: #059669;
  --bg: #fffbeb;
  --surface: #ffffff;
  --text: #292524;
  --muted: #78716c;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(41, 37, 36, 0.1);
  --header-h: 4rem;
}

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

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: 1.25rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #fde68a;
}

.logo {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text);
  text-decoration: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--primary);
  color: white;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.btn:hover {
  background: var(--accent);
  transform: translateY(-1px);
  text-decoration: none;
}

.btn-small {
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
}

.hero {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  padding: 3rem 1.25rem;
  background:
    radial-gradient(circle at 15% 20%, #fde68a 0%, transparent 40%),
    radial-gradient(circle at 85% 10%, #bbf7d0 0%, transparent 35%),
    var(--bg);
}

.hero-inner {
  width: min(100%, 38rem);
  text-align: center;
  animation: fadeInUp 0.6s ease-out both;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.hero h1 {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.hero p {
  color: var(--muted);
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
}

.flavors,
.story {
  width: min(100%, 1100px);
  margin-inline: auto;
  padding: 3rem 1.25rem;
}

.flavors h2,
.story h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  margin-bottom: 1.25rem;
}

.product-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  border: 1px solid #fde68a;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(41, 37, 36, 0.14);
}

.product-card h3 {
  margin-bottom: 0.35rem;
}

.product-card p {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.price {
  display: inline-block;
  font-weight: 800;
  color: var(--primary-dark);
}

.prose {
  max-width: 60ch;
  color: var(--muted);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.25rem;
  border-top: 1px solid #fde68a;
  background: #fef3c7;
  color: var(--muted);
  font-size: 0.9rem;
}

.footer-links {
  display: flex;
  gap: 1rem;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Key Takeaways

HTML is the structure of a page — write clear tags before worrying about style.
CSS is the look — keep styles in external files and prefer classes over ids.
Every topic has a real-life analogy: skeleton vs clothes, notebook vs rules, photo frame vs margin.
Forms need labels; images need alt text; pages need lang and a viewport meta tag.
The cascade picks winners by importance, specificity, then source order.
box-sizing: border-box makes width easier to predict.
Flexbox = one direction layouts; Grid = rows and columns together.
Mobile-first media queries + relative units = responsive pages.
Practice by rebuilding small pages: menu card, portfolio, landing page.

Frequently Asked Questions

HTML pehle seekhun ya CSS?: HTML first. Build the content structure, then add CSS. You cannot style what does not exist in the page.
Class aur id mein kya farak hai?: Class can be reused on many elements (.btn). Id must be unique on one page (#main). Prefer classes for CSS styling.
Flexbox ya Grid?: Flexbox for navbars, rows, and centering on one axis. Grid for full page layouts and card grids with rows and columns. Use both together.
Margin aur padding mein farak?: Padding is space inside the border (cushion inside a photo frame). Margin is space outside the border (gap between frames on the wall).
Mera CSS apply kyun nahi ho raha?: Check the selector spelling, whether the CSS file is linked, and DevTools Styles panel for crossed-out rules (higher specificity or later rule winning).