Lesson 4 • Beginner
CSS Basics & Selectors
Learn how CSS works, master selectors, and understand the cascade.
What You'll Learn
- ✓ What CSS is and how it works
- ✓ Where CSS lives (inline, internal, external)
- ✓ Element, class, and ID selectors
- ✓ Combining selectors for precision
- ✓ Cascade and specificity rules
- ✓ Essential CSS properties (color, spacing, layout)
What Is CSS and Why It Matters
CSS stands for Cascading Style Sheets.
CSS is the difference between a website people trust and a website people instantly leave. HTML alone creates content. CSS controls perception.
Humans judge a website in under 1 second. That judgment is driven almost entirely by CSS.
- Bad CSS = low trust
- Good CSS = credibility, conversions, money
How CSS Actually Works
CSS works by applying rules to HTML elements.
Each rule has:
- A selector (what to target)
- A block of styles (what to apply)
CSS Syntax Basics
See how CSS rules work with selectors and properties
<!DOCTYPE html>
<html>
<head>
<title>CSS Syntax</title>
<style>
/* CSS Rule Structure:
selector {
property: value;
}
*/
body {
background-color: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
}
/* Element selector - targets all <p> tags */
p {
color: #e5e7eb;
font-size: 16px;
line-height: 1.6;
}
/* This targets the h1 element */
h1 {
color: #3b82f6;
font-size
...Where CSS Lives (External Files)
Real websites use external CSS files. Always.
Why this matters:
- Clean separation of structure and style
- Easier maintenance
- Faster loading (cached by browser)
- Industry standard
Remember:
Inline CSS is amateur. Internal CSS is temporary. External CSS is professional.
CSS Location Methods
Compare inline, internal, and external CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS Methods</title>
<!-- INTERNAL CSS (in style tag) -->
<style>
body {
background-color: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
color: #e5e7eb;
}
.internal-style {
color: #22c55e;
font-weight: bold;
padding: 10px;
background: #1e293b;
border-radius: 8px;
margin: 10px 0;
}
.best-practice {
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
...1. Element Selectors (The Basics)
Targets every element of a given type.
Use cases: Global text styling, headings, defaults
⚠️ Overusing element selectors causes problems later. They are broad, not precise.
Element Selectors
Style all elements of a specific type
<!DOCTYPE html>
<html>
<head>
<title>Element Selectors</title>
<style>
/* Element selectors target ALL elements of that type */
body {
background-color: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
}
h1 {
color: #3b82f6;
font-size: 2.5rem;
border-bottom: 3px solid #3b82f6;
padding-bottom: 10px;
}
h2 {
color: #22c55e;
font-size: 1.5rem;
}
p {
color: #e5e7eb;
lin
...2. Class Selectors (The Most Important)
Classes are reusable. They are the backbone of real CSS.
Why classes are critical:
- Can be reused hundreds of times
- Easy to reason about
- Flexible and safe
Key insight:
90% of your CSS should target classes. If you don't use classes properly, your CSS will collapse.
Class Selectors
Create reusable styles with classes
<!DOCTYPE html>
<html>
<head>
<title>Class Selectors</title>
<style>
body {
background-color: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
color: #e5e7eb;
}
/* Class selector - starts with a dot */
.card {
background-color: #1e293b;
padding: 20px;
border-radius: 12px;
margin: 15px 0;
border: 1px solid #334155;
}
.highlight {
color: #22c55e;
font-weight: 600;
}
.text
...📋 CSS Selector Quick Reference
| Selector | Syntax | Specificity | Use Case |
|---|---|---|---|
| Element | p {} | Low (0,0,1) | Global defaults |
| Class | .card {} | Medium (0,1,0) | Reusable components |
| ID | #header {} | High (1,0,0) | Unique sections |
| Inline | style="" | Highest | Avoid if possible! |
💡 Pro tip: Use classes for 90% of your CSS. They're reusable and easy to maintain.
3. ID Selectors (Use Carefully)
IDs are unique. There should only be one per page.
Rules:
- One ID per element
- One element per ID
- Never reuse IDs
⚠️ IDs are strong but dangerous if abused. Most modern CSS avoids them except for layout anchors.
ID Selectors
Unique identifiers for single elements
<!DOCTYPE html>
<html>
<head>
<title>ID Selectors</title>
<style>
body {
background-color: #0f172a;
font-family: system-ui, sans-serif;
margin: 0;
color: #e5e7eb;
}
/* ID selector - starts with a hash # */
#header {
background: linear-gradient(135deg, #1e293b, #334155);
padding: 30px;
text-align: center;
border-bottom: 3px solid #3b82f6;
}
#main-content {
max-width: 800px;
margin: 0 auto;
padd
...Combining Selectors (Precision Control)
You can target elements inside other elements.
Important:
Scope your styles or you will regret it later.
Combining Selectors
Target specific elements with precision
<!DOCTYPE html>
<html>
<head>
<title>Combining Selectors</title>
<style>
body {
background-color: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
color: #e5e7eb;
}
/* Descendant selector: space between selectors */
.card p {
color: #94a3b8;
font-size: 14px;
}
/* Only links inside nav */
.nav a {
color: #3b82f6;
text-decoration: none;
margin-right: 20px;
}
.nav a:hover {
...CSS Properties You MUST Know
Color & Text: Fonts and spacing affect readability and trust.
Spacing (Box Model): Every element is a box with padding, margin, and border.
💡 If your layout feels "off", it's usually padding or margin.
Essential CSS Properties
Colors, fonts, spacing, and layout basics
<!DOCTYPE html>
<html>
<head>
<title>Essential CSS Properties</title>
<style>
body {
background-color: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
color: #e5e7eb;
}
/* Text properties */
.text-demo {
color: #3b82f6;
font-size: 18px;
font-weight: 600;
line-height: 1.6;
text-align: center;
letter-spacing: 0.5px;
}
/* Background properties */
.bg-demo {
background-color: #1e29
...Understanding Cascade & Specificity
CSS stands for Cascading Style Sheets. This means:
- Later rules override earlier ones
- More specific selectors win
- Inline styles override everything
Key insight:
Understanding cascade prevents "Why isn't my CSS working?" moments.
CSS Cascade & Specificity
See which styles win when there are conflicts
<!DOCTYPE html>
<html>
<head>
<title>Cascade & Specificity</title>
<style>
body {
background-color: #0f172a;
font-family: system-ui, sans-serif;
padding: 20px;
color: #e5e7eb;
}
.demo-box {
background: #1e293b;
padding: 15px;
margin: 15px 0;
border-radius: 8px;
border-left: 4px solid;
}
/* SPECIFICITY ORDER (low to high):
1. Element selectors (p, h1, div)
2. Class selectors (.card, .btn)
...Common Beginner CSS Mistakes
- ❌ Styling everything with element selectors
- ❌ No class naming strategy
- ❌ Random colors with no consistency
- ❌ No spacing consistency
- ❌ Inline styles everywhere
- ❌ Copy-pasting without understanding
Reality check:
CSS is simple. Bad CSS habits are what make it hard.
Practice Challenge
Build a page with:
- A card component with proper classes
- A centered layout using max-width and margin
- A dark theme with consistent colors
- Clean typography with proper spacing
CSS Basics Practice
Build a complete styled page with cards and layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Practice</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: linear-gradient(180deg, #0f172a, #1e293b);
color: #e5e7eb;
font-family: system-ui, sans-serif;
min-height: 100vh;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
}
.header {
text-align: center;
...Key Takeaways
- ✓CSS controls perception and user trust
- ✓Selectors decide which elements get styled
- ✓Classes are king - use them for 90% of your CSS
- ✓Specificity determines which styles win conflicts
- ✓External CSS files are the professional standard
Sign up for free to track which lessons you've completed and get learning reminders.