🎯 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).
Table of Contents
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: "🎨 "; }Output...
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?