Selectors
CSS needs a way to know what it should style before it can style anything. That targeting mechanism is called a selector. You write a selector before the curly braces, and the browser applies whatever is inside those braces to every matching element on the page.
There are three fundamental selectors every designer should know. Each one maps to a concept you already use in Figma.
Element selector
Section titled “Element selector”p { color: gray; }An element selector uses the tag name with no prefix. It matches every element of that type on the page. Writing h2 { } is like going into Figma and changing the style for every text layer that uses the same text style — one rule, instant global effect.
Use element selectors for baseline defaults: body font, heading sizes, link colors.
Class selector
Section titled “Class selector”.card { background: white; border-radius: 12px; }A class selector starts with a dot (.). It matches any element that has a matching class attribute in the HTML. One class can be applied to as many elements as you like — a <div class="card">, a <section class="card">, a <article class="card"> — they all get the same styles.
This is the closest CSS equivalent to a Figma component or shared style: define the appearance once, stamp it everywhere. You can also stack classes on one element:
<div class="card featured">…</div>That element will inherit styles from both .card and .featured, letting you layer variations — just like component variants.
ID selector
Section titled “ID selector”#hero { background: #7C3AED; color: white; }An ID selector starts with #. It matches the one element whose id attribute matches. IDs must be unique on a page — only one element should ever carry a given id. Think of it as a named, one-of-a-kind layer in your Figma canvas. Use IDs when something is genuinely unique: the main hero section, the site navigation, the footer.
Designer analogy at a glance
Section titled “Designer analogy at a glance”| CSS selector | Figma equivalent |
|---|---|
p { } | Style all text layers of the same type |
.card { } | A component / shared style applied to multiple instances |
#hero { } | A uniquely named frame — there is only one |
Try adding a second element with id="hero" and notice that CSS still styles it — but IDs should be unique as a convention. Then add a new class like secondary to one card and write a .secondary { } rule to give it a different border color.