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.
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
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.
Related files
- cssCSS — Hello WorldA minimal stylesheet that centres a heading with grid — the simplest useful CSS file for testing highlighters, CSS parsers, and minifiers.
- cC — Hello WorldThe classic hello-world in C — an include, main, and printf — for testing highlighters, C compilers, and parsers against the canonical first program.
- cC — Linked list (structs, malloc, pointers)A realistic C program: a singly linked list with a typedef struct, malloc/free memory management, pointer walking, and error handling — for testing highlighters, compilers, and static analysers.
- cppC++ — Hello WorldThe classic hello-world in C++ — iostream and std::cout — for testing highlighters, C++ compilers, and parsers.
- cppC++ — Series (class template, STL)A realistic C++ snippet with a class template, STL algorithms (max_element, accumulate), std::move, and range handling — for testing highlighters, g++/clang++, and parsers against real templates.
- goGo — Hello WorldThe classic hello-world in Go — package main, an import, and fmt.Println, tab-indented like gofmt — for testing highlighters, the Go compiler, and parsers.
Generated by generation/code_samples.py. Free for any use, no attribution required — license.