🎯 Lesson 2: Selectors & Properties
⏱️ Estimated time: 20 minutes | Difficulty: Beginner
Target Practice
Selectors are patterns used to select the elements you want to style. Properties define what you want to change (like color, size, or font).
CSS Selectors
/* Element selector */
p { color: white; }
/* Class selector (.) */
.highlight { background: yellow; }
/* ID selector (#) */
#header { font-size: 2rem; }
/* Descendant selector */
nav a { color: cyan; }
/* Multiple selectors */
h1, h2, h3 { font-family: 'Arial'; }
/* Universal selector */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Attribute selector */
input[type="text"] { border: 1px solid #ccc; }
/* Pseudo-classes */
a:hover { color: #ff2d95; }
li:first-child { font-weight: bold; }
li:nth-child(2n) { background: rgba(255,255,255,0.05); }
/* Pseudo-elements */
p::first-line { font-weight: bold; }
h1::before { content: "🎨 "; }Specificity (Priority Order)
| Selector | Specificity | Priority |
|---|---|---|
| Inline styles | 1000 | Highest |
| #id | 100 | High |
| .class, :pseudo | 10 | Medium |
| element | 1 | Low |
Colors in CSS
color: red; /* Named */
color: #ff2d95; /* Hex */
color: rgb(255, 45, 149); /* RGB */
color: rgba(255, 45, 149, 0.5); /* RGBA (with transparency) */
color: hsl(330, 100%, 59%); /* HSL */Units
font-size: 16px; /* Pixels (fixed) */
font-size: 1rem; /* Relative to root (recommended!) */
font-size: 1.2em; /* Relative to parent */
width: 50%; /* Percentage of parent */
width: 100vw; /* Viewport width */
height: 100vh; /* Viewport height */✅ Quick Quiz
❓ Which selector has the highest specificity?
❓ What does a:hover select?
❓ What unit is relative to the root font size?