Beginner Friendly

HTML & CSS Basics

Master the fundamentals of web styling with interactive examples. Learn selectors, box model, flexbox, and more!

📝 How to Use This Tutorial

Type CSS code in the dark code areas to see live changes
Click the quick buttons to try preset styles instantly
Use the ⛶ Expand button for a bigger view
Press ESC to close expanded editors

📸 CSS Selectors Cheat Sheet

🎯

Basic Selectors

elementpAll <p> elements

.class.highlightclass="highlight"

#id#headerid="header"

**All elements

🔗

Combinators

A Bdiv pp inside div

A > Bdiv > pDirect child p

A + Bh1 + pp right after h1

A ~ Bh1 ~ pAll p after h1

📸 3 Ways to Write CSS

1️⃣

Inline CSS

<p style="color: red;">

Not recommended for big projects

2️⃣

Internal CSS

<style> p { color: red; } </style>

Good for single pages

Recommended

3️⃣

External CSS

<link rel="stylesheet" href="style.css">

Best for multiple pages!

✏️ Try CSS Text Styling

Quick Presets:

✏️ EDIT TAILWIND CLASSES

❌"padding:": Use "p-", "px-", "py-", "pt-", "pb-", "pl-", or "pr-"

Hello! I change when you edit the CSS! ✨

💡 Tip: Try combining classes like bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600

📸 CSS Box Model

MARGIN

BORDER

PADDING

CONTENT

🎁 Think of it like a gift box:

Content = The gift inside
Padding = Bubble wrap around the gift
Border = The box itself
Margin = Space between boxes

📦 Try the Box Model

Quick Presets:

✏️ EDIT TAILWIND CLASSES

❌"padding:": Use "p-", "px-", "py-", "pt-", "pb-", "pl-", or "pr-"

❌"margin:": Use "m-", "mx-", "my-", "mt-", "mb-", "ml-", or "mr-"

I'm a box! Change my padding, margin, and border! 📦

💡 Tip: Try combining classes like bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600

⚡ Must Learn

Flexbox - The Layout Superpower!

Flexbox makes creating layouts incredibly easy. Master this one property and you'll unlock endless possibilities!

✨display: flex;✨

↔️ flex-direction

Quick Presets:

✏️ EDIT TAILWIND CLASSES

❌"display:": Use "flex", "grid", "block", "inline", or "hidden"

⚠️"row;" might not be a valid Tailwind class. Did you mean "rounded..."?

💡 Tip: Try combining classes like bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600

↔️ justify-content (Main Axis)

Quick Presets:

✏️ EDIT TAILWIND CLASSES

❌"display:": Use "flex", "grid", "block", "inline", or "hidden"

❌"center;": Use "items-center" and/or "justify-center"

💡 Tip: Try combining classes like bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600

↕️ align-items (Cross Axis)

Quick Presets:

✏️ EDIT TAILWIND CLASSES

❌"display:": Use "flex", "grid", "block", "inline", or "hidden"

❌"center;": Use "items-center" and/or "justify-center"

❌"min-height:": Use "h-" prefix (e.g., "h-full", "h-screen", "h-64")

💡 Tip: Try combining classes like bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600

🎯 THE GOLDEN TRICK - Perfect Center!

Quick Presets:

✏️ EDIT TAILWIND CLASSES

❌"display:": Use "flex", "grid", "block", "inline", or "hidden"

❌"center;": Use "items-center" and/or "justify-center"

❌"min-height:": Use "h-" prefix (e.g., "h-full", "h-screen", "h-64")

I'm Centered! 🎯

💡 Tip: Try combining classes like bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600

🔄 flex-wrap

Quick Presets:

✏️ EDIT TAILWIND CLASSES

❌"display:": Use "flex", "grid", "block", "inline", or "hidden"

💡 Tip: Try combining classes like bg-blue-500 text-white p-4 rounded-lg hover:bg-blue-600

📋 Flexbox Cheat Sheet

Container Properties

display: flex;

flex-direction: row | column;

justify-content: center | space-between;

align-items: center | flex-start;

flex-wrap: wrap | nowrap;

gap: 10px;

▢

Item Properties

flex: 1;

flex-grow: 1;

flex-shrink: 0;

flex-basis: 200px;

align-self: center;

order: 1;