Anatomy of a CSS file
CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
File extensions: .css
Every part of the example below is labelled and explained. This page is one of 55 annotated tours on AnatomyOf, a free, open-source project by LunarWerx Studios.
What is inside a CSS file
Comment
Written as /* ... */; ignored by the browser.
CSS has only one comment syntax, /* ... */, and it can span multiple lines since there is no single-line // form. Comments are stripped before the browser builds the CSSOM, so they carry zero runtime cost. They are commonly used to label sections of a large stylesheet, leave TODOs, or temporarily disable a declaration during debugging. Nesting comments is not allowed: the first */ closes the comment.
At-rule (@import)
Instructs the browser to load an external resource.
@import pulls in rules from another stylesheet, optionally gated by a media query, e.g. @import url('print.css') print;. Any @import statements must appear before all other rules (only @charset can precede them), or the browser ignores them. Each imported file blocks parsing until it is fetched, which can hurt page load performance, especially when imports chain. For that reason a <link> tag in the HTML <head> is usually preferred. It lets the browser discover and fetch stylesheets in parallel instead of serially.
Selector
Targets HTML elements to apply styles to, e.g. :root, body, .class, #id.
A selector is the part of a rule before the {, describing which elements the declaration block applies to. Simple selectors (body, .class, #id) can be combined into compound and complex selectors using combinators like descendant (space), child (>), and sibling (~, +). When multiple rules target the same element, specificity decides which wins: id selectors beat class/attribute/pseudo-class selectors, which beat type selectors and pseudo-elements. Equal specificity falls back to source order, with the later rule winning.
Declaration block
Enclosed in {}, contains one or more declarations.
The declaration block is everything between { and } following a selector: a set of property: value; pairs that together describe how matched elements should be rendered. Order among declarations in the same block generally does not matter unless two declarations set the same property, in which case the later one wins. Blocks can be empty, hold a single declaration, or contain dozens; whitespace and line breaks inside them are insignificant to the parser and exist purely for readability.
Pseudo-class (:hover)
Specifies a special state of an element.
A pseudo-class like :hover, :focus, or :nth-child() selects an element based on state or position rather than its attributes or content. :hover matches while the pointer rests over the element, letting a stylesheet react to interaction without any JavaScript. Pseudo-classes are written with a single colon and can be chained (a:hover:not(.disabled)); this distinguishes them from pseudo-elements like ::before, which use a double colon and target a sub-part of an element rather than a state.
At-rule (@media)
Applies styles based on conditions, such as a media query.
A media query wraps a block of ordinary rules in a condition; the browser only applies the nested rules when the condition matches, and re-evaluates it live as the viewport or environment changes. Common features include max-width/min-width for responsive breakpoints, orientation, and prefers-color-scheme for detecting dark mode. Because @media blocks can contain full selectors and declaration blocks, they let a single stylesheet adapt layout, typography, or colors for different devices without duplicating the whole file.
CSS variable (custom property)
Defined with a -- prefix and read elsewhere with var().
A custom property is any declaration whose name starts with --, such as --primary-color: #007bff;. Unlike a preprocessor variable, it is a real runtime value in the CSSOM: it inherits down the DOM tree like any other inherited property, so nested elements can override it for just their subtree. Custom properties are read with var(--name, fallback), where the optional second argument supplies a value to use if the property is unset or invalid. Because they resolve at compute time, they can also be changed dynamically from JavaScript or animated, which static preprocessor variables cannot do.
Declaration (property: value;)
A single style rule pairing a property with a value.
A declaration is a single property: value; pair: the smallest unit of styling instruction, ending in a semicolon (optional on the last declaration in a block, but conventional to include). Declaring the same property twice in one block simply lets the later occurrence win. Some properties, called shorthands, set several related longhand properties at once, e.g. font: italic 1em/1.5 sans-serif; expands to font-style, font-size, line-height, and font-family in one line.
Property
The style attribute being changed, such as justify-content or font-size.
The property names the aspect of rendering being controlled: layout (display, justify-content), box model (padding, margin), or typography (font-size, color), among hundreds of others defined across the CSS specifications. Browsers ignore declarations whose property name they do not recognize, which is what makes progressive enhancement with new CSS features safe. Vendor-prefixed properties like -webkit-appearance once let browsers ship experimental features before standardization; most mainstream properties no longer need a prefix, but some still appear in compatibility-focused codebases.
Value
The setting assigned to the property, such as var(--primary-color) or 2em.
The value supplies the actual setting for a property, and its accepted forms depend on the property: keywords (flex, pointer), lengths (2em, 20px), colors (white, #f4f4f4), or functions like var(--primary-color) and calc(100% - 20px). Length units come in absolute forms like px and relative forms like em (relative to the element's font size), rem (relative to the root font size), and % (relative to a containing value), which is why relative units are generally preferred for responsive layouts.
Official CSS site · All languages on AnatomyOf
The interactive tour needs JavaScript. Enable it to hover a callout and trace it into the code.