Chapter 3
CSS Styling - Making It Beautiful
Learning Objectives
- Understand what CSS is and how it works with HTML
- Learn CSS selectors and properties
- Master the box model and layout
- See how MixMind creates its visual design
What is CSS?
CSS stands for Cascading Style Sheets. It's the language that controls how HTML elements look—colors, fonts, spacing, layout, animations, and more.
💡 Remember the Building Analogy:
If HTML is the structure (walls, floors), CSS is the interior design (paint, furniture, lighting).
CSS Syntax
selector {
property: value;
property: value;
}
/* Example */
h1 {
color: blue;
font-size: 24px;
font-weight: bold;
}CSS Selectors
| Selector | What It Selects | Example |
|---|---|---|
* | All elements | * { margin: 0; } |
element | All of that type | p { color: gray; } |
.class | Elements with that class | .highlight { background: yellow; } |
#id | Element with that ID | #header { height: 60px; } |
:hover | When mouse is over | button:hover { background: blue; } |
The Box Model
Every HTML element is a box with four layers:
┌─────────────────────────────┐
│ MARGIN │ ← Space outside
│ ┌───────────────────────┐ │
│ │ BORDER │ │ ← The edge
│ │ ┌─────────────────┐ │ │
│ │ │ PADDING │ │ │ ← Space inside
│ │ │ ┌───────────┐ │ │ │
│ │ │ │ CONTENT │ │ │ │ ← Actual content
│ │ │ └───────────┘ │ │ │
│ │ └─────────────────┘ │ │
│ └───────────────────────┘ │
└─────────────────────────────┘Flexbox Layout
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}How MixMind Uses CSS
CSS Variables
:root {
--bg-primary: #0a0a0f;
--accent: #00d4ff;
--text-primary: #e0e0e0;
}
body {
background: var(--bg-primary);
color: var(--text-primary);
}Dark Theme
.card {
background: #12121a;
border: 1px solid #2a2a3a;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}Exercise 3.1: Style Your HTML
Add CSS to your HTML page from Chapter 2:
<style>
body {
font-family: Arial, sans-serif;
background: #0a0a0f;
color: #e0e0e0;
padding: 40px;
}
h1 { color: #00d4ff; }
</style>
📝 Quick Reference:
- CSS: Styles HTML elements
- Selector: Targets which elements to style
- Box Model: content, padding, border, margin
- Flexbox: Modern layout system
- CSS Variables: Reusable values