DEV Community: Munin 🌝

Day 25 / 365 - Full Stack (CSS)

Munin 🌝 — Fri, 26 Dec 2025 02:56:09 +0000

“Alright, let’s dive deep into CSS! I’ve been learning step by step and decided to put everything I’ve learned into one mega-guide. This guide explains the concepts clearly with examples, so whether you’re just starting or want a solid reference, it’s all here. Everything in this guide is tested and works in real projects — no fluff, just practical CSS.”

Let’s go deeper… into CSS 🎨

So first —

CSS stands for Cascading Style Sheets.

If HTML is the skeleton of a website,
then CSS is the skin, clothes, and vibe.

HTML decides what exists.
CSS decides how it looks.

Without CSS, every website looks like it’s from 1999.

What CSS actually does

CSS is used to:

Change colors 🎨

Change size 📏

Control spacing 📦

Control layout 🧱

Make websites responsive 📱

Add animations ✨

Basically:
CSS makes websites not ugly.

✅ TOPIC 1: Basics of CSS (What it is + how to link it)

What is CSS

CSS controls how your website looks.

HTML = structure (what exists)
CSS = styling (how it looks)

Without CSS, your site works…
but it looks ugly and lifeless.

How CSS works (simple idea)

CSS follows one rule:

selector {
  property: value;
}

Example:

p {
  color: red;
}

Meaning:
👉 “Make all <p> text red.”

Ways to add CSS to HTML

There are 3 ways. Only 1 is correct long-term.

1️⃣ Inline CSS (bad habit 🚫)

CSS written directly inside HTML.

<h1 style="color: red;">Hello</h1>

Why this sucks:

Hard to manage
Messy
Not reusable

Use it only for testing.

2️⃣ Internal CSS (okay for small stuff)

CSS written inside <style> in HTML.

<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>

This is fine for:

Small projects
Practice
One-page demos

But still not ideal for real projects.

3️⃣ External CSS (BEST way ✅)

CSS in a separate file.

HTML

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

style.css

h1 {
  color: green;
}

Why this is the best:

Clean
Reusable
Easy to manage
Industry standard

This is how real websites do it.

Folder structure (important habit)

project-folder/
│
├── index.html
└── style.css

Keep it simple. Don’t overcomplicate.

CSS Selectors (very important)

Selectors decide what element you are styling.

Element selector

p {
  color: red;
}

Targets all <p> tags.

Class selector (MOST USED)

.box {
  background-color: yellow;
}

HTML:

<div class="box"></div>

Classes are reusable.
You’ll use these all the time.

ID selector (use carefully)

#main {
  background-color: blue;
}

HTML:

<div id="main"></div>

Rules:

One ID per page
Don’t overuse

CSS Comments

Used to leave notes.

/* This styles the heading */
h1 {
  color: red;
}

Browser ignores comments.

Order matters (basic priority)

If multiple rules apply:

Inline CSS > Internal CSS > External CSS
More specific selector wins

Example:

p {
  color: red;
}

.text {
  color: blue;
}

HTML:

<p class="text">Hello</p>

Text will be blue, not red.

Small full example

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 class="title">Hello CSS</h1>
  <p>This is styled text</p>
</body>
</html>

CSS

.title {
  color: purple;
}

p {
  color: gray;
}

Reality check 🧠

After this topic, you should understand:

What CSS is
How to link CSS properly
How selectors work
Why external CSS is best

✅ TOPIC 2: Fonts & Colors (this is where design actually starts)

This topic is very important because 90% of websites are text.

Fonts in CSS (text styling basics)

Fonts control:

how text looks
how readable your site is
how professional it feels

Bad fonts = bad website. Simple.

1️⃣ `font-family`

This decides which font is used.

body {
  font-family: Arial;
}

You can also give backup fonts:

body {
  font-family: Arial, Helvetica, sans-serif;
}

Meaning:
👉 “Use Arial. If not available, use Helvetica. If not, use any sans-serif.”

Always add a fallback.

Serif vs Sans-serif (quick clarity)

Serif → fonts with small lines (formal, old-school)
Sans-serif → clean, modern (most websites)

Most modern sites use sans-serif.

2️⃣ Using Google Fonts (real-world usage)

Nobody uses default fonts anymore.

Step 1: Add font link in HTML

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

Step 2: Use it in CSS

body {
  font-family: 'Poppins', sans-serif;
}

This is how real websites do fonts.

3️⃣ `font-size`

Controls text size.

p {
  font-size: 16px;
}

Common sizes:

16px → normal text
24px → subheading
32px+ → headings

4️⃣ `font-weight`

Controls how bold text is.

h1 {
  font-weight: 700;
}

Common values:

400 → normal
700 → bold

5️⃣ `font-style`

Usually for italics.

p {
  font-style: italic;
}

Used rarely. Don’t overdo it.

6️⃣ `line-height` (VERY IMPORTANT)

Controls spacing between lines.

p {
  line-height: 1.6;
}

If text feels cramped → increase this.

7️⃣ `letter-spacing`

Space between letters.

h1 {
  letter-spacing: 2px;
}

Good for headings, bad for paragraphs.

8️⃣ `text-align`

Aligns text.

h1 {
  text-align: center;
}

Values:

left
center
right

9️⃣ `text-decoration`

Used for underlines.

a {
  text-decoration: none;
}

This removes the ugly underline from links.

Colors in CSS 🎨

Colors control mood. Use them wisely.

1️⃣ Named colors (basic)

p {
  color: red;
}

Easy, but limited.

2️⃣ HEX colors (MOST USED)

h1 {
  color: #ff5733;
}

Used everywhere in real projects.

3️⃣ RGB colors

div {
  background-color: rgb(0, 0, 0);
}

RGB = red, green, blue.

4️⃣ RGBA (with transparency)

div {
  background-color: rgba(0, 0, 0, 0.5);
}

Last value = opacity.

5️⃣ `background-color`

