Press ESC to close
W
Learnweb.safal.me
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

Hello! I change when you edit the CSS! ✨
📸 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

I'm a box! Change my padding, margin, and border! 📦
⚡ 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

1
2
3

↔️ justify-content (Main Axis)

A
B
C

↕️ align-items (Cross Axis)

X
Y
Z

🎯 THE GOLDEN TRICK - Perfect Center!

I'm Centered! 🎯
💡 Pro Tip: justify-content + align-items + center = Perfect Center!

🔄 flex-wrap

1
2
3
4
5
6
📋 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;