HTML & CSS ��� Detailed Notes
HTML & CSS — Detailed Complete Notes
PART 1: HTML (HyperText Markup Language)
1.1 What is HTML?
HTML is the structure/skeleton of every webpage.
It is not a programming language — it’s a markup language. It describes content using
tags, not logic like loops or conditions.
“HyperText” = text that links to other text (hyperlinks).
Every website you visit is built with HTML at its core, then styled with CSS and made
interactive with JavaScript.
Analogy: If a webpage were a house — - HTML = the walls, rooms, doors (structure) - CSS = paint,
furniture, decoration (style) - JavaScript = electricity, plumbing, switches (behavior)
How the Browser Reads HTML
1. Browser downloads the .html file.
2. It parses tags top to bottom and builds the DOM (Document Object Model) — a tree
representation of the page.
3. It downloads linked CSS/JS files.
4. It renders (paints) the final page on screen.
1.2 Basic HTML Document Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first webpage.</p>
</body>
</html>
Breakdown
Part Meaning
<!DOCTYPE html> Tells the browser “this is an HTML5
document”
Root element; lang helps screen readers &
<html lang="en">
search engines
<head> Metadata (not visible on page)
Character encoding — supports virtually all
<meta charset="UTF-8">
text/symbols
<meta name="viewport"...> Makes the page responsive on mobile devices
<title> Text shown on the browser tab
<body> Everything visible to the user
1.3 Tags, Elements & Attributes
Tag: <p> — the marker itself
Element: <p>Hello</p> — opening tag + content + closing tag
Void/self-closing elements (no content): <br> , <img> , <hr> , <input> , <meta> , <link>
Attributes
<img src="[Link]" alt="A cute cat" width="300">
<a href="[Link] target="_blank" rel="noopener">Go to Google</a>
src , href , alt , width , class , id , style , title , data-* are common.
Global attributes work on almost any tag: id , class , style , title , lang , tabindex ,
hidden , contenteditable , draggable , data-* (custom data attributes, e.g. data-user-
id="42" ).
1.4 Text-Level Tags
<h1>Biggest Heading</h1>
...
<h6>Smallest Heading</h6>
<p>A paragraph of text.</p>
<br> <!-- line break -->
<hr> <!-- horizontal rule / thematic break -->
<strong>Important (bold, semantic)</strong>
<em>Emphasis (italic, semantic)</em>
<b>Bold (visual only, no semantic weight)</b>
<i>Italic (visual only)</i>
<mark>Highlighted text</mark>
<small>Fine print</small>
<del>Deleted/strikethrough text</del>
<ins>Inserted/underlined text</ins>
<sub>Subscript</sub> <sup>Superscript</sup>
<abbr title="HyperText Markup Language">HTML</abbr>
<blockquote cite="[Link] quoted block of text.</blockquote>
<q>A short inline quote</q>
<code>[Link]('inline code')</code>
<pre>Preformatted text
keeps spacing</pre>
Why <strong> / <em> over <b> / <i> ? Screen readers announce <strong> and <em> differently
(with emphasis in voice) — they carry meaning, not just style. <b> / <i> are purely visual.
1.5 Links & Navigation
<a href="[Link] link</a>
<a href="/[Link]">Relative link (same site)</a>
<a href="#section2">Jump to an element with id="section2"</a>
<a href="[Link] link</a>
<a href="[Link] link</a>
<a href="[Link]" download>Download a file</a>
<a href="[Link] target="_blank" rel="noopener noreferrer">Open in new tab (safely)</a>
target="_blank" opens in a new tab — always pair with rel="noopener noreferrer" for
security (prevents the new page from accessing [Link] ).
1.6 Images & Media
<img src="[Link]" alt="Description for accessibility/SEO" width="400" height="300" loading="lazy">
<!-- Responsive images -->
<picture>
<source media="(max-width:600px)" srcset="[Link]">
<source media="(min-width:601px)" srcset="[Link]">
<img src="[Link]" alt="Responsive image">
</picture>
<!-- Video -->
<video controls width="400" poster="[Link]">
<source src="movie.mp4" type="video/mp4">
Your browser doesn't support video.
</video>
<!-- Audio -->
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
<!-- Embedding another page -->
<iframe src="[Link] width="600" height="400" title="Embedded content"></iframe>
alt is mandatory for accessibility (screen readers) and helps SEO — always describe the
image meaningfully.
loading="lazy" defers off-screen image loading, improving page speed.
1.7 Lists
<!-- Unordered (bullets) -->
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<!-- Ordered (numbers) -->
<ol start="3" type="1">
<li>Step three</li>
<li>Step four</li>
</ol>
<!-- Description list -->
<dl>
<dt>HTML</dt>
<dd>The structure language of the web</dd>
<dt>CSS</dt>
<dd>The styling language of the web</dd>
</dl>
Lists can be nested (a <ul> inside a <li> ) to create sub-menus.
1.8 Containers: <div> and <span>
<div>A generic block container (full width, new line)</div>
<span>A generic inline container (only as wide as content)</span>
Used when no semantic tag fits — mainly for CSS/JS hooks via class / id .
1.9 Semantic Layout Tags (HTML5)
<header>Top of page (logo, nav)</header>
<nav>Navigation links</nav>
<main>Main unique content of the page (only one per page)</main>
<section>A thematic grouping of content</section>
<article>Self-contained content (blog post, news article, card)</article>
<aside>Side content (ads, related links, sidebar)</aside>
<footer>Bottom of page (copyright, contact)</footer>
<figure>
<img src="[Link]" alt="Sales chart">
<figcaption>Fig 1. Quarterly sales</figcaption>
</figure>
<time datetime="2026-07-20">July 20, 2026</time>
<details>
<summary>Click to expand</summary>
<p>Hidden content revealed on click — no JS needed.</p>
</details>
Why semantic tags matter: 1. Accessibility — screen readers use them to let users jump
between regions. 2. SEO — search engines weigh content inside <article> / <main> more
meaningfully than generic <div> s. 3. Readability — code is self-documenting for other
developers.
1.10 Tables (with full structure)
<table>
<caption>Student Records</caption>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ravi</td>
<td>21</td>
</tr>
<tr>
<td>Anu</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>2 students</td>
</tr>
</tfoot>
</table>
colspan / rowspan merge cells: <td colspan="2">merged</td>
Use tables only for tabular data, never for page layout (that’s what CSS Grid/Flexbox are
for).
1.11 Forms (in depth)
<form action="/submit" method="post">
<fieldset>
<legend>Personal Info</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required placeholder="Enter name" minlength="2">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" minlength="8">
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="120">
<label for="dob">Date of birth:</label>
<input type="date" id="dob" name="dob">
<label>
<input type="checkbox" name="subscribe" checked> Subscribe to newsletter
</label>
<p>Gender:</p>
<label><input type="radio" name="gender" value="m"> Male</label>
<label><input type="radio" name="gender" value="f"> Female</label>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="in">India</option>
<option value="us">USA</option>
</select>
<label for="bio">Bio:</label>
<textarea id="bio" name="bio" rows="4" cols="30"></textarea>
<label for="file">Upload file:</label>
<input type="file" id="file" name="file">
<input type="submit" value="Send">
<input type="reset" value="Clear">
</fieldset>
</form>
Key form concepts
Concept Purpose
method="get" Sends data via URL (visible, for searches)
Sends data in request body (hidden, for
method="post"
sensitive data)
required Browser blocks submission until filled
placeholder Grey hint text, NOT a label replacement
Links label to input — clicking label focuses
label + for / id
input (accessibility)
name The key used when data is sent to the server
Common <input> types: text , email , password , number , date , checkbox , radio , file , range ,
color , search , tel , url , hidden , submit , reset , button .
1.12 id vs class
<p id="intro">This is unique.</p>
<p class="highlight">This can repeat.</p>
<p class="highlight bold">Multiple classes allowed.</p>
id class
Uniqueness Only one element per page Reusable on many elements
CSS selector #intro .highlight
CSS Specificity Higher Lower
[Link]()
JS use [Link]()
/ querySelectorAll()
1.13 Meta Tags for SEO & Sharing
<meta name="description" content="A short summary of the page for search engines">
<meta name="keywords" content="html, css, tutorial">
<meta name="author" content="Your Name">
<!-- Open Graph (for social media previews) -->
<meta property="og:title" content="My Page Title">
<meta property="og:description" content="Description shown when shared">
<meta property="og:image" content="[Link]">
1.14 Accessibility (ARIA) Basics
<button aria-label="Close menu">X</button>
<div role="alert">Form submitted successfully!</div>
<img src="[Link]" alt="Company logo">
<nav aria-label="Main navigation">...</nav>
alt , semantic tags, and proper label s cover ~80% of accessibility needs.
aria-* attributes fill gaps when semantic HTML alone isn’t enough (custom widgets, dynamic
alerts).
1.15 Comments in HTML
<!-- This is a comment, not shown on the page -->
PART 2: CSS (Cascading Style Sheets)
2.1 What is CSS?
CSS controls look and layout: colors, fonts, spacing, positioning, responsiveness, animation.
“Cascading” = rules flow down and can override each other based on source order,
specificity, and importance.
2.2 Three Ways to Add CSS
<!-- 1. Inline (avoid — mixes concerns, hard to maintain) -->
<p style="color: red;">Red text</p>
<!-- 2. Internal -->
<head><style> p { color: blue; } </style></head>
<!-- 3. External (best practice) -->
<head><link rel="stylesheet" href="[Link]"></head>
/* [Link] */
p { color: green; }
2.3 CSS Syntax
selector {
property: value;
property: value;
}
2.4 Selectors (comprehensive)
Selector Example Targets
Element p { } All <p> tags
Elements with
Class .highlight { }
class="highlight"
ID #intro { } Element with id="intro"
Universal * { } Every element
Grouping h1, h2, p { } All listed elements
Descendant div p { } <p> anywhere inside a <div>
<p> that is a direct child of
Child div > p { }
<div>
<p> immediately after an
Adjacent sibling h1 + p { }
<h1>
Every <p> after <h1> at
General sibling h1 ~ p { }
same level
Elements matching the
Attribute input[type="text"] { }
attribute value
Pseudo-classes (state-based)
a:hover { color: red; } /* mouse over */
a:visited { color: purple; } /* already visited link */
input:focus { border-color: blue; } /* currently focused */
li:first-child { font-weight: bold; }
li:last-child { color: grey; }
li:nth-child(2) { background: yellow; }
li:nth-child(odd) { background: #eee; }
button:disabled { opacity: 0.5; }
input:checked + label { color: green; }
Pseudo-elements (target a part of an element)
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }
.box::before { content: "★ "; } /* inserts content before */
.box::after { content: " ★"; } /* inserts content after */
::selection { background: yellow; } /* text highlighted by user */
2.5 The Box Model (core concept)
┌─────────────────────────────┐
│ Margin │ outside the border
│ ┌─────────────────────┐ │
│ │ Border │ │ the visible edge
│ │ ┌───────────────┐ │ │
│ │ │ Padding │ │ │ inside the border
│ │ │ ┌──────────┐ │ │ │
│ │ │ │ Content │ │ │ │ text/image itself
│ │ │ └──────────┘ │ │ │
│ │ └───────────────┘ │ │
│ └─────────────────────┘ │
└─────────────────────────────┘
div {
width: 200px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}
Shorthand order (clockwise: top, right, bottom, left)
margin: 10px 15px 10px 15px; /* top right bottom left */
margin: 10px 15px; /* top/bottom = 10px, left/right = 15px */
margin: 10px; /* all sides */
box-sizing (very commonly needed)
* { box-sizing: border-box; }
content-box (default): width applies only to content; padding/border add on top → total size
grows.
border-box : width includes padding + border → predictable sizing. Almost always preferred.
2.6 Colors
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); /* alpha = transparency */
color: hsl(0, 100%, 50%); /* hue, saturation, lightness */
2.7 Typography
p {
font-family: "Segoe UI", Arial, sans-serif; /* fallback stack */
font-size: 16px;
font-weight: bold; /* or 100–900 */
font-style: italic;
text-align: center; /* left, right, center, justify */
line-height: 1.5; /* spacing between lines */
letter-spacing: 1px;
text-decoration: underline;
text-transform: uppercase; /* lowercase, capitalize */
}
Units
Unit Meaning
px Fixed pixels
% Relative to parent
em Relative to parent’s font-size
Relative to root ( <html> ) font-size —
rem
predictable, widely recommended
1% of viewport width/height — great for
vw / vh
responsive sizing
2.8 Backgrounds
div {
background-color: lightblue;
background-image: url("[Link]");
background-size: cover; /* contain, 100% 100%, etc */
background-position: center;
background-repeat: no-repeat;
}
/* Shorthand */
div { background: lightblue url("[Link]") no-repeat center/cover; }
/* Gradients */
div { background: linear-gradient(to right, red, yellow); }
div { background: radial-gradient(circle, red, yellow); }
2.9 Display & Visibility
display: block; /* full width, new line: div, p, h1 */
display: inline; /* only content width, same line: span, a */
display: inline-block; /* inline but respects width/height */
display: none; /* removed from layout entirely */
visibility: hidden; /* invisible but still takes up space */
2.10 Positioning
position: static; /* default — normal document flow */
position: relative; /* offset from its own normal position */
position: absolute; /* positioned relative to nearest ancestor with position != static */
position: fixed; /* fixed relative to the browser window (stays on scroll) */
position: sticky; /* toggles between relative and fixed based on scroll */
.box {
position: absolute;
top: 20px;
left: 30px;
z-index: 10; /* controls stacking order — higher = on top */
}
Key rule: absolute positioning looks for the nearest parent with position: relative (or
absolute / fixed ) to position itself against. If none exists, it positions relative to the whole page.
2.11 Flexbox (1-dimensional layout)
.container {
display: flex;
flex-direction: row; /* row, column, row-reverse, column-reverse */
justify-content: center; /* main-axis: flex-start, center, space-between, space-around */
align-items: center; /* cross-axis: flex-start, center, stretch */
flex-wrap: wrap; /* allow items to wrap to next line */
gap: 10px; /* spacing between items */
}
.item {
flex: 1; /* grow to fill available space equally */
order: 2; /* change visual order without changing HTML */
}
Best for: navbars, centering elements, card rows, evenly spacing items.
2.12 CSS Grid (2-dimensional layout)
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 3 columns, middle one twice as wide */
grid-template-rows: 100px auto;
gap: 15px;
}
.item {
grid-column: 1 / 3; /* spans from column line 1 to 3 */
grid-row: 1 / 2;
}
/* Named areas — very readable layout technique */
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
Best for: full page layouts, photo galleries, dashboards — anything needing rows AND columns
simultaneously.
Flexbox vs Grid: Flexbox = one direction at a time (a row OR a column). Grid = both directions
together (rows AND columns as one system).
2.13 Responsive Design — Media Queries
/* Default (mobile-first) styles here */
.container { width: 100%; }
/* Tablet and up */
@media (min-width: 768px) {
.container { width: 750px; }
}
/* Desktop and up */
@media (min-width: 1024px) {
.container { width: 970px; }
}
/* Specific case: print stylesheet */
@media print {
nav, footer { display: none; }
}
Mobile-first approach: write base styles for small screens, then add min-width media queries to
enhance for larger screens. This is the modern standard.
2.14 Transitions & Animations
/* Smooth change between states */
.button {
background: blue;
transition: background 0.3s ease-in-out;
}
.button:hover { background: darkblue; }
/* Keyframe animation */
@keyframes slideIn {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.box {
animation: slideIn 0.5s ease-out forwards;
}
Common transform functions
transform: translateX(20px);
transform: rotate(45deg);
transform: scale(1.2);
transform: skew(10deg);
2.15 CSS Variables (Custom Properties)
:root {
--primary-color: #2c3e50;
--spacing: 16px;
}
.card {
color: var(--primary-color);
padding: var(--spacing);
}
Benefits: change a value once in :root , and it updates everywhere it’s used — essential for
theming (e.g., dark mode toggles).
2.16 Specificity & the Cascade
When multiple rules target the same element, CSS decides the winner using specificity:
Selector type Specificity points
Inline style ( style="..." ) 1000
ID ( #id ) 100
Class, attribute, pseudo-class ( .class , [type] , :hover ) 10
Element, pseudo-element ( p , ::before ) 1
Higher specificity wins, regardless of order in the file.
If specificity is equal, the rule that comes later in the stylesheet wins.
!important overrides everything else (use sparingly — it breaks the natural cascade and
makes debugging harder).
p { color: black; } /* specificity: 1 */
.text { color: blue; } /* specificity: 10 — wins over above */
#main { color: red; } /* specificity: 100 — wins over both */
2.17 Comments in CSS
/* This is a CSS comment */
PART 3: Putting It Together — Full Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<style>
:root { --accent: #4a90e2; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: #f4f4f4; }
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--accent);
padding: 15px 30px;
}
.navbar a { color: white; text-decoration: none; margin-left: 20px; }
.card {
width: 300px;
margin: 40px auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
text-align: center;
transition: transform 0.2s;
}
.card:hover { transform: translateY(-5px); }
@media (max-width: 500px) {
.card { width: 90%; }
}
</style>
</head>
<body>
<nav class="navbar">
<strong>MySite</strong>
<div>
<a href="#">Home</a>
<a href="#">About</a>
</div>
</nav>
<div class="card">
<h1>Welcome!</h1>
<p>A responsive, styled card using HTML and CSS.</p>
<a href="[Link] more</a>
</div>
</body>
</html>
PART 4: Suggested Learning Path
1. HTML structure, tags, attributes, semantic elements
2. Forms & tables in depth
3. CSS syntax, selectors, specificity
4. Box model & box-sizing
5. Typography, colors, backgrounds
6. Flexbox → then CSS Grid
7. Positioning & z-index
8. Media queries & mobile-first responsive design
9. Transitions, transforms, keyframe animations
10. CSS variables & basic theming
11. Accessibility (ARIA, semantic HTML)
12. Build projects: personal portfolio, responsive navbar, pricing cards, dashboard layout
Quick Reference: Common Mistakes
Forgetting to close tags ( <p>text</p> not <p>text )
Confusing id (unique) with class (reusable)
Forgetting to link the CSS file in <head>
Confusing margin (outside) with padding (inside)
Missing alt text on images (breaks accessibility & SEO)
Using <div> for everything instead of semantic tags
Not adding box-sizing: border-box , causing sizing surprises
Overusing !important instead of fixing specificity properly
Forgetting position: relative on a parent before using position: absolute on a child
Not testing responsiveness with media queries until the end (instead of mobile-first)