Sets background color.

body {
  background-color: #f5f5f5;
}

Small real example

HTML

<h1 class="title">Welcome</h1>
<p class="text">This is a paragraph</p>

CSS

body {
  font-family: 'Poppins', sans-serif;
  background-color: #f5f5f5;
}

.title {
  font-size: 32px;
  font-weight: 700;
  color: #222;
  text-align: center;
}

.text {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}

This already looks clean and professional.

Reality check 🧠

After this topic, you should:

Know how to use fonts properly
Know how to use colors correctly
Understand why spacing matters for text

This is the foundation of good UI.

✅ TOPIC 3: CSS Box Model (this clears most confusion)

If CSS ever felt “random”, it’s because you didn’t understand the box model.
Every single element in CSS is a box. No exceptions.

The Box Model (simple idea)

Every element has 4 layers:

margin
border
padding
content

Think of it like a package 📦.

1️⃣ Content

This is the actual stuff inside.

text
image
button content

.box {
  width: 200px;
  height: 100px;
}

This sets the content size.

2️⃣ Padding (space INSIDE the box)

Padding creates space between the content and the border.

.box {
  padding: 20px;
}

More padding = more breathing room inside.

3️⃣ Border (the edge of the box)

Border wraps around padding + content.

.box {
  border: 2px solid black;
}

Format:

border: width style color;

4️⃣ Margin (space OUTSIDE the box)

Margin creates space between elements.

.box {
  margin: 20px;
}

Margin pushes elements away from each other.

Full example (important)

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 30px;
}

Actual space taken on screen:

Content: 200px
Padding: 40px (20 left + 20 right)
Border: 4px
Margin: 60px

👉 This is why layouts break if you don’t understand the box model.

`box-sizing` (VERY IMPORTANT)

By default, CSS adds padding + border outside the width.

This causes headaches.

Fix it like a pro:

* {
  box-sizing: border-box;
}

Now:

width includes padding + border
layouts behave predictably

Always do this. Always.

Individual sides

You don’t have to apply spacing everywhere.

margin-top: 20px;
padding-left: 10px;
border-bottom: 2px solid red;

Shorthand (clean way)

margin: 10px 20px;
padding: 15px;

Order:

top right bottom left

Common beginner mistakes (real talk)

❌ Using margin for inner spacing
❌ Using padding to separate elements
❌ Forgetting box-sizing
❌ Guessing values instead of understanding

Small visual example

<div class="card">
  Hello
</div>

.card {
  width: 200px;
  padding: 20px;
  border: 1px solid gray;
  margin: 40px;
}

This is how cards, buttons, sections are built.

Reality check 🧠

If you understand:

margin vs padding
how width actually works
why box-sizing matters

You just leveled up in CSS.

🔥 TOPIC 4: CSS `display` property

First: how browsers place elements (important mindset)

The browser lays out elements in normal flow:

top to bottom
left to right

display decides how an element participates in that flow.

The 3 core display types you MUST understand

If you get these, everything else clicks.

1️⃣ `display: block` (default for div, p, h1)

Behavior

Starts on a new line
Takes full available width
Width & height work
Margin & padding work on all sides

Example

<div class="box">Box</div>
<div class="box">Box</div>

.box {
  display: block;
  width: 200px;
  height: 100px;
  background: lightcoral;
}

What happens

Each box is on a new line
Even if width is small, it still claims full row

This is why <div> stacks vertically.

2️⃣ `display: inline` (default for span, a)

Behavior

Stays in the same line
Takes only needed width
❌ width & height DO NOT work
Padding works (but weird)
Margin works only left & right

Example

<span class="tag">HTML</span>
<span class="tag">CSS</span>

.tag {
  display: inline;
  width: 200px; /* ignored */
  height: 100px; /* ignored */
  background: lightblue;
}

Why this matters

If you try to size inline elements and nothing happens — this is why.

Inline elements are for text-level styling, not layout.

3️⃣ `display: inline-block` (MOST MISUNDERSTOOD)

Behavior

Stays in the same line
✅ width & height work
Margin & padding fully work

Example

<div class="card">Card</div>
<div class="card">Card</div>

.card {
  display: inline-block;
  width: 150px;
  height: 100px;
  background: lightgreen;
  margin: 10px;
}

Why this is powerful

You can:

place elements side-by-side
control their size

This is how buttons, tags, badges used to be built (before flexbox).

Inline vs Inline-block (important difference)

Property	inline	inline-block
Width works	❌	✅
Height works	❌	✅
Same line	✅	✅

If sizing doesn’t work → you probably need inline-block.

4️⃣ `display: none` (removes from layout)

Behavior

Element is completely gone
No space reserved
Browser acts like it doesn’t exist

.modal {
  display: none;
}

Used for:

dropdowns
modals
toggles
conditional UI

`display: none` vs `visibility: hidden` (DEEP difference)

visibility: hidden;

Property	display: none	visibility: hidden
Visible	❌	❌
Takes space	❌	✅
Clickable	❌	❌

Use the right one based on layout needs.

5️⃣ `display: flex` (container behavior change)

.container {
  display: flex;
}

This:

changes how children are laid out
removes normal block behavior
enables flex rules

⚠️ Important:
display: flex affects children, not the element itself.

We’ll deep dive flexbox later.

Common beginner mistakes (real talk)

❌ Expecting inline elements to accept width
❌ Using <br> instead of fixing display
❌ Using display: none when debugging layout
❌ Not understanding default display types

Mental model (remember this)

Display decides how an element participates in layout flow.

Not size. Not color.
Flow.

Reality check 🧠

You truly understand display if:

You know why width doesn’t work sometimes
You know when to use inline-block
You can predict layout before writing CSS

🔥 TOPIC 5: CSS `position` property

First: how elements behave by default

By default, every element has:

position: static;

That means:

It follows normal document flow
Top → bottom, left → right
You cannot move it using top, left, right, bottom

So if you write:

div {
  top: 20px;
}

Nothing happens.
Why? Because position: static ignores offsets.

The 5 position values you need to know

static
relative
absolute
fixed
sticky

Let’s go one by one — properly.

1️⃣ `position: static` (default)

Behavior

Normal flow
Offsets don’t work
You almost never write this manually

div {
  position: static;
}

This is just how elements behave naturally.

2️⃣ `position: relative` (MOST MISUNDERSTOOD)

What people think:

“relative moves the element”

What it ACTUALLY does:

Keeps the element in normal flow
Allows offsets (top, left, etc.)
Creates a reference point for absolute children

Example

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

What happens:

Element moves visually
Original space is still reserved

Important:
Relative elements still affect layout.

Relative WITHOUT moving it (very important use)

.parent {
  position: relative;
}

Why do this?
👉 To control absolutely positioned children.

This is the main reason relative is used.

3️⃣ `position: absolute` (true freedom)

Behavior

Removed from normal flow
Does NOT reserve space
Positioned relative to the nearest positioned ancestor
If none → relative to <body>

Example

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: relative;
  width: 300px;
  height: 300px;
  background: lightgray;
}

.child {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: red;
}

What’s happening:

.child ignores normal flow
It positions itself inside .parent
Because .parent is relative

This is not optional — this is how absolute positioning works.

Absolute without relative (common bug)

.child {
  position: absolute;
  top: 0;
}

If no parent is positioned:
👉 It attaches to the entire page.

This causes “why is this floating randomly?” bugs.

4️⃣ `position: fixed` (viewport based)

Behavior

Removed from normal flow
Positioned relative to the browser window
Does NOT move when scrolling

Example (navbar)

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

Used for:

sticky headers
floating buttons
chat widgets

Fixed elements don’t care about the page — only the screen.

5️⃣ `position: sticky` (hybrid)

Behavior

Acts like relative at first
Turns into fixed when scrolling reaches a point

Example

.header {
  position: sticky;
  top: 0;
}

Important rules:

Needs a top value
Parent must not have overflow: hidden

Used for:

section headers
modern navbars

Offsets: `top`, `right`, `bottom`, `left`

These only work with:

relative
absolute
fixed
sticky

Example:

.box {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

`z-index` (stacking order)

When elements overlap:

.box1 {
  z-index: 1;
}

.box2 {
  z-index: 10;
}

Higher number = on top.

⚠️ z-index only works on positioned elements.

Visual mental model (remember this)

relative → reference point
absolute → escapes flow, sticks to reference
fixed → sticks to screen
sticky → switches behavior on scroll

Common beginner mistakes (brutal honesty)

❌ Using absolute for layout
❌ Forgetting parent position: relative
❌ Using margins instead of positioning
❌ Fighting layout instead of understanding flow

Position is for overlays, not layout systems.

Reality check 🧠

You understand position if:

You know why absolute needs a relative parent
You can predict where elements will land
You don’t panic when things overlap

🔥 TOPIC 6: CSS Size Units

Understanding CSS units is crucial.
Wrong units = broken layouts, text that’s too small, elements that overflow.

1️⃣ Absolute vs Relative Units

Absolute units → fixed size, doesn’t change with screen:

px → pixels (most common)
pt → points (printing)

Relative units → adapt to screen, parent, or font size:

% → percentage of parent
em → relative to parent font size
rem → relative to root (<html>) font size
vw → 1% of viewport width
vh → 1% of viewport height

2️⃣ Pixels (`px`)

Most common unit. Fixed size.

div {
  width: 200px;
  height: 100px;
}

Predictable
Doesn’t scale automatically
Fine for small fixed elements (buttons, icons)

3️⃣ Percentages (`%`)

Relative to parent element size.

.container {
  width: 500px;
}

.box {
  width: 50%; /* 50% of container → 250px */
  height: 50%;
  background: lightblue;
}

Responsive by default
Great for fluid layouts

4️⃣ `em` (relative to parent font size)

p {
  font-size: 16px;
}

span {
  font-size: 2em; /* 2 × 16px = 32px */
}

em compounds if nested
Useful for scalable text

5️⃣ `rem` (relative to root font size)

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem; /* 1.5 × 16px = 24px */
}

rem ignores nesting
Preferred for consistent scalable typography

6️⃣ Viewport units (`vw`, `vh`)

1vw = 1% of viewport width
1vh = 1% of viewport height

Example: responsive text

h1 {
  font-size: 5vw;
}

Text scales with window size.

Example: full-screen box

.box {
  width: 100vw;
  height: 100vh;
  background: lightgreen;
}

Perfect for hero sections
Very responsive

7️⃣ Combining units (common trick)

p {
  font-size: calc(1rem + 1vw);
}

calc() lets you mix fixed + responsive units
Makes typography flexible

8️⃣ Small real example

<div class="container">
  <div class="box">Box</div>
</div>

.container {
  width: 80%;       /* relative to screen */
  height: 300px;
  background: lightgray;
}

.box {
  width: 50%;        /* relative to container */
  height: 50%;
  font-size: 2rem;
  background: lightblue;
}

Container scales with screen
Box scales with container
Text scales with root font

This is real responsive design practice.

Common mistakes

❌ Using only px → breaks on small screens
❌ Using % without understanding parent size
❌ Mixing units randomly → inconsistent layouts
❌ Forgetting rem for consistent typography

Reality check 🧠

If you understand CSS units, you can:

Make layouts responsive
Make text readable on all devices
Avoid the most common beginner scaling bugs

🔥 TOPIC 7: CSS Float & Clear

What `float` actually does

float is all about positioning an element to the left or right so other content flows around it.

Think:

“I want this image on the left, and text should wrap around it.”

1️⃣ `float` basics

img {
  float: left;
  margin-right: 20px;
}

What happens:

Image moves to the left of the container
Text flows around it on the right
Element is taken out of normal flow (but still affects layout in certain ways)

Float values

