CSS Basics - vdsology
- CSS Basics
- Chapter 2 — Understanding div
CSS Basics
What is CSS?
CSS = Cascading Style Sheets. It’s how you make HTML look good — colors, fonts, spacing, layout, animations.
How to Connect CSS to HTML
Method 1 — Inline (avoid this):
<p style="color: red;">Red text</p>
Method 2 — Internal (good for learning):
<head>
<style>
p { color: red; }
</style>
</head>
Method 3 — External file (best practice):
<head>
<link rel="stylesheet" href="styles.css">
</head>
CSS Syntax
selector {
property: value;
property: value;
}
h1 {
color: blue;
font-size: 40px;
}
Selectors
p { color: gray; } /* tag selector */
.highlight { color: yellow; } /* class selector */
#main-title { font-size: 50px; } /* ID selector */
Common CSS Properties
color: red;
background-color: #f0f0f0;
font-size: 18px;
font-weight: bold;
font-family: Arial, sans-serif;
text-align: center;
width: 300px;
height: 200px;
The Box Model
┌─────────────────────────────────┐
│ MARGIN │
│ ┌───────────────────────────┐ │
│ │ BORDER │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ PADDING │ │ │
│ │ │ ┌───────────────┐ │ │ │
│ │ │ │ CONTENT │ │ │ │
│ │ │ └───────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └───────────────────────────┘ │
└─────────────────────────────────┘
div {
padding: 20px;
margin: 30px;
border: 2px solid black;
}
Always set this globally:
* {
box-sizing: border-box;
}
Chapter 2 — Understanding div
Why Does <div> Exist?
HTML tags like <p>, <h1>, <a> all have built-in meaning. But sometimes you just need to wrap a group of things together so you can move them, style them, or give them a shared background, border, or spacing.
<div> is that wrapper. It means nothing on its own — it’s just a box.
The Core Problem It Solves
Imagine you want a card — a white box with a shadow containing a title and some text. There’s no <card> tag. So you do this:
<div class="card">
<h2>My Title</h2>
<p>Some description text here.</p>
</div>
.card {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 8px gray;
}
Without the <div>, you’d have to style <h2> and <p> separately — and they wouldn’t share a background box.
A Real Visual Example
Without div — no way to put a box around all 3:
<img src="john.jpg" alt="John">
<h2>John Doe</h2>
<p>john@email.com</p>
With div — now it’s one grouped unit:
<div class="profile-card">
<img src="john.jpg" alt="John">
<h2>John Doe</h2>
<p>john@email.com</p>
</div>
.profile-card {
background: white;
padding: 24px;
border-radius: 12px;
border: 1px solid #ddd;
width: 300px;
}
How HTML + CSS Connect Through Classes
<!-- HTML: create the element and give it a name -->
<div class="box">Hello</div>
/* CSS: target that name with a dot */
.box {
color: red;
}
You can give the same class to multiple elements:
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
.card {
background: white;
padding: 20px;
}
All 3 get the same style. One CSS rule, many elements. Like a function you call multiple times.
Why Code Gets Messy — “Div Soup”
<!-- ❌ BAD — meaningless nesting -->
<div>
<div>
<div>
<div class="d1">
<div class="d2">
<p>Hello</p>
</div>
</div>
</div>
</div>
</div>
This is called div soup. It’s hard to read, hard to maintain, and bad for accessibility.
Good Practices
1. Use semantic tags first
<!-- ❌ Bad -->
<div class="header"> ... </div>
<div class="nav"> ... </div>
<!-- ✅ Good -->
<header> ... </header>
<nav> ... </nav>
2. Every div should have ONE clear job
<!-- ✅ Each div has a clear purpose -->
<div class="card">
<div class="card-image">
<img src="photo.jpg" alt="photo">
</div>
<div class="card-body">
<h2>Title</h2>
<p>Description</p>
</div>
</div>
3. Name classes by WHAT it is, not how it looks
<!-- ❌ Bad -->
<div class="red-box big-text">
<!-- ✅ Good -->
<div class="error-message">
4. Don’t nest more than 3–4 levels deep
<!-- ❌ Too deep -->
<div class="wrapper">
<div class="inner">
<div class="content">
<div class="text-area">
<p>Hello</p>
<!-- ✅ Flat and clear -->
<div class="content">
<p>Hello</p>
</div>
5. The mental checklist before adding a div
1. Is there a semantic tag for this? → Yes? Use that instead.
2. Do I need to group these elements to style or move them? → Yes? Use a div with a clear class name.
3. Am I adding this div "just in case"? → Stop. Don't add it.
A Clean Real-World Example
<article class="post-card">
<img class="post-card__image" src="thumbnail.jpg" alt="Post thumbnail">
<div class="post-card__body">
<span class="post-card__tag">Technology</span>
<h2 class="post-card__title">How AI is Changing Code</h2>
<p class="post-card__excerpt">A look at how developers work in 2026...</p>
<a class="post-card__link" href="/post/1">Read more →</a>
</div>
</article>
Notice:
- The outer wrapper is
<article>(semantic — not a div!) - Only one div is used — to group the text body separately from the image
- Every class name tells you exactly what it is
- Nothing is nested more than 2 levels deep
Tags: #CSS #vdsology #webdevelopment #vdsologyCSS #CSS3 #CSSreference #CSSreference2026
Write a comment