Hey there 👋
Let me ask you something — have you ever written CSS and thought:
"Why isn’t this working?"
"Why is this element behaving like this?"
"Why does adding one line, break everything else?"
"Why is this div overflowing?"
"Where did this horizontal scrollbar even come from?"
If you nodded “yes” — you’re not alone.
In fact, I’m currently in the same state too — trying to truly understand CSS rather than just make things “look okay.”
That’s why I created this repo — a place where I’m documenting every concept I explore and understand along the way.
I’m learning new things every day — it’s not just a static collection — it’s a growing learning log.
I’ve spent way too much time stuck in the trial-and-error loop while writing CSS — guessing, googling, tweaking, refreshing, breaking things, and repeating it all again.
At some point, I realized: the problem wasn’t CSS... the problem was not having a rock-solid understanding of the fundamentals.
So I decided to do something about it.
This repo is my personal journey of learning CSS the right way — from the ground up. Every note, every example, every explanation here is something I’ve explored, understood (or struggled with!), and documenting with chatGPT for my own future reference.
And I thought — why not share it with you too?
- Simple, no-fluff explanations of core CSS concepts
- Visuals, breakdowns, and real examples to make things stick
- A clear roadmap to go from "I kind of know CSS" to "I finally GET it!"
- Mental models that help you write CSS with intention — not guesswork
- Answers to those annoying little questions that keep tripping us up
- You're constantly surprised by how CSS behaves
- You feel like you're just hacking things together until it "looks okay"
- You want to finally understand why things work the way they do
- You’re tired of tutorials that assume you already know everything
- You want to build a strong foundation and stop being scared of CSS
You’re not a complete beginner — but also not looking for “Advanced CSS” tricks.
This repo is more about fundamentals: writing simple CSS with confidence, not guessing.
⚠️ Heads up: Once you go through this, you might never look at CSS the same way again.
| File Name | Description |
|---|---|
01-boxmodel.md |
CSS Box Model fundamentals - content, padding, border, margin areas and their behavior |
02-widthOfBlockElement.md |
Understanding block element width behavior, auto vs 100%, and box-sizing property |
03-avoidFixedHeight.md |
Best practices for avoiding fixed heights, using min-height, padding, and flexbox instead |
04-inheritance.md |
CSS inheritance principles - which properties inherit, form elements, and practical examples |
05-thinkInheritance.md |
Think and plan to apply inheritance while writing CSS |
06-relativeUnits.md |
How to use em and rem units effectively in responsive design |
07-CSScascade.md |
Understanding CSS Cascade rules |
08-inline-formating-context.md |
Inline formatting context, baseline, and inline element behavior |
09-BFC.md |
Block Formatting Context (BFC) - what it is, when it's created, and practical applications |
10-bringConsistency.md |
Here we will talk about the final way to adapt to bring consistency across your formating context |