Python CSS Selectors (Element, Class & ID)
Selectors are how CSS finds the HTML elements you want to style. You can target all elements of a tag (e.g., p), specific groups using classes (.btn), or unique single items using IDs (#navbar).
"Element selectors are like saying "All humans in this room". A class selector is like saying "Everyone wearing a blue hat (.blue-hat)". An ID selector is calling someone by their national passport number (#passport-123)."
Deep Dive: How It Works
Element Selector (p, h1, button): Styles EVERY instance of that tag on the entire page.
Class Selector (.highlight, .card): Starts with a dot. Reusable across as many elements as you want! This is what 95% of modern CSS uses.
ID Selector (#main-header): Starts with a hash (#). Must be unique to exactly one element on the page.
Grouping Selectors: You can apply the same styles to multiple selectors with commas: h1, h2, h3 { font-family: sans-serif; }.
Syntax Blueprint
/* Element */ p { color: white; }
/* Class */ .badge { background: #0284c7; }
/* ID */ #logo { width: 120px; }No prefix for tag names, dot (.) for classes, hash (#) for IDs.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Putting a dot inside the HTML class attributeWhy it happens: Writing <div class=".btn"> in HTML.
How to fix: In HTML write class="btn", only put the dot in your CSS file: .btn { ... }.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Write a class selector
- Write a CSS rule targeting the class .card that sets background-color: #2b2d31;
Finished reading and practicing?
Mark this lesson as completed to update your course progress.