CSS Class
Definition
A class is a name you invent. You attach it with class="card" in the HTML and target it with .card { } in the CSS. Unlike an id, the same class can appear on any number of elements, and one element can carry several classes separated by spaces: class="card featured wide" puts three labels on a single box. Each of those is matched independently, so all three rules apply and their declarations are merged. Class names are case-sensitive, must not start with a digit, and by convention use hyphens rather than spaces or underscores. They mean nothing to the browser — a class is a hook for styling and for scripts, not a statement about what the element is.
Why It Matters
Classes are what make a change cheap. Twelve product cards sharing one class mean one rule to edit; the same twelve styled individually mean twelve edits and an eventual inconsistency. They also keep specificity flat: a page styled almost entirely through single classes is one where any rule can be overridden by another single class later in the file, which is far easier to work with than a stylesheet stacked with ids. The cost of getting it wrong is subtle — nothing breaks, the stylesheet simply grows until nobody is sure which of the four rules touching a heading is the one taking effect.
How It Works
The browser reads the class attribute, splits it on whitespace and stores the result as a list on the element. A selector beginning with a dot matches any element whose list contains that name, wherever it sits in the document. Order inside the attribute has no effect at all: class="featured card" and class="card featured" behave identically, because what decides the winner is the order of the rules in the stylesheet, not the order of the names in the HTML. Scripts work on the same list through classList, with add, remove and toggle, which is how a menu opens or a theme switches without touching inline styles. Utility frameworks such as Tailwind via CDN push this to its limit, with long strings of single-purpose classes in place of a handwritten stylesheet.
Real-World Example
A restaurant publishes a menu at harbour-kitchen.99helpers.site where two of nine dishes are missing the highlighted border. Every dish is marked class="dish", but those two read class="dish featured " with a trailing space and, in one case, class="dish, featured" with a comma — so the browser stores featured, as a name nothing matches. Cleaning the attribute values fixes both without a line of CSS being touched.
Common Mistakes
- ✕Separating class names with commas instead of spaces — class="card, wide" creates a class literally called card, and neither rule applies as intended
- ✕Reusing an id where a class is meant — an id must be unique per page, and duplicating it breaks scripts that look it up as well as being invalid
- ✕Expecting the order of names in the class attribute to decide which rule wins — it does not; the later rule in the stylesheet wins, regardless of how the attribute is written
Related Terms
CSS Selector
A CSS selector is the part of a rule before the braces that says which elements the rule applies to. It can match by tag name, class, id, attribute, position in the document or state, and selectors can be combined to be as narrow as you need.
CSS Specificity
Specificity is how the browser decides which rule wins when two of them set the same property on the same element. Each selector scores a weight, the higher weight wins, and only an exact tie is settled by which rule comes later in the stylesheet.
HTML Attribute
An HTML attribute is a name and value written inside a start tag that configures the element — where an image lives, which stylesheet rule applies, what a link points at. Attributes change behaviour and appearance without changing what the element is.
Stylesheet
A stylesheet is the set of CSS rules that tells the browser how a page should look. It is usually a separate .css file linked from the head, though it can also sit in a style element inside the HTML itself.
Tailwind via CDN
Loading Tailwind CSS from a script or stylesheet hosted on a public CDN instead of compiling it locally. It gives a single HTML file working utility classes with no build tooling at all.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →