Sayani's Dev School 🎓

🏷️ CSS Classes: The Label Maker for Your HTML

Think of every HTML element as a blank t-shirt fresh off the rack. A CSS class is the label you stitch onto it — "summer-sale", "premium", "gift-item". The label tells the browser exactly how to dress that element. You name the label yourself; CSS just follows your instructions.

You add a class using the class attribute right inside your HTML tag:

<div class="gift-item">...</div>

Then in CSS, you target it by putting a dot (.) in front of the name:

.gift-item {
  border-radius: 8px;
  padding: 12px;
}

That dot is the secret signal. Without it, CSS targets every HTML tag of that type — write div { } and you've just restyled every single div on the page, maybe thousands of them! With the dot, you're being surgical: only elements you deliberately labeled get the style. One tiny character, completely different impact.

Here's the superpower: one element can wear multiple classes at once — just separate them with spaces. Each class brings its own styles to the party and they all stack up beautifully. p-3 adds padding, h-100 makes it full-height, cursor-pointer changes the mouse cursor. Mix and match like accessories on an outfit.

And classes are reusable — write the CSS rule once, apply it to a hundred different elements. This is exactly how design systems and utility-class frameworks (like Bootstrap and Tailwind, and the utilities you see in this very app) let you build complex UIs quickly without repeating yourself.

One naming tip: class names are case-sensitive and can't start with a number. You'll see kebab-case everywhere in this codebase — words joined by hyphens, like gift-item, headline-text, online_deal_box. (Some older names use underscores — both work fine!)

📦 The Box Model: Every Element Is a Gift Box

Here is one of the most important mental models in CSS: every HTML element lives inside an invisible box. That box has four layers, from the inside out — and once you can picture them, a whole lot of spacing bugs start making sense.

Content — the actual stuff: your text, image, or whatever lives inside. Padding — breathing room inside the box wall, between the content and the border. Border — the visible (or invisible) wall of the box itself. Margin — empty space outside the border, pushing neighbouring elements away.

Think of wrapping a gift 🎁. The gift is the content. The bubble wrap hugging it is the padding. The cardboard box is the border. The gap you leave on the shelf between your box and the next box? That is the margin. Same four layers, every time, on every element.

One important trick: by default, browsers add padding on top of a declared width, making elements wider than you expect. The fix is box-sizing: border-box — it folds padding inside the declared width. Notice line 1 of this page's CSS: *, *::before, *::after { box-sizing: border-box; } — the entire app sets this globally so every element behaves predictably.

🧲 Flexbox: The Layout Superpower You Were Born to Use

Before Flexbox, lining things up horizontally in CSS meant wrestling with floats and clearfixes — trust me, you do not want to know. Flexbox made the whole thing feel almost magical, and it is now the layout tool you will reach for every single day.

Here is the golden rule: you add Flexbox to the parent, not the children. Write display: flex on the container, and all its direct children automatically become flex items that line up side by side.

Then tune three main knobs on that parent:

• flex-direction — row (default, left-to-right) or column (top-to-bottom)
• justify-content — spacing along the main axis: center, space-between, flex-start…
• align-items — alignment on the cross axis: center, flex-start, flex-end

Think of a shelf of books 📚. The shelf is your flex container. Each book is a flex child. justify-content: space-between pushes the first book to the far left and the last to the far right. align-items: center lines all the books up to the middle of the shelf height. gap is the physical gap you leave between each book — no maths, no guesswork.