Value	Effect
left	Element floats left
right	Element floats right
none	Default, no floating

2️⃣ Why `margin` matters with float

Without spacing, content sticks to the floated element:

img {
  float: left;
  margin-right: 15px;
}

This gives breathing room for text.
Always remember: floats don’t add automatic spacing.

3️⃣ Float + width

Floated elements must have a width for predictable behavior:

.sidebar {
  float: right;
  width: 200px;
}

Otherwise, it may collapse or break layout.

4️⃣ Common use case

HTML

<img src="cat.jpg" alt="Cat" class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

CSS

.left {
  float: left;
  margin-right: 20px;
  width: 150px;
}

Result:

Image on the left
Text wraps neatly on the right

5️⃣ `clear` property (stopping float)

Sometimes float breaks parent container height:

.container {
  background: lightgray;
}

If only children are floated, container collapses.

Solution: `clear`

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

Usage

<div class="container clearfix">
  <img class="left" src="cat.jpg">
  <p>Text here...</p>
</div>

clear: both ensures parent wraps floated children
.clearfix is standard in real-world websites

6️⃣ Float caveats

Floats are not a modern layout tool — replaced by flexbox/grid
Floats can cause collapsing parent height
Always use clear or .clearfix if parent must wrap children
Avoid multiple nested floats if possible

7️⃣ Small visual example

<div class="container clearfix">
  <img src="dog.jpg" class="left">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Floated image example.</p>
</div>

.left {
  float: left;
  width: 120px;
  margin-right: 15px;
}
.container {
  background: #f0f0f0;
  padding: 10px;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

Result:

Container wraps content
Image floated left
Text flows naturally

Reality check 🧠

If you understand float + clear:

You know how legacy websites handle layout
You can predict text wrapping behavior
You understand why modern flexbox/grid replaced floats

Float is old-school, but still a must-know foundation.

🔥 TOPIC 8: CSS Flexbox

Flexbox lets you control layout in one dimension (row or column) without hacks like float.
It’s clean, predictable, and responsive-friendly.

1️⃣ Flexbox terminology (must-know)

Container → the parent with display: flex
Items → direct children of the flex container

Think:

Container = box, Items = toys inside the box

2️⃣ Making a container flex

.container {
  display: flex;
}

Default behavior

flex-direction: row (left → right)
Items sit side by side
Heights align automatically to content

3️⃣ Flex direction

Controls main axis (direction items flow).

.container {
  display: flex;
  flex-direction: row;   /* default */
}

Other values:

row → left → right
row-reverse → right → left
column → top → bottom
column-reverse → bottom → top

Example

.container {
  display: flex;
  flex-direction: column;
}

Items now stack vertically.

4️⃣ Justify-content (main axis alignment)

Controls spacing along main axis.

Value	Effect
flex-start	items start of container
flex-end	items end of container
center	items centered
space-between	space between items
space-around	space evenly + half at edges
space-evenly	equal space everywhere

Example

.container {
  display: flex;
  justify-content: space-between;
}

Items spread evenly across container.

5️⃣ Align-items (cross axis alignment)

Controls alignment perpendicular to main axis.

Value	Effect
stretch	default, items fill container
flex-start	top/left
flex-end	bottom/right
center	middle
baseline	align by text baseline

Example

.container {
  display: flex;
  align-items: center;
}

Vertically center items in a row
Very useful for navbars, cards, buttons

6️⃣ Align-self (item-specific alignment)

Overrides align-items for a single item.

.item {
  align-self: flex-end;
}

7️⃣ Flex-wrap (multiple lines)

By default, items try to fit in one line.
Overflow? They shrink.

.container {
  display: flex;
  flex-wrap: wrap;
}

Items move to the next line if necessary
Works with justify-content and align-items

8️⃣ Flex-grow, flex-shrink, flex-basis

Controls how items size in container.

.item {
  flex: 1; /* shorthand for flex-grow:1; flex-shrink:1; flex-basis:0 */
}

flex-grow → how much it expands
flex-shrink → how much it shrinks
flex-basis → starting size

Example:

.item1 { flex: 2; } /* twice the space */
.item2 { flex: 1; }

9️⃣ Order (reorder items visually)

.item {
  order: 2; /* default is 0 */
}

Changes visual order without changing HTML
Useful for responsive layouts

10️⃣ Full real example

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  height: 200px;
  background: #eee;
}

.box {
  flex: 1;           /* equal space */
  margin: 10px;
  height: 100px;
  background: lightblue;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
}

Result:

Boxes take equal space
Wrap if container is too small
Vertically centered
Clean modern layout

Common beginner mistakes

❌ Not using flex container → nothing works
❌ Confusing justify-content vs align-items
❌ Forgetting flex-wrap → items overflow
❌ Using margin to position when flex exists

Reality check 🧠

After mastering flexbox:

You can create navbars, card grids, menus easily
Predict spacing, alignment, and wrapping behavior
Modern CSS layouts become intuitive

🔥 TOPIC 9: CSS Media Queries

Media queries let your website adapt to different screen sizes.
Think: mobile, tablet, desktop — all look good.

Without this, your site is tiny on mobile or stretched on desktop.

1️⃣ Basic syntax

@media (condition) {
  /* CSS rules */
}

Example:

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

max-width: 768px → applies only if screen ≤ 768px
Everything inside {} overrides normal CSS

2️⃣ Common conditions

max-width → apply below a width (mobile-first)
min-width → apply above a width (desktop-first)
orientation: portrait/landscape → vertical or horizontal screen

Example:

@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}

3️⃣ Mobile-first approach (modern standard)

Write base CSS for small screens first
Use min-width media queries for larger screens

body {
  font-size: 16px; /* mobile base */
}

@media (min-width: 768px) {
  body {
    font-size: 18px; /* tablet and up */
  }
}

@media (min-width: 1200px) {
  body {
    font-size: 20px; /* desktop */
  }
}

