🎨 CSS Complete Tutorial
Big simple explanations · Clear syntax · Visual examples · Tables
CHAPTER 1
CSS Introduction
🎯 Big Simple Explanation: CSS (Cascading Style Sheets) is the language that makes websites beautiful. HTML is the structure (bones), CSS is the style (skin & clothes).
Without CSS, every website would look like a plain white page with black text. CSS adds colors, layouts, fonts, animations, and everything visual!
What CSS can do:
- Change colors of text, backgrounds, borders
- Control font sizes, families, and styles
- Arrange elements on the page (layout)
- Add spacing (margins and padding)
- Create responsive designs that work on all devices
- Add animations and transitions
💡 CSS stands for “Cascading Style Sheets” — “Cascading” means styles can inherit and override each other in a specific order.
CHAPTER 2
CSS Syntax
📝 Big Simple Explanation: CSS syntax is simple: you pick an element (selector), then inside curly braces {}, you write property: value; pairs.
📌 Basic Syntax:
selector { property: value; property: value; }Example
h1 {
color: blue;
font-size: 32px;
text-align: center;
}
p {
color: #333;
line-height: 1.5;
margin-bottom: 10px;
}🎨 This CSS would make all h1 headings blue, centered, and 32px tall.
CHAPTER 3
CSS Selectors
🎯 Big Simple Explanation: Selectors are how you “target” specific HTML elements to style them.
| Selector | Example | What it selects |
|---|---|---|
| Element selector | p { } | All <p> elements |
| ID selector (#) | #header { } | Element with id=”header” |
| Class selector (.) | .box { } | All elements with class=”box” |
| Universal (*) | * { } | Every single element |
| Group selector | h1, h2, p { } | Multiple elements at once |
Selector Examples
/* Element selector */
p {
color: gray;
}
/* ID selector (unique) */
#main-title {
font-size: 48px;
}
/* Class selector (reusable) */
.highlight {
background-color: yellow;
font-weight: bold;
}
/* Universal selector */
* {
margin: 0;
padding: 0;
}
/* Group selector */
h1, h2, h3 {
font-family: 'Arial', sans-serif;
}
/* Descendant selector */
div p {
color: blue; /* p inside div */
}CHAPTER 4
CSS How To (3 Ways)
📄 Big Simple Explanation: There are 3 ways to add CSS to HTML: inline (inside an element), internal (inside <style> tag), and external (separate .css file).
| Method | Best For | Example |
|---|---|---|
| Inline | Quick testing | <div style="color:red"> |
| Internal | Single page | <style> p {color:red} </style> |
| External | Multiple pages (BEST) | <link rel="stylesheet" href="style.css"> |
External CSS (style.css)
body {
background-color: #f0f0f0;
font-family: 'Inter', sans-serif;
}
.button {
background-color: blue;
color: white;
padding: 10px 20px;
}✅ Best Practice: Use external CSS files. They keep your HTML clean and styles can be reused across many pages!
CHAPTER 6
CSS Colors
🎨 Big Simple Explanation: Colors in CSS can be specified in many ways: names, HEX codes, RGB, RGBA, HSL, and HSLA.
| Format | Example | Description |
|---|---|---|
| Color Name | red, blue, green | 140 predefined colors |
| HEX | #FF5733 | #RRGGBB (0-FF each) |
| RGB | rgb(255, 87, 51) | 0-255 per channel |
| RGBA | rgba(255,87,51,0.5) | With opacity (0-1) |
| HSL | hsl(9, 100%, 60%) | Hue, Saturation, Lightness |
← Different color formats in action
Color Examples
/* Color names */
.title { color: darkblue; }
/* Hexadecimal */
.box { background-color: #FF5733; }
/* RGB */
.text { color: rgb(100, 150, 200); }
/* RGBA (with transparency) */
.overlay { background-color: rgba(0, 0, 0, 0.5); }
/* HSL */
.button { background-color: hsl(200, 80%, 50%); }CHAPTER 7
CSS Backgrounds
Background Properties
body {
background-color: #f0f0f0; /* solid color */
background-image: url('bg.jpg'); /* image */
background-repeat: no-repeat; /* don't repeat */
background-position: center; /* position */
background-size: cover; /* fit */
/* Shorthand */
background: #333 url('bg.jpg') no-repeat center/cover;
}
.card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* Gradient background! */
}CHAPTER 8
Borders
div { border: 2px solid black; /* width, style, color */ border: 3px dotted red; border: 5px dashed blue; border-radius: 10px; /* rounded corners */ border-top: 1px solid #ccc; /* specific side */ }CHAPTER 9
Margins (Outside Space)
📏 Margin creates space OUTSIDE the element — between elements.
.box { margin: 20px; /* all sides */ margin: 10px 20px; /* top/bottom 10, left/right 20 */ margin: 10px 20px 30px; /* top 10, left/right 20, bottom 30 */ margin: 10px 20px 30px 40px; /* top, right, bottom, left */ margin-top: 15px; margin-left: auto; /* centers horizontal */ }CHAPTER 10
Padding (Inside Space)
📦 Padding creates space INSIDE the element — between content and border.
.card { padding: 20px; /* same syntax as margin */ padding: 15px 25px; padding-top: 10px; }CHAPTER 11
The Box Model
📦 Big Simple Explanation: Every element in CSS is a rectangle. The Box Model explains how width/height is calculated: content + padding + border + margin.
┌─────────────────────────────────────┐ │ MARGIN (transparent) │ │ ┌───────────────────────────────┐ │ │ │ BORDER (color/style) │ │ │ │ ┌─────────────────────────┐ │ │ │ │ │ PADDING (inside) │ │ │ │ │ │ ┌───────────────────┐ │ │ │ │ │ │ │ CONTENT │ │ │ │ │ │ │ └───────────────────┘ │ │ │ │ │ └─────────────────────────┘ │ │ │ └───────────────────────────────┘ │ └─────────────────────────────────────┘
.box { width: 300px; padding: 20px; border: 5px solid black; margin: 10px; /* Total width = 300 + 40 + 10 + 20 = 370px */ box-sizing: border-box; /* Easier! width includes padding+border */ }CHAPTER 12
Outline
input:focus { outline: 2px solid blue; /* Like border but doesn't affect layout */ } button { outline: none; /* Remove default focus outline (use with caution!) */ }CHAPTER 13
Text Styling
| Property | Values | Example |
|---|---|---|
text-align | left, center, right, justify | text-align: center; |
text-decoration | none, underline, overline, line-through | text-decoration: underline; |
text-transform | uppercase, lowercase, capitalize | text-transform: uppercase; |
line-height | 1.5, 24px, 150% | line-height: 1.6; |
letter-spacing | 2px, -1px | letter-spacing: 2px; |
text-shadow | x-offset y-offset blur color | text-shadow: 2px 2px 4px gray; |
CHAPTER 14
Fonts
body { font-family: 'Inter', 'Arial', sans-serif; font-size: 16px; font-weight: 600; /* 100-900 or normal/bold */ font-style: italic; } /* Custom font using Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700'); h1 { font-family: 'Roboto', sans-serif; font-weight: 700; }CHAPTER 15
Icons (Font Awesome)
<!-- Include Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <i class="fas fa-home"></i> <i class="fab fa-github"></i> <i class="fas fa-heart" style="color: red;"></i>
CHAPTER 16
Links
a { color: blue; text-decoration: none; } a:hover { color: red; text-decoration: underline; } a:visited { color: purple; } a:active { color: green; }CHAPTER 17
Lists
ul { list-style-type: square; } ol { list-style-type: upper-roman; } li { margin: 5px 0; }CHAPTER 18
Tables
table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #ddd; padding: 8px; } th { background-color: #f2f2f2; } tr:hover { background-color: #f5f5f5; }CHAPTER 19
Position Property
| Value | Description |
|---|---|
static | Default — normal document flow |
relative | Position relative to its normal spot |
absolute | Position relative to nearest positioned ancestor |
fixed | Position relative to viewport (stays on scroll) |
sticky | Sticks when scrolling past a point |
.relative-box { position: relative; top: 10px; left: 20px; } .absolute-box { position: absolute; top: 0; right: 0; } .fixed-header { position: fixed; top: 0; width: 100%; } .sticky-nav { position: sticky; top: 0; }CHAPTER 20
Z-index (Stacking Order)
📚 Big Simple Explanation: Z-index controls which element appears ON TOP when they overlap. Higher number = higher in the stack.
.layer1 { position: absolute; z-index: 1; } .layer2 { position: absolute; z-index: 10; } /* appears on top */CHAPTER 21
Overflow
.container { width: 300px; height: 200px; overflow: auto; /* scroll if needed */ overflow: scroll; /* always show scrollbar */ overflow: hidden; /* clip content */ overflow-x: hidden; /* hide horizontal scroll */ }CHAPTER 22
Float & Clear
.image { float: left; margin-right: 15px; } .clearfix::after { content: ""; clear: both; display: table; }CHAPTER 23
CSS Combinators
| Combinator | Symbol | Example | Selects |
|---|---|---|---|
| Descendant | space | div p | p inside div (any level) |
| Child | > | div > p | p that is direct child of div |
| Adjacent sibling | + | h1 + p | p immediately after h1 |
| General sibling | ~ | h1 ~ p | All p siblings after h1 |
SUMMARY
🎯 Complete CSS Reference
✅ You’ve learned: Selectors, Box Model, Colors, Backgrounds, Text, Fonts, Positioning, Float, and more! Practice by building your own layouts.
CSS Comments
💬 Big Simple Explanation: Comments are notes that CSS ignores. They help you document your code.
/* This is a CSS comment */ /* Comments can also span multiple lines */ /* Use comments to organize sections */ /* ===== HEADER STYLES ===== */ .header { background: #333; } /* ===== BUTTON STYLES ===== */ .btn { padding: 10px; /* inline comment */ }