CDRN

Format and indent CSS

  • Dashboard
  • Documentation
  • API
formats your CSS rules to make them readable and easy to maintain

Why use a CSS formatter?

CSS code formatting is essential for developers to keep code clean and readable. This tool simplifies the process by letting you quickly and accurately format CSS code, making maintenance and collaboration on projects easier.

Features of the CSS formatter

This CSS formatter lets you enter CSS code and format it for better readability. It removes unnecessary comments, spaces and tabs, and adds appropriate indentation for CSS rules and properties.

How to use the CSS formatter

To use the CSS formatter, follow these simple steps:

  1. Enter your CSS code into the dedicated field.
  2. Click the "Format" button. The tool will format the CSS code for better readability.
  3. Copy the formatted CSS code to use it in your projects.

Example use of the CSS formatter

Here is an example of CSS code before and after formatting: 


Before formatting:
body{font-family:Arial,sans-serif;background-color:#f0f0f0;margin:0;padding:0;}.container{width:80%;margin:0 auto;}.header{background-color:#333;color:#fff;padding:20px;text-align:center;}

After formatting:
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

Frequently asked questions

What is the difference between a CSS formatter, a minifier and a beautifier?

A CSS formatter (or beautifier) rewrites a compact file as an indented, readable version. A minifier does the opposite: it removes whitespace, line breaks and comments to reduce the size of the file served in production. Our tool focuses on formatting: it takes a minified or poorly indented CSS sheet and reformats it with consistent indentation, property by property.

Does formatting preserve CSS comments?

Comments /* ... */ are preserved as is by default. Licence comments at the top of the file (/*! ... */) as well as utility annotations (TODO, FIXME) stay intact, on their own line. If you want to remove them to produce a production file, use a dedicated minifier instead.

Are vendor prefixes (-webkit-, -moz-) handled?

Yes. Vendor prefixes are treated as ordinary properties: they are indented and aligned with the rest of the block. The formatter neither generates nor removes prefixes: it simply formats what is provided. To automatically add missing prefixes, use Autoprefixer in your build pipeline.

Does the formatter handle media queries and nested rules?

Yes. @media, @supports, @keyframes and other at-rules are indented with their nested rules inside the braces. Native CSS nesting (& in a parent rule) is also recognised and formatted correctly, as are SCSS or Less blocks compatible with standard CSS syntax.

Can I format SCSS, Less or Stylus?

The tool targets standard CSS. Extended syntaxes (SCSS mixins, Less variables with @, Stylus brace-less syntax) are not understood by the parser and may produce a degraded result. For these languages, use sass --style=expanded, lessc or a dedicated formatter like Prettier with the right plugin instead.

Does the formatter validate CSS syntax?

The formatter performs minimal syntactic analysis: it identifies blocks, selectors and declarations. It flags gross errors (unclosed brace, missing semicolon at end of block) but does not validate property names or values. For full validation, use the W3C CSS Validator service.

Example request

curl -X POST https://cdrn.fr/api/v1/tools/css-formatter/execute \
  -H "Content-Type: application/json" \
  -d '{"input":"..."}'

Input schema

Field Type Required Default
input text ✓ –

Endpoints

  • GET https://cdrn.fr/api/v1/tools - lists every available tool
  • GET https://cdrn.fr/api/v1/tools/css-formatter - returns the schema for this tool
  • POST https://cdrn.fr/api/v1/tools/css-formatter/execute - runs this tool with a JSON payload