css963 B

CSS — Component styles (variables, flexbox, keyframes)

A realistic component stylesheet using custom properties, flexbox, a fluid clamp() font size, color-mix(), a keyframe animation, and a media query — for testing CSS parsers, linters (stylelint), and highlighters.

Syntax highlighting Code parsing Editor testing

Preview — first 50 linescss

/* Component styles: custom properties, flexbox, a fluid font size,
   a keyframe animation, and a media query. */
:root {
  --brand: #059669;
  --ink: #18181b;
  --radius: 8px;
  --gap: 1rem;
}

* {
  box-sizing: border-box;
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--radius);
}

.card__title {
  margin: 0;
  color: var(--brand);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}

.button {
  align-self: flex-start;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--brand);
  color: white;
  cursor: pointer;
  animation: fade-in 200ms ease-out;
}

.button:hover {
  filter: brightness(1.05);
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .card {

… 54 lines total — download for the full file.

Specifications

Language: CSS
Kind: realistic snippet
Lines: 53
Encoding: UTF-8
Line Endings: LF

Testing contract

Expected to pass

Scenario: Parse the stylesheet and resolve its at-rules, custom properties and modern colour functions.
Expected result: Four custom properties are declared on `:root`, and the parser must retain one `@keyframes fade-in` block and one `@media (max-width: 480px)` block, plus a `clamp()` font size and a `color-mix(in srgb, ...)` border - a parser predating those functions drops the declarations silently instead of erroring.

What is a .css file?

CSS (.css) is a plain-text stylesheet describing how HTML elements are presented — colors, layout, typography, and responsive behaviour. It uses selectors paired with declaration blocks, and modern CSS adds custom properties (variables), flexbox and grid layout, and media queries.

How to use this file

Use an example .css file to test syntax highlighters, CSS parsers and minifiers, linters (stylelint), and pipelines that process or bundle stylesheets.

How to use this file for testing

“CSS — Component styles (variables, flexbox, keyframes)” is a deterministic Novus Examples fixture for Syntax highlighting, Code parsing, Editor testing. Idiomatic hello-world programs and realistic snippets across sixteen languages, exercising comments, string escapes, interpolation, numeric literals, and language keywords — for testing syntax highlighters, editor themes, and tree-sitter grammars.

Documented properties for this file: CSS · UTF-8 · LF. Compare results against paired or grouped companions on this page when present (clean↔damaged, searchable↔scanned, or format twins) so scores stay reproducible across runs.

Download the file once, keep the path stable in CI or local scripts, and treat the spec table as the contract: dimensions, seeds, field lists, and roles are intentional. Corrupt or invalid samples are labelled as such — expect parsers to fail loudly rather than silently accept them.

This is a short, known-correct source file. Run it through your syntax highlighter, linter, formatter, tree-sitter grammar, or parser, and open it in the in-browser editor to tweak and re-download. Each snippet exercises comments, string escapes, literals, and language keywords.

Generated by generation/code_samples.py. Free for any use, no attribution required — license.