HTML & CSS Comprehensive Reviewer
and Cheatsheet
A beginner-to-intermediate handbook with examples, visuals, and exercises
Table of Contents
1. Part I – Web Foundations
2. Part II – HTML Essentials
3. Part III – HTML5 Semantic & Media
4. Part IV – Forms & Accessibility
5. Part V – CSS Fundamentals
6. Part VI – Selectors & Specificity
7. Part VII – Box Model & Layout
8. Part VIII – Display, Position, Float
9. Part IX – Flexbox
10. Part X – CSS Grid
11. Part XI – Typography & Icons
12. Part XII – Colors & Units
13. Part XIII – Backgrounds & Shadows
14. Part XIV – Transitions & Animations
15. Part XV – Responsive Web Design
16. Part XVI – File/Folder Structure & External Assets
17. Part XVII – Emmet & VS Code Tips
18. Part XVIII – Best Practices & SEO Basics
19. Part XIX – Mini Projects
20. Part XX – Exercises & Quizzes
21. Appendix – Quick Reference Tables
Part I – Web Foundations
HTML defines structure; CSS defines presentation; JavaScript defines behavior.
HTML (HyperText Markup Language) – the content and structure
CSS (Cascading Style Sheets) – the visual style and layout
Browser – renders your HTML/CSS/JS (Chrome, Firefox, Edge, etc.)
Editor – write code efficiently (Visual Studio Code recommended)
The Request–Response Cycle (High-Level)
You type a URL → Browser requests a resource from a server
Server responds with HTML/CSS/JS → Browser parses and renders
Assets (images/fonts/css/js) are fetched via additional requests
Part II – HTML Essentials
HTML Document Skeleton:
<!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>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first page.</p>
</body>
</html>
Common Tags
Tag Purpose
<h1>…<h6> Headings from largest to smallest
<p> Paragraph
<a href=''> Hyperlink
<img src='' alt=''> Image with alternative text
<ul>/<ol>/<li> Unordered/Ordered lists and list items
<div> Block-level generic container
<span> Inline generic container
<br> Line break (void)
<hr> Horizontal rule (void)
Attributes
Attribute Meaning
id Unique identifier (used once per page)
class Reusable classification for styling
style Inline CSS (avoid for large projects)
title Tooltip-like text
data-* Custom data attributes
href/src Hyperlink target / media source
alt Alternative text for images (accessibility)
Part III – HTML5 Semantic & Media
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
<header>
<h1>Site Title</h1>
<nav><a href="/">Home</a></nav>
</header>
<main>
<section>
<article>
<h2>Article Title</h2>
<p>Content…</p>
</article>
</section>
</main>
<footer>© 2025</footer>
Media
<img src="[Link]" alt="Description" width="300">
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>
<audio controls>
<source src="song.mp3" type="audio/mp3">
</audio>
Part IV – Forms & Accessibility
<form action="/submit" method="POST">
<label for="email">Email</label>
<input type="email" id="email" name="email"
placeholder="you@[Link]" required>
<label for="pw">Password</label>
<input type="password" id="pw" name="pw" minlength="6">
<button type="submit">Login</button>
</form>
Always pair <label> with form controls (via for/id).
Use semantic input types (email, number, date) for better UX.
Add alt text to images and titles to links if needed.
Ensure color contrast and keyboard navigability.
Part V – CSS Fundamentals
Where to put CSS:
22. Inline: <h1 style="color:red">Hello</h1> (avoid for maintainability)
23. Internal: <style>…</style> inside <head>
24. External: <link rel="stylesheet" href="[Link]"> (recommended)
Syntax:
selector {
property: value;
}
Part VI – Selectors & Specificity
/* Selector types */
h1 { color: blue; } /* element */
.title { color: green; } /* class */
#hero { color: red; } /* id */
* { box-sizing: border-box; }/* universal */
article p { line-height: 1.6; } /* descendant */
header > nav { padding: 10px; } /* child */
Specificity (highest to lowest): inline > id > class/attribute/pseudo-class > element/pseudo-
element.
Conflict rule: later declarations override earlier ones if specificity is equal (the 'C' in CSS).
Part VII – Box Model & Layout
.box {
width: 300px;
padding: 16px;
border: 1px solid #ccc;
margin: 16px;
box-sizing: border-box; /* include padding/border in width */
}
Part VIII – Display, Position, Float
/******** Display ********/
.block { display: block; } /* takes full width */
.inline { display: inline; } /* width = content */
.inlineBlock { display: inline-block; } /* inline + set size */
/******** Position ********/
.static { position: static; }
.relative { position: relative; top: 10px; left: 5px; }
.absolute { position: absolute; top: 0; right: 0; } /* relative to
nearest positioned ancestor */
.fixed { position: fixed; bottom: 0; right: 0; } /* fixed to
viewport */
.sticky { position: sticky; top: 0; } /* sticks after
scroll */
/******** Float (legacy layout) ********/
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
Part IX – Flexbox
.container {
display: flex;
gap: 12px;
justify-content: space-between; /* main axis */
align-items: center; /* cross axis */
flex-wrap: wrap;
}
.item { flex: 1 1 200px; } /* grow shrink basis */
Part X – CSS Grid
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.grid > div { min-height: 80px; background: #f3f3f3; }
Part XI – Typography & Icons
Use web-safe fonts or import via @import or <link> from Google Fonts.
Control line-height, letter-spacing, and font-weight for readability.
Icons via icon fonts or SVG (recommended for crispness).
@import url('[Link]
family=Inter:wght@400;600&display=swap');
body { font-family: 'Inter', system-ui, sans-serif; }
Part XII – Colors & Units
Colors: named, hex (#1e90ff), rgb(30,144,255), hsl(209,100%,56%)
Units: px (absolute), %, vw/vh (viewport), em/rem (relative to font size)
Prefer rem for scalable typography
:root { font-size: 16px; }
h1 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; } /* 16px */
Part XIII – Backgrounds & Shadows
.panel {
background: linear-gradient(135deg, #d1d9ff, #fff);
box-shadow: 0 6px 18px rgba(0,0,0,.1);
border-radius: 12px;
}
Part XIV – Transitions & Animations
.btn {
background: #1e90ff;
color: white;
padding: 10px 16px;
transition: transform .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); background: #1870cc; }
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulsing { animation: pulse 1.5s infinite; }
Part XV – Responsive Web Design
/******** Meta viewport (in <head>) ********/
<meta name="viewport" content="width=device-width, initial-scale=1">
/******** Media Queries ********/
.card { width: 100%; }
@media (min-width: 768px) {
.card { width: 48%; }
}
@media (min-width: 1024px) {
.card { width: 32%; }
}
Part XVI – File/Folder Structure & External Assets
project/
├─ [Link]
├─ css/
│ └─ [Link]
├─ js/
│ └─ [Link]
└─ assets/
├─ images/
└─ fonts/
Part XVII – Emmet & VS Code Tips
Type `!` + Enter for HTML boilerplate
`[Link]*3` → three divs with class=card
`.box#hero` → <div class="box" id="hero"></div>
Enable Live Server extension for instant preview
Use multi-cursor (Alt+Click) and rename symbol efficiently
Part XVIII – Best Practices & SEO Basics
Write semantic, accessible HTML; use alt text and labels
Keep CSS modular; avoid deep selector chains
Minify CSS for production; use external stylesheets
SEO: meaningful titles, meta description, proper headings, link structure
Part XIX – Mini Projects
1) Profile Card
<div class="card">
<img src="[Link]" alt="Me" width="120">
<h2>Doji</h2>
<p>Web Developer</p>
<button class="btn">Contact</button>
</div>
.card{max-width:260px;padding:16px;border-
radius:12px;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.12)}
.btn{background:#1e90ff;color:#fff;border:0;padding:8px 12px;border-
radius:8px}
2) Simple Two-Column Layout (Flex)
<div class="row">
<aside class="sidebar">Sidebar</aside>
<main class="content">Content</main>
</div>
.row{display:flex;gap:16px}
.sidebar{flex:0 0 240px;background:#f5f5f5;padding:12px}
.content{flex:1;background:#fff;padding:12px}
3) Responsive Grid Gallery
<div class="grid">
<img src="[Link]" alt="">
<img src="[Link]" alt="">
<img src="[Link]" alt="">
</div>
.grid{display:grid;grid-template-columns:repeat(auto-
fill,minmax(160px,1fr));gap:12px}
.grid img{width:100%;border-radius:8px}
Part XX – Exercises & Quizzes
A. Practical Exercises
25. Create an [Link] using ! + Enter. Add a header, nav, main, and footer.
26. Build a 3-card services section with Flexbox that stacks on mobile.
27. Create a responsive image grid using CSS Grid and media queries.
28. Style a button with hover transition and a pulsing animation on focus.
29. Make a simple contact form with proper labels and required fields.
B. Multiple-Choice Quiz (write the letter only)
1) Which tag inserts a line break?
A) <break>
B) <hr>
C) <br>
D) <lb>
Answer: C
2) Which selector has the highest specificity (excluding inline)?
A) .card
B) #hero
C) button
D) *
Answer: B
3) Which property adds space inside the border?
A) margin
B) padding
C) gap
D) spacing
Answer: B
4) Which layout system is best for one-dimensional alignment?
A) Float
B) Grid
C) Flexbox
D) Position absolute
Answer: C
5) Which meta tag is critical for responsive pages?
A) <meta charset>
B) <meta viewport>
C) <meta description>
D) <meta robots>
Answer: B
Appendix – Quick Reference Tables
Common CSS Properties
Property Description
color Text color
background-color Element background
font-size Text size (px, rem, em)
font-weight Normal, bold, 100–900
line-height Line spacing
text-align left, center, right, justify
border e.g., 1px solid #ddd
border-radius Rounded corners
box-shadow Drop shadow
padding/margin Spacing inside/outside
Layout Quick Guide
Topic Key Properties/Notes
display block, inline, inline-block, flex, grid, none
position static, relative, absolute, fixed, sticky
flex flex-direction, justify-content, align-items,
flex-wrap, gap
grid grid-template-columns/rows, gap, justify-
items, align-items
media queries @media (min-width: 768px) { ... }