The CSS file (.css)

The basics

What is a CSS file?

Anatomy

What's inside a CSS file

A stylesheet is a list of rules. Each rule has a selector, which picks elements on the page, and a block of declarations in curly braces, each a property and a value. Here is a short stylesheet, part by part.

/* Site styles */
@import url("reset.css");

:root {
  --brand: #046eff;
}

body {
  font-family: system-ui, sans-serif;
  margin: 0;
}

.button,
.link:hover {
  background: var(--brand);
  padding: 0.5rem 1rem;
}

#main > p:first-child {
  font-size: 1.25rem;
}

@media (max-width: 600px) {
  .button { display: block; }
}

1. 1/* Site styles */

   A comment

   The only comment syntax CSS has. A // comment isn't valid CSS: the parser reads it as part of whatever comes next, which breaks that rule or declaration, so it gets dropped.

2. 2@import url("reset.css");

   An at-rule

   Rules starting with @ are instructions rather than styles. @import pulls in another stylesheet. It must come before all other rules except @charset, @layer statements and other imports, and the browser can only discover the imported file once this one has loaded, which slows the page down.

3. 3:root { --brand: #046eff; }

   A custom property

   A variable: any property name starting with --. Set on :root, the top of the page, it's available to every element.

4. 4body {

   A selector

   This one matches the <body> element by its tag name. Everything between the braces applies to it.

5. 5font-family: system-ui, sans-serif;

   A declaration

   A property, a colon, a value and a semicolon. Fonts are a fallback list: the browser uses the first one available. Text properties like this are inherited, so every element inside the body gets the same font.

6. 6.button, .link:hover {

   A selector list

   A comma applies the same rule to several selectors: here anything with class="button", and anything with class="link" while the pointer is over it. :hover is a pseudo-class, a state rather than something in the HTML.

7. 7background: var(--brand);

   Using the variable

   var() reads the custom property. Change --brand once and every rule that uses it changes.

8. 8padding: 0.5rem 1rem;

   A shorthand with units

   Two values mean top and bottom first, then left and right. rem is relative to the root font size, so spacing grows if the reader enlarges text.

9. 9#main > p:first-child {

   A more specific selector

   An id (#main), the child combinator > and a pseudo-class. Because it includes an id, this rule beats rules that use only classes and tag names, wherever they are in the file.

10. 10@media (max-width: 600px) {

    A media query

    The rules inside apply only when the condition is true: here on screens up to 600 pixels wide. This is how one stylesheet adapts to phones.

Under the hood

The cascade: how a browser decides which rule wins

Connecting it

How a page loads a CSS file

<head>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/print.css" media="print">
  <style>
    /* page-specific rules can still go here */
  </style>
</head>

History

CSS1, CSS2, CSS3 and why there is no CSS4

Related formats

Sass, Less, minified CSS and source maps

Troubleshooting

Why isn't my CSS working?

How to

How to open, edit, check and minify a CSS file

Security

Can a CSS file be dangerous?

Free downloads

Sample CSS files to download

Free sample CSS files for testing parsers, minifiers, upload filters, encodings and size limits. Each CSS file parses without errors in esbuild and the CSSTree validator.

Loading…

What's inside sample-stylesheet.css

The stylesheet is commented: open it in a text editor and each numbered comment marks one of these parts. To see it applied, open sample-demo.html from the same folder.

1. Comment 1: cascade layers

   @layer reset, base, components, utilities; sets the order of four layers in one line, so the utilities always win over components regardless of selector specificity.

2. Comments 2 and 3: variables and dark mode

   Colours, radius and spacing as custom properties on :root, then a prefers-color-scheme: dark media query that redefines only the colour values.

3. Comments 4 and 5: reset and base styles

   box-sizing: border-box for everything, then fonts and colours on body that every element inherits.

4. Comments 6 and 7: grid and nesting

   A card grid that reflows with repeat(auto-fit, minmax(14rem, 1fr)), and a card rule with nested & h2 and &:hover rules.

5. Comment 8: specificity

   Two rules for .price. The first, .card .price, wins even though the second comes later, because (0,2,0) beats (0,1,0).

6. Comment 9: pseudo-elements and :has()

   ::before adds a # to tags, :has() gives a card a coloured border when it contains a "new" tag, and an ::after rule writes the "Stylesheet: loaded" line on the demo page.

7. Comments 10 and 11: animation and container queries

   A pulsing dot that stops for people who prefer reduced motion, and a header that switches to two columns when its container is at least 40rem wide, inside an @supports check.

8. Comments 12 and 13: utilities and print

   Helper classes in the last layer, and print rules that hide the animation and print each link's address after it.

All sample CSS files

• Commented sample stylesheet

  sample-stylesheet.css · 4.7 KB (4,784 bytes)

  A realistic stylesheet using current CSS: cascade layers, custom properties, dark mode, grid, nesting, :has(), container queries, animation and print styles, with numbered comments explaining each part.

  • Checking parsers and minifiers handle modern syntax
  • Teaching how a stylesheet is organised
  DownloadOpen

• Demo page for the stylesheet

  sample-demo.html · 1.8 KB (1,832 bytes)

  An HTML page with no styles of its own that links to sample-stylesheet.css. Keep both files in the same folder. If the stylesheet loads, the page says "Stylesheet: loaded".

  • Checking a host serves CSS with the right type and path
  • Seeing the sample stylesheet in action
  DownloadOpen

• Minimal CSS file

  sample-minimal.css · 65 bytes

  One rule with two declarations: the smallest useful stylesheet.

  • Parser tests
  • A starting point for a new stylesheet
  DownloadOpen

• Minified CSS

  sample-minified.css · 2.2 KB (2,223 bytes)

  The sample stylesheet minified with esbuild: same rules on one line, comments removed except a /*! licence-style comment, which minifiers keep by convention.

  • Comparing minified and readable CSS
  • Testing formatters and source viewers
  DownloadOpen

• UTF-8 encoding test

  sample-utf8.css · 1.0 KB (1,058 bytes)

  Non-ASCII text in content: strings (accents, Greek, Cyrillic, Chinese, Japanese, Korean, Arabic, Hebrew, symbols, emoji), the same characters as CSS escapes like \e9, and class names such as .café and an escaped .\31 23.

  • Spotting encoding bugs in editors, servers and build tools
  • Testing CSS escape handling
  DownloadOpen

• 100 KB CSS file

  sample-100kb.css · 100 KB (102,400 bytes)

  About 3,300 generated utility classes, padded with a comment to exactly 102,400 bytes.

  • Upload and size-limit tests
  • Minifier and compression benchmarks
  DownloadOpen

Ways to test with them

• Is CSS served correctly? Put sample-demo.html and sample-stylesheet.css online together and open the page. If it doesn't say "Stylesheet: loaded", check the path and the Content-Type.
• Modern syntax: run sample-stylesheet.css through your minifier, linter or CMS sanitiser. Older tools may reject nesting, @layer or @container, or quietly drop them.
• Minification round trip: compare your minifier's output with sample-minified.css; both should contain the same rules.
• Encoding: pass sample-utf8.css through your pipeline and compare. Any Ã or â€ means a step didn't treat the file as UTF-8.
• Upload limits: sample-100kb.css is exactly 102,400 bytes, for testing a limit at the boundary.

Free to use for testing, teaching and demos, commercially or not, with no attribution needed. A link back to this page is always appreciated.

Questions

CSS files, frequently asked