HTML & CSS CheatSheet: Quick Reference for Structure & Styling
Your Go-To Guide for Building Beautiful Websites
HTML & CSS CheatSheet: Quick Reference for Structure & Styling
Your Go-To Guide for Building Beautiful Websites
1. Introduction: The Web’s Building Blocks
Imagine building a house: HTML is your blueprint (structure), and CSS is your interior design (style). Together, they create every website you browse. HTML organizes content like text and images, while CSS makes it visually appealing with colors and layouts.
Why Learn This?
- Instant Results: See changes live in your browser
- Foundation for Everything: Essential for web development, blogging, even email templates
- Creative Freedom: Turn ideas into tangible digital experiences
Common Beginner Challenges:
- Tag Overload: 100+ HTML tags (but only 20% are used daily)
- CSS Confusion: Why doesn’t
margin: autocenter everything? - Browser Wars: Chrome vs. Firefox rendering differences
Pro Tip: Start with CodePen.io — no installations needed!
2. HTML Document Structure: The Skeleton
Every HTML file follows this template:
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>Key Components:
<!DOCTYPE html>: Declares HTML5 (modern standard)<head>: Invisible metadata (title, CSS/JS links, SEO)<body>: Visible content container
Advantages:
✅ Standardized structure works across browsers
✅ SEO-friendly with proper <title> and <meta> tags
✅ Accessible to screen readers
Disadvantages:
❌ Forgetting <!DOCTYPE> triggers "quirks mode" (broken layouts)
❌ Cluttered <head> slows page load
❌ No visual styling by default
Conclusion & Advice:
Always include
<meta charset="UTF-8">to support emojis 😊 and special characters. Use the HTML5 Boilerplate for professional setups.
3. Essential HTML Tags: Content Organizers
Text Elements
| Tag | Purpose | Example |
| --------------- | -------------------------------- | ----------------------------------------- |
| `<h1>` – `<h6>` | Headings (`h1` = most important) | `<h1>Main Title</h1>` |
| `<p>` | Paragraph | `<p>This is a sentence.</p>` |
| `<a>` | Hyperlink | `<a href="https://example.com">Visit</a>` |
| `<strong>` | **Important text** | `<strong>Warning!</strong>` |
| `<em>` | *Emphasized text* | `<em>Optional</em>` |Media Elements
<img src="photo.jpg" alt="Description" width="500">
<video controls src="movie.mp4"></video>
<audio src="song.mp3"></audio>Advantages: ✅ Semantic meaning improves accessibility ✅ Simple syntax for quick content creation ✅ Universal browser support
Disadvantages:
❌ Missing alt text harms SEO/accessibility
❌ Unoptimized media files slow page loads
❌ Deprecated tags like <font> still linger in old tutorials
Conclusion & Advice:
Use
<figure>+<figcaption>for images with captions. Replace<b>with<strong>for meaningful bold text.
4. HTML Lists & Tables: Data Organizers
Lists
<ul> <!-- Unordered list (bullets) -->
<li>Coffee</li>
<li>Tea</li>
</ul>
<ol> <!-- Ordered list (numbers) -->
<li>Preheat oven</li>
<li>Mix ingredients</li>
</ol>Tables
<table>
<tr>
<th>Product</th> <!-- Header -->
<th>Price</th>
</tr>
<tr>
<td>Laptop</td> <!-- Row -->
<td>$999</td>
</tr>
</table>Advantages:
✅ Perfect for pricing, schedules, and menus
✅ Styling control with CSS (list-style-type, border-collapse)
✅ Keyboard-navigable
Disadvantages: ❌ Responsive design challenges on mobile ❌ Misuse for page layouts (use CSS Grid instead) ❌ Complex nesting causes code bloat
Conclusion & Advice:
Add
scope="col"to<th>for screen readers. Use CSSnth-child()for zebra striping:
tr:nth-child(even) { background: #f2f2f2; }5. HTML Forms: User Input Collectors
<form action="/submit" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="newsletter">
<input type="checkbox" id="newsletter" name="subscribe"> Subscribe
</label>
<button type="submit">Send</button>
</form>Common Input Types:
text,email,passwordcheckbox,radiodate,file,range
Advantages:
✅ Built-in validation with required and type="email"
✅ Flexible for logins, surveys, search
✅ Customizable with CSS
Disadvantages:
❌ Security risks without input sanitization
❌ Inconsistent styling across browsers
❌ Accessibility fails without proper <label>
Conclusion & Advice:
Wrap inputs in
<fieldset>for groups (e.g., address fields). Always pair inputs with<label>!
6. Semantic HTML: Meaningful Markup
Tags that describe purpose, not just appearance:
| Tag | Purpose |
| ----------- | ---------------------------------- |
| `<header>` | Top banner (logo/navigation) |
| `<nav>` | Navigation links |
| `<main>` | Primary content area |
| `<article>` | Self-contained content (blog post) |
| `<section>` | Thematic grouping |
| `<aside>` | Sidebar/content |
| `<footer>` | Bottom info (copyright/contact) |Advantages: ✅ Better SEO and accessibility ✅ Cleaner, self-documenting code ✅ Easier maintenance
Disadvantages:
❌ Overuse complicates simple pages
❌ Partial IE11 support (use polyfills)
❌ Confusion between <article> vs <section>
Conclusion & Advice:
Replace
<div id="header">with<header>– search engines love this!
7. CSS Fundamentals: Styling 101
Syntax
selector {
property: value; /* e.g., color: blue; */
}Key Properties
| Property | Purpose | Example |
| ------------ | -------------- | ------------------------- |
| `color` | Text color | `color: #FF5733;` |
| `font-size` | Text size | `font-size: 1.2rem;` |
| `background` | Background | `background: #f0f0f0;` |
| `margin` | Outer spacing | `margin: 20px;` |
| `padding` | Inner spacing | `padding: 10px;` |
| `border` | Element border | `border: 1px solid #000;` |Advantages:
✅ Consistent styling across elements
✅ Separation of concerns (HTML ≠ CSS)
✅ Powerful inheritance (e.g., set font-family on <body>)
Disadvantages:
❌ Specificity conflicts (.class vs #id)
❌ Global scope pollution
❌ Browser-specific prefixes (-webkit-, -moz-)
Conclusion & Advice:
Use classes (
.button) instead of IDs (#submit) for reusable styles. Learn the box model: https://mdn.mozillademos.org/files/16558/box-model.png
8. CSS Layouts: Flexbox & Grid
Flexbox (1D Layout)
.container {
display: flex;
justify-content: center; /* Horizontal alignment */
align-items: center; /* Vertical alignment */
gap: 10px; /* Space between items */
}Ideal for nav bars and card rows
Grid (2D Layout)
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
grid-template-rows: 100px auto;
gap: 20px;
}Perfect for image galleries and dashboards
Advantages:
✅ Responsive by default
✅ No more float hacks
✅ Precise alignment control
Disadvantages: ❌ Steeper learning curve ❌ Older browser limitations ❌ Overkill for simple layouts
Conclusion & Advice:
Play Flexbox Froggy (game) to master Flexbox! Use
frunits in Grid for flexible columns.
9. Responsive Design: Media Queries
Adapt layouts to screen sizes:
/* Mobile-first default */
.container { padding: 10px; }
/* Tablet */
@media (min-width: 768px) {
.container { padding: 20px; }
}
/* Desktop */
@media (min-width: 1024px) {
.container { padding: 40px; }
}Advantages: ✅ One codebase for all devices ✅ Improved SEO (Google prioritizes mobile-friendly sites) ✅ Better user experience
Disadvantages: ❌ Testing across devices is time-consuming ❌ Complex breakpoint management ❌ Content reordering challenges
Conclusion & Advice:
Start mobile-first — it’s easier to scale up than down. Use Chrome DevTools for device testing.
10. CSS Variables & Utilities
Variables (Custom Properties)
:root {
--primary-color: #3498db;
--spacing: 20px;
}
.button {
background: var(--primary-color);
padding: var(--spacing);
}Utility Classes
.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }
.hidden { display: none; }Advantages: ✅ Consistent theming with variables ✅ Rapid prototyping with utility classes ✅ Reduced CSS duplication
Disadvantages: ❌ Over-reliance on utilities creates messy HTML ❌ Variable support in older browsers ❌ Naming convention conflicts
Conclusion & Advice:
Adopt BEM naming (Block__Element — Modifier) for scalable CSS:
.card__title--highlighted { color: gold; }Cheat Sheet: HTML Quick Reference
| Tag | Purpose |
| ----------------- | ---------------------------------- |
| `<!DOCTYPE html>` | HTML5 document declaration |
| `<html>` | Root element |
| `<head>` | Metadata container |
| `<body>` | Visible content |
| `<h1>` – `<h6>` | Headings |
| `<p>` | Paragraph |
| `<a>` | Hyperlink |
| `<img>` | Image (`src`, `alt` required) |
| `<ul>` / `<ol>` | Unordered/Ordered list |
| `<li>` | List item |
| `<table>` | Table container |
| `<tr>` | Table row |
| `<td>` | Table data cell |
| `<form>` | User input form |
| `<input>` | Input field (`type`, `name`, `id`) |
| `<button>` | Clickable button |
| `<div>` | Content division |
| `<span>` | Inline container |
| `<header>` | Top section |
| `<footer>` | Bottom section |Cheat Sheet: CSS Quick Reference
| Property | Purpose | Example |
| ----------------------- | ----------------------------- | ----------------------------------- |
| `color` | Text color | `color: #333;` |
| `font-size` | Text size | `font-size: 16px;` |
| `font-family` | Font type | `font-family: Arial, sans-serif;` |
| `background-color` | Background color | `background-color: #f8f9fa;` |
| `margin` | Outer spacing | `margin: 10px 5px;` |
| `padding` | Inner spacing | `padding: 15px;` |
| `border` | Border style | `border: 1px solid #ddd;` |
| `display` | Layout type | `display: flex;` |
| `width / height` | Element dimensions | `width: 100%; height: auto;` |
| `text-align` | Horizontal text alignment | `text-align: center;` |
| `position` | Positioning method | `position: relative;` |
| `flex-direction` | Flex item direction | `flex-direction: column;` |
| `grid-template-columns` | Grid columns definition | `grid-template-columns: 1fr 2fr;` |
| `gap` | Space between flex/grid items | `gap: 20px;` |
| `@media` | Responsive breakpoint | `@media (max-width: 768px) { ... }` |
| `:hover` | Mouse-over effect | `a:hover { color: red; }` |Final Blueprint: Your Web Journey Starts Now!
You’ve just unlocked the essentials of HTML & CSS! Remember:
- Practice Daily: Break then fix code — it’s the best teacher!
- Steal Like an Artist: Inspect websites you love (Right-click → “Inspect”)
- Build Tiny Projects: Try recreating:
- Google homepage
- Netflix movie card
- Airbnb search form
“The beautiful thing about learning is that nobody can take it away from you.” — B.B. King
👉 Your First Project: Create a personal bio page with:
- HTML:
<header>,<img>,<h1>,<p>, social media links - CSS: Custom colors, centered content, hover effects
Found this helpful? ✅ Save for reference 🔁 Share with fellow learners ➕ Follow for more web dev guides
Got questions? Ask below! 🚀
메타데이터
- post_id
- cd24ff2e1916
- slug
- html-css-cheatsheet-quick-reference-for-structure-styling-cd24ff2e1916
- url
- https://medium.com/@riki.graha/html-css-cheatsheet-quick-reference-for-structure-styling-cd24ff2e1916
- canonical_url
- https://medium.com/@riki.graha/html-css-cheatsheet-quick-reference-for-structure-styling-cd24ff2e1916
- author_url
- https://medium.com/@riki.graha
- status
- ok
- fetched_at
- 2026-08-04 10:34:03