4️⃣ Combining multiple conditions

@media (max-width: 768px) and (orientation: portrait) {
  body {
    background: pink;
  }
}

Both conditions must be true
Useful for very specific layouts

5️⃣ Real responsive example

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1 1 30%;
  margin: 10px;
  height: 100px;
  background: lightgreen;
}

/* Mobile: stack boxes vertically */
@media (max-width: 600px) {
  .box {
    flex: 1 1 100%;
  }
}

What happens:

Desktop → 3 boxes in a row
Mobile → boxes stacked vertically
No manual resizing needed

6️⃣ Why media queries are essential

Make websites usable on any device
Improve readability, layout, and user experience
Avoid zooming or horizontal scrolling

7️⃣ Common beginner mistakes

❌ Forgetting mobile-first approach → desktop dominates
❌ Using only pixels → text or layout may break on small screens
❌ Overlapping media queries → conflicts and overrides

Reality check 🧠

If you master media queries:

Your website looks good on phones, tablets, desktops
You understand why layouts break without them
Responsive design becomes predictable, not magic

🔥 TOPIC 10: CSS Shadows

Shadows add depth, realism, and emphasis.
Two main types:

Box shadows → around elements
Text shadows → behind text

1️⃣ Box-shadow

Syntax

box-shadow: offset-x offset-y blur-radius spread-radius color;

offset-x → horizontal shift (px)
offset-y → vertical shift (px)
blur-radius → how blurry the shadow is
spread-radius → size of shadow expansion (optional)
color → shadow color

Basic example

.box {
  width: 200px;
  height: 100px;
  background: lightblue;
  box-shadow: 5px 5px 10px gray;
}

Shadow 5px right, 5px down, blurred 10px, gray color

Multiple shadows

.box {
  box-shadow: 2px 2px 5px black, -2px -2px 5px red;
}

Multiple shadows separated by commas
Can create glow or 3D effects

Inset shadows

.box {
  box-shadow: inset 0 0 10px black;
}

Shadow inside the box
Great for inner glow effects

2️⃣ Text-shadow

Syntax

text-shadow: offset-x offset-y blur-radius color;

Works like box-shadow but for text

Example

h1 {
  text-shadow: 2px 2px 4px gray;
}

Makes text pop
Useful for headings, banners, buttons

Multiple text shadows

h1 {
  text-shadow: 1px 1px red, 2px 2px blue;
}

Can create 3D or neon effects

3️⃣ Practical tips

Don’t overuse shadows → looks messy
Subtle shadows = modern, clean UI
Inset shadows = inner glow, depth for buttons/forms
Text shadows = headings, emphasis, neon effects

4️⃣ Full visual example

<div class="card">Card</div>
<h1 class="title">Shadow Text</h1>

.card {
  width: 200px;
  height: 100px;
  background: white;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
  margin: 20px;
}

.title {
  text-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}

Result:

Card pops from background
Heading looks lifted

Reality check 🧠

If you master shadows:

Your UI looks professional and modern
You can make elements stand out without images
You understand subtlety vs overkill

🔥 TOPIC 11: CSS Animations

CSS animations let you move, fade, rotate, or change elements smoothly over time.
Unlike transitions, animations can repeat, reverse, and run automatically.

1️⃣ Keyframes (heart of animations)

@keyframes defines how the animation changes over time.

Syntax

@keyframes animation-name {
  0% { /* start state */ }
  50% { /* middle state */ }
  100% { /* end state */ }
}

% = timeline of the animation
Can also use from (0%) and to (100%)

2️⃣ Example: simple color change

@keyframes colorChange {
  0% { background-color: red; }
  50% { background-color: yellow; }
  100% { background-color: green; }
}

.box {
  width: 100px;
  height: 100px;
  animation: colorChange 3s infinite;
}

3s → duration
infinite → repeats forever

3️⃣ Animation shorthand

animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode];

Example:

.box {
  animation: colorChange 3s linear 0s infinite alternate forwards;
}

linear → constant speed
alternate → reverses every iteration
forwards → keeps last frame after animation

4️⃣ Move element (translate)

@keyframes moveRight {
  0% { transform: translateX(0); }
  100% { transform: translateX(200px); }
}

.box {
  animation: moveRight 2s infinite alternate;
}

Moves the box horizontally
alternate → moves back automatically

5️⃣ Rotate element

