CSS Tutorial
CSS Selectors
Selectors pick elements: by tag, class, id, or attribute. The more specific the match, the more control you have.
What a selector does
A selector is the left-hand side of a rule. It walks the HTML and collects matching elements. Everything inside the braces then applies to that set. Change the selector and you restyle a different slice of the page without touching the markup’s meaning.
Start with four kinds: an element name, a class, an id, and a short grouping list. Attribute selectors come in when a tag already has a useful attribute and you do not want a new class.
| Selector | Matches | Write it |
|---|---|---|
| Element | Every tag of that type | h1 |
| Class | Any tag with that class | .open |
| Id | The one tag with that id | #hero |
| Group | Each selector in the list | h1, h2 |
| Attribute | Tags that have the attribute | [href] |
Element selectors
An element selector is the tag name with no extra marks: h1, p,ul. It matches every element of that type on the page. Use it for a baseline — the look every heading or paragraph should share.
Example
<style>
h1 {
color: teal;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<p>Open 8–16.</p>
<p>Espresso at the quay window.</p>Both paragraphs turn slate because p matches them all. When one paragraph needs a different color, a class is the next tool — not a second copy of the tag name.
Class selectors
A class selector starts with a dot. It matches any element whose class attribute includes that name. Many elements can share a class. One element can have several classes, separated by spaces.
Example
<style>
#hero {
color: teal;
}
p {
color: #475569;
}
.hours {
color: #0284c7;
font-weight: 700;
}
</style>
<h1 id="hero">Harbor studio</h1>
<p class="hours">Open 8–16.</p>
<p>Walk-ins welcome after the tide gate.</p>Click Try it in CSS under an example to open /css/try. Change.hours to .note and add class="note" on a paragraph. The stylesheet pane is the place to edit the rule.
Id selectors
An id selector starts with #. It matches the single element whose id equals that name. Ids must be unique on a page. Use them for a landmark you will style once — a hero, a footer, a skip target — not for every card in a list. The heading in the class example is #hero.
Prefer a class when two elements might need the same look. An id is heavier in the cascade and awkward to reuse. Save # for a unique hook.
Grouping selectors
A comma joins selectors into one rule. h1, h2 styles both heading levels with the same declarations. Group when the look is truly shared. Split the rule when one heading needs a different size or color.
Example
<style>
h1, h2 {
color: teal;
font-family: Georgia, serif;
}
p {
color: #475569;
}
</style>
<h1>Harbor studio</h1>
<h2>Morning list</h2>
<p>Open 8–16.</p>
<ul>
<li>Espresso</li>
<li>Harbor toast</li>
</ul>Attribute selectors, briefly
Square brackets match an attribute. [href] matches any element with an href. You can also test a value: a[href] or [type="button"]. Use these when the HTML already carries the fact you care about and you do not want a new class.
Example
<style>
h1 {
color: teal;
}
p {
color: #475569;
}
a[href] {
color: #0284c7;
font-weight: 700;
}
</style>
<h1>Harbor studio</h1>
<p>Open 8–16.</p>
<p><a href="/css/how-to">Studio hours board</a></p>Combinators, pseudo-classes, and specificity get their own chapters. For now: tag for a baseline, class for a variant, id for one landmark, grouping to share a look, attributes when the tag is already labelled.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Biology
Tag, class, and id on a chart
An element selector paints every matching tag. A class (.ok) is a group you opt into. An id (#patient-17) is one node. Specificity rises in that order.
Use classes for anything that might appear twice. Save id for jump links and unique records.
Example
<style>
p { color: #44403c; }
.ok { color: #166534; font-weight: 700; }
#patient-17 { background: #fef3c7; padding: 0.5rem; }
</style>
<p>Waiting room</p>
<p class="ok">Pulse 72 bpm — resting</p>
<p id="patient-17">Patient 17</p>Engineering
Attribute selector on internal links
a[href^="/css"] matches links whose href starts with /css. That is how a nav can style “our docs” differently from the open web without extra classes.
Example
<style>
a[href^="/css"] { color: #0f766e; }
</style>
<p><a href="/css/syntax">Syntax lesson</a></p>