CSS Formatter & Beautifier

How it works

CSS Quick Reference

CSS vs SCSS vs Less

SCSS and Less add programming features on top of CSS — but both must be compiled before browsers can use them.

/* CSS Custom Properties (variables) */
:root {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --font-size-base: 1rem;
  --border-radius: 0.375rem;
}

.button {
  background-color: var(--color-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius);
  font-size: var(--font-size-base);
}

// SCSS variables
$color-primary: #3b82f6;
$color-secondary: #64748b;
$spacing-sm: 0.5rem;
$spacing-md: 1rem;

// SCSS nesting
.nav {
  display: flex;
  gap: $spacing-md;

  &__item {
    color: $color-secondary;

    &:hover {
      color: $color-primary;
    }

    &--active {
      font-weight: bold;
      color: $color-primary;
    }
  }
}

Tips & Tricks

Using CSS Formatters in Code

How to format and process CSS programmatically in the most common environments.

import * as prettier from 'prettier';

// Format CSS
const formattedCSS = await prettier.format(cssString, {
  parser: 'css',
  tabWidth: 2,
});

// Format SCSS
const formattedSCSS = await prettier.format(scssString, {
  parser: 'scss',
  tabWidth: 2,
});

// Format Less
const formattedLess = await prettier.format(lessString, {
  parser: 'less',
  tabWidth: 2,
});

# Compile SCSS to CSS (expanded output)
sass input.scss output.css --style=expanded

# Compile SCSS to CSS (compressed/minified)
sass input.scss output.css --style=compressed

# Watch for changes and recompile
sass --watch src/styles:dist/css

# Compile all .scss files in a directory
sass src/styles/ dist/css/

# Install PostCSS CLI
npm install -D postcss postcss-cli

# Basic usage
npx postcss input.css --output output.css

# With autoprefixer (adds vendor prefixes)
npm install -D autoprefixer
npx postcss input.css --use autoprefixer --output output.css

# With cssnano (minification)
npm install -D cssnano
npx postcss input.css --use cssnano --output output.min.css

Frequently Asked Questions

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language that controls the visual presentation of web pages. CSS rules describe how HTML elements should be displayed — including layout, colors, fonts, spacing, and animations. It is one of the three core web technologies alongside HTML and JavaScript, and is supported natively by every browser without compilation.

What is the difference between CSS, SCSS, and Less?

CSS is the native stylesheet language browsers understand directly. SCSS (Sassy CSS) and Less are preprocessor languages that add variables, nesting, mixins, and functions — features that make large stylesheets easier to write and maintain. Both must be compiled to plain CSS before a browser can use them. SCSS uses $variable syntax; Less uses @variable syntax. SCSS is more widely adopted in modern projects.

Why should I format my CSS?

Formatted CSS is easier to read, review in pull requests, and maintain. Consistent indentation and property ordering makes it faster to spot missing semicolons, mismatched braces, or duplicate declarations. Prettier (which powers this formatter) applies an opinionated, deterministic style that eliminates formatting debates in teams and produces consistent results in every editor and CI pipeline.

What is CSS minification?

CSS minification removes all whitespace, newlines, and comments from a stylesheet without changing its behavior. Minified CSS reduces the file size browsers must download, improving page load time. Always keep the readable source file and minify only the version deployed to production. Minification strips all comments, so source maps are important for debugging in browser DevTools.

What are CSS custom properties?

CSS custom properties (CSS variables) let you define reusable values with a double-dash prefix: --color-primary: #3b82f6;, and reference them with var(--color-primary). Unlike SCSS or Less variables which are compiled away, custom properties are live in the browser — they can be changed at runtime with JavaScript, can be overridden inside @media queries (e.g. for dark mode), and respect the CSS cascade.

What is a media query?

A CSS media query applies styles conditionally based on device characteristics. The most common use is responsive design: @media (max-width: 768px) { ... } applies styles only when the viewport is 768 px wide or narrower. Modern CSS also supports @media (prefers-color-scheme: dark) for dark mode and @media (prefers-reduced-motion: reduce) for accessibility.

What is CSS specificity?

CSS specificity is the algorithm browsers use to decide which rule wins when multiple conflicting rules target the same element. Specificity is scored as (IDs, classes/attributes/pseudo-classes, elements/pseudo-elements). An ID selector (#header) beats any number of class selectors (.nav). Inline styles beat all stylesheet rules. The !important declaration overrides specificity entirely and should be used sparingly, as it makes styles very hard to override later.

What is the CSS box model?

The CSS box model describes how every HTML element is rendered as a rectangular box with four layers from inside out: content (text or image), padding (transparent space between content and border), border, and margin (transparent space outside the border). By default, box-sizing: content-box means width applies only to the content area. Setting box-sizing: border-box includes padding and border in the stated dimensions, which is the modern default in most CSS resets.

What is the difference between padding and margin?

Padding is the space between an element's content and its border — it is inside the element and inherits the element's background color, and it expands the clickable/hoverable area. Margin is the space outside the border that separates the element from its neighbors — it is always transparent and does not expand the interactive area. A key difference: vertical margins between adjacent block elements collapse to the larger value (margin collapse), but padding never collapses.

What is flexbox?

Flexbox (Flexible Box Layout) is a CSS layout model that arranges items along a single axis — either row or column. Setting display: flex on a container makes its direct children flex items that can grow, shrink, and align automatically. Key properties: flex-direction, justify-content (main-axis), align-items (cross-axis), flex-wrap, and gap. Flexbox is ideal for navigation bars, card rows, and centering content. For two-dimensional layouts, use CSS Grid instead.

Does the formatter validate my CSS?

Yes. The formatter uses Prettier's PostCSS parser, which validates CSS syntax as it formats. If your CSS contains a syntax error, the status bar shows the exact line and column number and highlights that line in the input gutter. Note that Prettier validates syntax only — it does not check whether property names or values are recognized by any specific browser version.

Is my CSS sent to a server?

No. All formatting, minification, and validation happen entirely in your browser using JavaScript. Prettier runs client-side via its standalone build. Your stylesheet never leaves your machine.

Related Tools

Other free developer tools available on DevFormatter.