@keyframes rotateBox {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.box {
  animation: rotateBox 2s linear infinite;
}

Smooth rotation
Combine with translate, scale for complex effects

6️⃣ Fade in/out (opacity)

@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.box {
  animation: fadeInOut 4s infinite;
}

Great for blinking effects or attention grabbers

7️⃣ Full example (move + fade + rotate)

<div class="animated-box">🎯</div>

@keyframes fancy {
  0%   { transform: translateX(0) rotate(0deg); opacity: 0; }
  50%  { transform: translateX(150px) rotate(180deg); opacity: 1; }
  100% { transform: translateX(0) rotate(360deg); opacity: 0; }
}

.animated-box {
  width: 100px;
  height: 100px;
  background: lightcoral;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fancy 5s infinite;
}

Moves right, rotates, and fades
Loops infinitely

8️⃣ Common beginner mistakes

❌ Animating everything at once → heavy for browser
❌ Forgetting transform → only works on certain properties
❌ Using top/left for animation → causes janky reflows
❌ Ignoring animation-timing-function → unnatural motion

Reality check 🧠

If you master CSS animations:

You can make loading spinners, slides, banners
Create micro-interactions (buttons, hover effects)
Build complex visual storytelling without JS

🔥 TOPIC 12: CSS Transitions

Transitions are like animations triggered by events — usually hover, focus, or class changes.

Animations = run automatically and can loop
Transitions = triggered by interaction

1️⃣ Basic syntax

transition: property duration timing-function delay;

property → what changes (background-color, width, opacity)
duration → how long it takes (2s, 500ms)
timing-function → speed curve (linear, ease, ease-in-out)
delay → wait before starting

2️⃣ Example: hover background color

.button {
  background-color: lightblue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: blue;
}

When hovering, background smoothly changes over 0.3s
Without transition → instant change

3️⃣ Transition multiple properties

.box {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 0.5s, height 0.5s, background 0.5s;
}

.box:hover {
  width: 200px;
  height: 150px;
  background: green;
}

Multiple changes animate together
Great for interactive cards

4️⃣ Timing functions (motion curve)

Function	Effect
linear	constant speed
ease	slow start & end
ease-in	slow start
ease-out	slow end
ease-in-out	slow start & end
cubic-bezier()	custom curve

Example

.box {
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

Can create springy or bouncy effects

5️⃣ Transform + transition

Transforms like scale, rotate, translate work best with transitions:

.card {
  transform: scale(1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.1);
}

Smooth zoom effect
No layout jank, GPU-accelerated

6️⃣ Delay

.box {
  transition: opacity 0.5s ease 0.2s;
}

Waits 0.2s before starting
Useful for staggered effects

7️⃣ Practical real example

<div class="card">Hover me</div>

.card {
  width: 150px;
  height: 100px;
  background: lightcoral;
  transition: all 0.3s ease;
}

.card:hover {
  background: orange;
  transform: scale(1.1) rotate(5deg);
}

Hover triggers color + size + rotation smoothly

8️⃣ Common beginner mistakes

❌ Forgetting transition on the element itself
❌ Using properties that can’t animate (like display)
❌ Overusing transition-all → may hurt performance
❌ Ignoring timing functions → animations feel unnatural

Reality check 🧠

If you master transitions:

You can make hover effects, buttons, menus feel professional
Add subtle, smooth motion without JavaScript
Combine with transforms for interactive UI magic

🔥 TOPIC 13: CSS Grid

Grid allows you to create complex layouts with rows and columns easily, without floats or hacks.
Think: like a spreadsheet for your website.

1️⃣ Grid terminology (must-know)

Grid container → parent element with display: grid
Grid items → children of the container
Track → a row or column
Gap → space between rows/columns

2️⃣ Making a container a grid

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* 3 columns, fixed width */
  grid-template-rows: 100px 100px;          /* 2 rows, fixed height */
  gap: 10px;                                /* space between items */
}

Now children automatically go into grid cells
Gap = spacing without margin hacks

3️⃣ Fractional units (`fr`)

fr = fraction of available space

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Middle column = twice the width of others
Makes responsive layouts much easier

4️⃣ Auto-fill & auto-fit (responsive grids)

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

Automatically creates as many columns as fit
Each column minimum 150px, maximum 1fr
Perfect for cards, galleries, dashboards

5️⃣ Placing items manually

.item1 {
  grid-column: 1 / 3; /* spans from column 1 to 2 */
  grid-row: 1 / 2;    /* row 1 only */
}

You can make items span multiple rows/columns
Great for featured cards or headers

6️⃣ Aligning items

justify-items → horizontal alignment (start, end, center, stretch)
align-items → vertical alignment

.container {
  display: grid;
  justify-items: center;
  align-items: center;
}

Centers all items in their cells

7️⃣ Aligning the entire grid

justify-content → horizontal alignment of grid inside container
align-content → vertical alignment of grid inside container

.container {
  display: grid;
  justify-content: center;
  align-content: center;
  height: 400px; /* needed for vertical alignment */
}

8️⃣ Small real example

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.item {
  background: lightblue;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

Result:

3 columns, 2 rows
Items evenly spaced
Fully responsive with minor tweaks

9️⃣ Common beginner mistakes

❌ Using floats instead of grid → harder to maintain
❌ Confusing align-items vs align-content
❌ Forgetting to set display: grid on container
❌ Not using fr → fixed widths break responsiveness

Reality check 🧠

If you master CSS Grid:

You can build full-page layouts, dashboards, galleries
Control both rows and columns simultaneously
Combine with flexbox for powerful hybrid layouts

🔥 TOPIC 14: CSS 3D Transforms

CSS 3D transforms let you rotate, move, or scale elements in 3D space.
Think: turning cards, flipping elements, creating depth.

1️⃣ Perspective (the key to 3D)

perspective defines how far the viewer is from the object
Smaller values → more extreme 3D effect
Applied to the parent container

.container {
  perspective: 600px;
}

2️⃣ Transform 3D functions

Function	Description
rotateX(deg)	rotates around horizontal axis
rotateY(deg)	rotates around vertical axis
rotateZ(deg)	rotates around Z-axis (like 2D rotation)
translateZ(px)	moves element forward/back in 3D space
scaleZ(n)	scales element along Z-axis

3️⃣ Example: simple 3D rotation

<div class="container">
  <div class="box">3D Box</div>
</div>

.container {
  perspective: 600px;
}

.box {
  width: 150px;
  height: 150px;
  background: lightcoral;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateY(45deg);
  transition: transform 0.5s;
}

.box:hover {
  transform: rotateY(180deg);
}

Box rotates around Y-axis on hover
Smooth transition with depth

4️⃣ TranslateZ (bring element forward/back)

.box {
  transform: translateZ(50px);
}

Moves box closer to the viewer
Combine with rotateX/rotateY for 3D perspective

5️⃣ Combining transforms

.box {
  transform: rotateX(30deg) rotateY(45deg) translateZ(50px);
}

Apply multiple transforms at once
Order matters! (first rotate, then translate = different result)

6️⃣ Transform-style: preserve-3d

.container {
  perspective: 800px;
  transform-style: preserve-3d;
}

Keeps children in 3D space
Essential for nested 3D elements (like cubes, cards)

7️⃣ Real-world use cases

Flipping cards on hover
Rotating banners
3D menus or sliders
Interactive product showcases

8️⃣ Common beginner mistakes

❌ Forgetting perspective → 3D effect looks flat
❌ Not using transform-style: preserve-3d for nested elements
❌ Using only rotateZ → just 2D rotation
❌ Combining transforms in wrong order → weird effect

9️⃣ Small visual example: flip card

<div class="card-container">
  <div class="card">
    <div class="front">Front</div>
    <div class="back">Back</div>
  </div>
</div>

.card-container {
  perspective: 1000px;
  width: 200px;
  height: 200px;
}

.card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  position: relative;
}

.card:hover {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 20px;
}

.front {
  background: lightblue;
}

.back {
  background: lightcoral;
  transform: rotateY(180deg);
}

Hover flips the card
3D effect makes it look like real rotation

Reality check 🧠

If you master CSS 3D transforms:

You can create interactive, eye-catching effects
Combine with transitions & animations for slick UI
Understand perspective, depth, and order of transforms

This is all what I had learned in CSS... just enough to build UI for any website...

CSS is a endless journey... The more we dive the more we go deep...

And also I had build some projects... just for practise purposes..

“And that’s it — the complete CSS guide I put together while leveling up my skills. From basics to flexbox, grid, animations, and even 3D transforms, this guide covers the essentials and beyond. Use it, experiment with the examples, and tweak things to see how CSS really works. I’m still learning too, so consider this a living guide for anyone who wants to learn CSS the smart way.”

Day 25 / 365 - Full Stack Journey (Html)

Munin 🌝 — Fri, 26 Dec 2025 02:11:28 +0000

Basic HTML Boilerplate

This is the starter template for almost every website.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
</head>
<body>
  <h1>Hello World</h1>
  <p>This is my website.</p>
</body>
</html>

Let’s break this down super simply.

`<!DOCTYPE html>`

This tells the browser:
👉 “This is an HTML website. Handle it properly.”

`<html>`

This is the main container.
Everything on the website lives inside this tag.

`</html>`

This just says:
👉 “That’s the end of the website.”

`<head>`

This is the behind-the-scenes part.
Users don’t see this, but the browser needs it.

`<meta charset="UTF-8">`

This tells the browser how to read characters.
So text doesn’t turn into weird symbols.

`<title>`

This is the name of the page you see on the browser tab.

`</head>`

Ends the hidden setup part.

`<body>`

This is the visible part of the website.
Anything users see goes here.

`<h1>`

This is a big heading.
Used for the main title of the page.

`<p>`

This is normal text.
Used for paragraphs and descriptions.

`</body>`

This means:
👉 “No more visible content after this.”

Some HTML tags I’ve learned 👇

Below are important HTML tags with simple explanations and examples.

1️⃣ `<html>`

Holds the entire website.

<html>
  ...
</html>

Without this, the browser doesn’t know what it’s looking at.

2️⃣ `<head>`

Stores browser-related info (not visible).

<head>
  <title>My Site</title>
</head>

3️⃣ `<title>`

Shows text on the browser tab.

<title>Home Page</title>

4️⃣ `<body>`

Contains everything users can see.

<body>
  <h1>Hello</h1>
</body>

5️⃣ `<h1>`

Main heading of the page.

<h1>Welcome</h1>

Use only one <h1> per page.

6️⃣ `<h2>`

Section heading.

<h2>About Me</h2>

7️⃣ `<p>`

Normal paragraph text.

<p>This is a paragraph.</p>

8️⃣ `<a>`

Creates a clickable link.

<a href="https://google.com">Go to Google</a>

Click → go somewhere else.

9️⃣ `<img>`

Displays an image.

<img src="cat.jpg" alt="A cat">

No closing tag.
alt is important for accessibility.

🔟 `<button>`

Creates a clickable button.

<button>Click me</button>

Used for actions.

1️⃣1️⃣ `<div>`

A container to group elements.

<div>
  <p>Hello</p>
</div>

Does nothing by itself — mainly used for layout.

1️⃣2️⃣ `<span>`

Inline container for small content.

<p>Hello <span>world</span></p>

Useful for styling specific words.

1️⃣3️⃣ `<header>`

Top part of a page or section.

<header>
  <h1>My Website</h1>
</header>

1️⃣4️⃣ `<nav>`

Holds navigation links.

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

Menus belong here.

1️⃣5️⃣ `<main>`

Main content of the page.

<main>
  <p>Main content</p>
</main>

Only one <main> per page.

1️⃣6️⃣ `<section>`

Groups related content.

<section>
  <h2>Services</h2>
</section>

1️⃣7️⃣ `<article>`

Independent, reusable content.

<article>
  <h2>Blog Post</h2>
</article>

Can stand on its own.

1️⃣8️⃣ `<footer>`

Bottom part of a page or section.

<footer>
  <p>© 2025</p>
</footer>

1️⃣9️⃣ `<ul>`

Unordered (bullet) list.

<ul>
  <li>Apple</li>
</ul>

2️⃣0️⃣ `<li>`

List item.

<li>Banana</li>

Always inside <ul> or <ol>.

2️⃣1️⃣ `<form>`

Wraps user input fields.

<form>
  ...
</form>

Used for login, signup, contact forms.

2️⃣2️⃣ `<label>`

Label for an input field.

<label>Name</label>

Helps usability and accessibility.

2️⃣3️⃣ `<input>`

Takes user input.

<input type="text">

Text, password, email, checkbox, etc.

2️⃣4️⃣ `<textarea>`

Multi-line text input.

<textarea></textarea>

Used for messages.

2️⃣5️⃣ `<select>`

Dropdown menu.

<select>
  <option>Red</option>
</select>

2️⃣6️⃣ `<option>`

Item inside a dropdown.

<option>Blue</option>

2️⃣7️⃣ `<table>`

Creates a table.

<table>
  ...
</table>

2️⃣8️⃣ `<tr>`

Table row.

<tr>
  ...
</tr>

2️⃣9️⃣ `<th>`

Table heading cell.

<th>Name</th>

Bold by default.

3️⃣0️⃣ `<td>`

Table data cell.

<td>Munin</td>

This is all what I had learned in Html, some basic tags..
just enough to build the structure of any webpage.

And, also I had build some practise projects in order to get better understanding..

Html is easy to learn, as its is straight forward..
This tag for this purpose...

Day 25 / 365 - Full Stack journey

Munin 🌝 — Fri, 26 Dec 2025 01:45:42 +0000

wait...wait...

you may wonder how, I reach to Day 25, instead of Day 1 or 2....
Because.. I had not posted about the past 25 days... I was learning alone.. not sharing, but now onwards... It's different..

I will be going to Build Network while I am learning..

so, today is Day 26 by the way and I am here to share all of my wins and losses of this past 25 days..

so, During this past 25 Days..
I had learned a lot..

I had learned about html and CSS..
(only that much which is needed)

what is html and CSS ?

In simple term, we can say html is like the skeleton on the web page and CSS is the skin / beauty of the web page....

That's all.. no need for that fancy definition..

In.. another post.. I am going to tell what exactly, I had learned in html and CSS.

365 Days - Full Stack journey !

Munin 🌝 — Fri, 26 Dec 2025 01:26:53 +0000

Hi, everyone...

it's Munin here...

Taking a 365 Days challenge.
goal : learn full stack (Build cool real world ai based project that solves real world problems )

as, I am going to share on weekly, and daily basis..
I am going to share all of my losses, win , etc..

Nothings fancy, just a 18 years old boy who want's to learn to code.... just sharing all of his learning and the experiences in blog....

and, if anyone.. who is in the same boat as me.. and just starting to learn coding.. then why not! let's connect !

let's grow together and build some cool real world projects..

Start of the this challenge : 1 Dec 2025
Deadline : 1 Dec 2026

DEV Community: Munin 🌝

Day 25 / 365 - Full Stack (CSS)

✅ TOPIC 1: Basics of CSS (What it is + how to link it)

What is CSS

How CSS works (simple idea)

Ways to add CSS to HTML

1️⃣ Inline CSS (bad habit 🚫)

2️⃣ Internal CSS (okay for small stuff)

3️⃣ External CSS (BEST way ✅)

Folder structure (important habit)

CSS Selectors (very important)

Element selector

Class selector (MOST USED)

ID selector (use carefully)

CSS Comments

Order matters (basic priority)

Small full example

Reality check 🧠

✅ TOPIC 2: Fonts & Colors (this is where design actually starts)

Fonts in CSS (text styling basics)

1️⃣ font-family

Serif vs Sans-serif (quick clarity)

2️⃣ Using Google Fonts (real-world usage)

Step 1: Add font link in HTML

Step 2: Use it in CSS

3️⃣ font-size

4️⃣ font-weight

5️⃣ font-style

6️⃣ line-height (VERY IMPORTANT)

7️⃣ letter-spacing

8️⃣ text-align

9️⃣ text-decoration

Colors in CSS 🎨

1️⃣ Named colors (basic)

2️⃣ HEX colors (MOST USED)

3️⃣ RGB colors

4️⃣ RGBA (with transparency)

5️⃣ background-color

Small real example

Reality check 🧠

✅ TOPIC 3: CSS Box Model (this clears most confusion)

The Box Model (simple idea)

1️⃣ Content

2️⃣ Padding (space INSIDE the box)

3️⃣ Border (the edge of the box)

4️⃣ Margin (space OUTSIDE the box)

Full example (important)

box-sizing (VERY IMPORTANT)

Fix it like a pro:

Individual sides

Shorthand (clean way)

Common beginner mistakes (real talk)

Small visual example

Reality check 🧠

🔥 TOPIC 4: CSS display property

First: how browsers place elements (important mindset)

The 3 core display types you MUST understand

1️⃣ display: block (default for div, p, h1)

Behavior

Example

What happens

2️⃣ display: inline (default for span, a)

Behavior

Example

Why this matters

3️⃣ display: inline-block (MOST MISUNDERSTOOD)

Behavior

Example

Why this is powerful

Inline vs Inline-block (important difference)

4️⃣ display: none (removes from layout)

Behavior

display: none vs visibility: hidden (DEEP difference)

5️⃣ display: flex (container behavior change)

Common beginner mistakes (real talk)

Mental model (remember this)

Reality check 🧠

🔥 TOPIC 5: CSS position property

First: how elements behave by default

The 5 position values you need to know

1️⃣ `font-family`

3️⃣ `font-size`

4️⃣ `font-weight`

5️⃣ `font-style`

6️⃣ `line-height` (VERY IMPORTANT)

7️⃣ `letter-spacing`

8️⃣ `text-align`

9️⃣ `text-decoration`

5️⃣ `background-color`

`box-sizing` (VERY IMPORTANT)

🔥 TOPIC 4: CSS `display` property

1️⃣ `display: block` (default for div, p, h1)

2️⃣ `display: inline` (default for span, a)

3️⃣ `display: inline-block` (MOST MISUNDERSTOOD)

4️⃣ `display: none` (removes from layout)

`display: none` vs `visibility: hidden` (DEEP difference)

5️⃣ `display: flex` (container behavior change)

🔥 TOPIC 5: CSS `position` property

1️⃣ `position: static` (default)

2️⃣ `position: relative` (MOST MISUNDERSTOOD)

3️⃣ `position: absolute` (true freedom)

4️⃣ `position: fixed` (viewport based)

5️⃣ `position: sticky` (hybrid)

Offsets: `top`, `right`, `bottom`, `left`

`z-index` (stacking order)

2️⃣ Pixels (`px`)

3️⃣ Percentages (`%`)

4️⃣ `em` (relative to parent font size)

5️⃣ `rem` (relative to root font size)

6️⃣ Viewport units (`vw`, `vh`)

What `float` actually does

1️⃣ `float` basics

2️⃣ Why `margin` matters with float

5️⃣ `clear` property (stopping float)

Solution: `clear`