How to Format CSS

CSS (Cascading Style Sheets) controls the styling and layout of web pages. As selectors, media queries, and properties accumulate, stylesheets can quickly become difficult to read. Clean formatting keeps your CSS code organized.

In this guide, we'll explain how to format and organize your CSS files.

Selector and Property Formatting

Standard formatting rules recommend:

• Placing a space before the opening brace ({).
• Writing each property declaration on its own line.
• Indenting property declarations (typically with 2 spaces).
• Placing a semicolon after every property declaration.

Unformatted CSS:

.card{background:#fff;border:1px solid #ccc;border-radius:8px;}

Formatted CSS:

.card {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
}

Property Ordering Guidelines

Grouping related CSS properties together makes them easier to read:

1. Layout: display, position, grid, flex, margin, padding
2. Size: width, height
3. Typography: font-family, font-size, text-align
4. Visuals: background, border, opacity