# CSSV > CSSV (Comma-Separated Styled Values) keeps a table's data and its look in one plain-text file: CSV for the data, with a CSS style block on top for the presentation. A renderer turns the CSV into an HTML table with a fixed structure and applies the file's own styles to it. Use it when the styles belong with the data; to show a plain CSV file styled by the page, a CSV parser is enough. Without its style block, a CSSV file is an ordinary CSV file. A CSSV file starts with a `---` line, then CSS, then another `---` line, then CSV with a header record. Stylesheets select the table model's hooks: `data-col` (the column name), `data-row` (the record number), `data-key` (the row's name from the key column) and the classes `number`, `negative`, `zero` and `positive`. Two custom properties configure rendering: `--cssv-key` picks the key column, by name or by position with `col(2)`, and `--cssv-format` takes `Intl.NumberFormat` options. Numbers are written as `-1234.5` in every file and shown in the reader's locale. The style block can open with `/* cssv:title … */` and `/* cssv:description … */` comments, which file lists and previews show. The reference renderer is the `` custom element, published on npm as `@rhpaiva/cssv` with no dependencies. Install it with `npm install @rhpaiva/cssv`, or load it in a page with ``. The package's processor also parses CSSV and renders the table model as HTML in Node. ## Docs - [Specification](https://cssv.dev/SPEC.md): CSSV v1, covering the file format, value types, the table model, rendering, CSSV properties, localization and security - [Skill for AI agents](https://cssv.dev/skills/cssv/SKILL.md): a compact guide to writing correct CSSV files, packaged as a Claude Code skill - [Usage](https://cssv.dev/README.md): installing and using ``, with its attributes, properties and events, and the Node API ## Examples - [departures.cssv](https://cssv.dev/departures.cssv): a split-flap departures board whose remarks come from sign classes; its look is the imported [split-flap.css](https://cssv.dev/split-flap.css) - [budget.cssv](https://cssv.dev/examples/budget.cssv): a small report with a key column, number formats and an imported stylesheet - [markets.cssv](https://cssv.dev/examples/markets.cssv): sign classes driving colors, arrows and row highlights - [planets.cssv](https://cssv.dev/examples/planets.cssv): rows styled by name through custom properties - [invoice.cssv](https://cssv.dev/examples/invoice.cssv): text IDs, multi-line fields and currency placement by locale - [league.cssv](https://cssv.dev/examples/league.cssv): a semicolon-delimited export with CSS counters and positional zones - [season.cssv](https://cssv.dev/examples/season.cssv): the same league in alphabetical order with Pos as the key column, where typed attr() and sibling-index() slide each row to its rank and update() plays the season from [season-results.csv](https://cssv.dev/examples/season-results.csv) - [elements.cssv](https://cssv.dev/examples/elements.cssv): the periodic table, with 118 rows laid out as an 18-column grid by position and colored through the key column - [forecast.cssv](https://cssv.dev/examples/forecast.cssv): a week of weather stood on its side with subgrid, its icons drawn per condition - [seats.cssv](https://cssv.dev/examples/seats.cssv): a seat map where empty fields are free seats and the row-number column is the aisle - [stadium.cssv](https://cssv.dev/examples/stadium.cssv): a ticket seller's seating plan drawn as a stadium bowl, where sibling-index() turns each section's row into an angle, clip-path cuts its wedge, the category key column colors it and .zero marks sold-out sections - [nutrition.cssv](https://cssv.dev/examples/nutrition.cssv): a Nutrition Facts label made from four columns of numbers - [resume.cssv](https://cssv.dev/examples/resume.cssv): a resume with one row per line, a kind column as the key, rows as subgrids sharing a label column and a timeline, and @media print for A4 - [Ledger, page 1](https://cssv.dev/examples/ledger/page-1.cssv): pagination, with one .cssv file per page (page-1 to page-5) sharing the imported [ledger.css](https://cssv.dev/examples/ledger/ledger.css) - [oslo.cssv](https://cssv.dev/examples/oslo.cssv): an Open-Meteo daily download, unchanged, as a month calendar; its look is the imported [weather.css](https://cssv.dev/examples/weather.css), shared with berlin.cssv and lisbon.cssv - [browser-share.cssv](https://cssv.dev/examples/browser-share.cssv): StatCounter's browser market share download, unchanged, as a bar chart; the share is the key column, picked with col(2) because its name carries the month, and typed attr() turns it into the bar's length - [jira-export.cssv](https://cssv.dev/examples/jira-export.cssv): a Jira CSV export as a board, with Status as the key column and repeated column names - [whatsapp-chat.cssv](https://cssv.dev/examples/whatsapp-chat.cssv): a WhatsApp group chat as bubbles, with the sender as the key column and WhatsApp's own lines found by their missing data-key - [outlook-inbox.cssv](https://cssv.dev/examples/outlook-inbox.cssv): an Outlook mail folder exported as CSV, unchanged, as an inbox with a reading pane; Importance is the key column, and columns are matched by names like "From: (Name)" as written - [calendar-import.cssv](https://cssv.dev/examples/calendar-import.cssv): a Google Calendar import file laid out as a week, with all-day events found by :empty - [grades-bio-101.cssv](https://cssv.dev/examples/grades-bio-101.cssv): a Canvas gradebook, where :empty is a missing assignment and .zero a score of zero - [strings.cssv](https://cssv.dev/examples/strings.cssv): a translation sheet whose empty cells are untranslated strings, totalled with CSS counters - [git-log.cssv](https://cssv.dev/examples/git-log.cssv): git log output as a changelog, with deletions written as negative numbers - [attendees.cssv](https://cssv.dev/examples/attendees.cssv): an attendee list printed as name badges with @media print ## Optional - [npm package](https://www.npmjs.com/package/@rhpaiva/cssv): `@rhpaiva/cssv` - [GitHub repository](https://github.com/rhpaiva/cssv): issues and releases - [CSSV Viewer](https://cssv.dev/viewer.html): a desktop app for Linux, macOS and Windows that opens `.cssv` files; downloads and installation notes - [Conformance matrix](https://cssv.dev/CONFORMANCE.md): every requirement in the spec, mapped to the reference implementation's tests - [Website](https://cssv.dev/): a live editor, the examples rendered, and install instructions