How to format CSS code on Mac
You can do this with Note My in one pass. Here is how to re-indent a stylesheet three people have touched, which settings CSS keeps as its own, and what to do when the file opens as plain text.
A stylesheet gets messy quietly. Someone pastes a block at two spaces, someone else works at a tab, a minified fragment arrives on one enormous line, and a media query ends up flat against the left margin with its rules nested three levels deep inside it. Nothing is broken. It is simply unreadable.
This guide covers re-indenting a CSS file in Note My: where the control lives, what comes back changed, the two switches that exist only for CSS, and what to do when a stylesheet opens as plain text.
Formatting happens entirely on your Mac. Nothing is uploaded, there is no account, and your stylesheet never leaves the machine.
What re-indenting changes in a stylesheet
Re-indenting does more than shift lines left and right. Our indentation engine gives you back a stylesheet whose braces, blocks and declarations sit at the depth they belong, in your brace style, at your indent width. It also unpacks declarations that share a line, so a rule that arrived as one long run comes back as a block you can read down.
What changes is structure: indentation and line breaks. Your selectors, values and comments stay exactly as you wrote them, and colour is never written into the file — what our syntax engine puts on screen is there to help you read. One behaviour is worth knowing before you start: the Indent button does not act immediately. It opens a sheet, and nothing changes until you press Apply.
Reach for it on any stylesheet you have inherited or are about to send out for review.
Format a stylesheet
-
Open the file and check the language pill
Open the stylesheet with ⌘O, or drag it from the Finder onto the tab bar. Look at the status bar: the Identify pill should read CSS. If it does not, put that right first; the fix has its own section below.
-
Open the Indentation sheet
Click Indent in the toolbar — the braces glyph. It sits in the toolbar of every window, so the control is one click away from wherever you happen to be in the file, and it opens the same sheet for a stylesheet as it does for any other language.
-
Set the language to CSS
The sheet opens with a language picker offering a global default plus fifteen languages. Choose CSS. That reveals the CSS-specific section further down the sheet, and snaps the brace style, width and tabs controls back to whatever you chose for CSS last time.
-
Choose your brace style and indent width
Two brace styles exist: same line (K&R —
.card {) which is the default, and next line (Allman), which puts the opening brace on its own row under the selector. Indent width defaults to 4 and the sheet accepts 1 to 12. Spaces are the default; there is a tabs switch if your project uses them.Brace style, indent width and the tabs-or-spaces choice are stored per language, so CSS can sit at 2 spaces while your Swift stays at 4 and each one is waiting as you left it.
-
Set the CSS-specific switches
With the language set to CSS, the language-specific section adds two switches written for stylesheets: property alignment and single-line short rules. Between them and the brace, width and tabs controls above, you can match a house style — aligned values down a long block, or one-line utility rules kept compact. Set them the way your team reads CSS.
-
Save the stylesheet before you Apply
Press ⌘S first. A re-indent settles the whole document in one move, and a saved copy is your escape hatch: if you would rather have the stylesheet back as it was, File ▸ Reload from Disk (⌘R) returns exactly what you saved. Reloading never changes the file on disk, so you can look, reload and try a different width as often as you like.
-
Press Apply
Apply keeps every setting in the sheet and formats the document. Cancel is ⎋; Apply is the prominent button and takes ↩. Save again with ⌘S once you are happy — until you do, the change is on screen only, marked by a leading
*on the tab title.
Nested blocks: media queries, supports and keyframes
Nested at-rules come back at the depth you would have drawn by hand. A rule inside @media sits one level in; a rule inside @supports inside @media sits two; percentage steps inside @keyframes sit one level in and their declarations two. One setting covers the whole hierarchy: every level uses the width you chose in the sheet, so a stylesheet with six breakpoints reads the same from the first to the last, however deeply a rule is buried.
A stray brace shows itself in the result. The depth changes at that point and stays changed, so the first line sitting at the wrong level tells you where to look — see troubleshooting for how to track it down.
While you are reading nested CSS, the Guides toggle in the toolbar draws a marker at each level of indentation — ten styles, Dots by default, chosen in Settings ▸ Guides. Guides are on from the first launch, and the toolbar toggle turns them on and off as you read, so you can follow a rule up to the breakpoint that contains it without counting spaces.
When a stylesheet opens as plain text
Open a stylesheet saved under the usual .css name and it is right before you touch it: the Identify pill reads CSS and the colouring is in place. That is our advanced language identifier doing the work for you, on your Mac, with nothing uploaded and no account involved.
Sometimes a stylesheet lands on Plain Text instead. You will see it with CSS pasted into an untitled tab, a file saved as site.txt, or one arriving with no extension. Name the file, or name the language, and it behaves as CSS from then on.
Setting the language by hand
Click the Identify pill in the status bar. The Language Inspector opens, saying "Identified programming language: X" with an override pop-up; pick CSS and Confirm. Once you have chosen a language for a tab, you are not asked again, and the colouring follows at once.
You can also just pick CSS in the Indentation sheet. Its picker decides how the file is formatted whatever the status bar says.
Save As pre-fills an extension to match the language you have set. Accept it and a tab you marked as CSS is saved with a name that opens as CSS next time.
CSS inside an HTML file
Set the sheet's language to HTML for those files, not CSS. The HTML side of the sheet carries a script-and-style formatting option, on by default, which tidies the CSS in a <style> block along with the markup around it. It also leaves <pre> content exactly as you typed it, which is what you want in a page that shows sample code.
Starting a stylesheet from the built-in template
If you are beginning rather than repairing, there is a styles.css template among the forty built in. Reach it from File ▸ New from Template or the toolbar Templates pull-down — both show the same list. The new document arrives named styles.css and behaves as CSS from the first keystroke.
Save your own house stylesheet with Templates ▸ Save Current Document as Template… and it joins the My Templates group. Our template library then keeps your reset, custom properties and breakpoints one click away.
What else a tidy stylesheet lets you do
Re-indenting is usually the first move rather than the last. Once the braces sit where they belong and every declaration starts in the same column, the rest of the work on a stylesheet gets quicker.
- Settle the look before you commit. The sheet carries a live preview beside the controls, so you can watch your indent width and brace style take effect as you move between them and pick the pair you want. Settle those, press Apply, and read the finished stylesheet — property alignment and single-line short rules come into their own across a real file, on your own selectors.
- Fix the whole file in one pass. Apply works across the entire stylesheet, so a file three people have touched at three different widths comes back consistent from the first selector to the last, top-level rules and deeply nested breakpoints alike, in a single move.
- Sweep a value across every rule. With the file laid out predictably, our find and replace is the fast way to retire an old brand colour, rename a class or move a breakpoint, because the matches now sit in places you can scan rather than buried in a run-on line.
- See exactly what changed. Put the tidied stylesheet next to the version a colleague sent you in our comparison view and the real differences stand out, instead of every line reading as changed because the indentation moved.
- Repeat an edit you have done once. If a stylesheet needs the same run of small changes every time it arrives, our macro recorder can capture that sequence and play it back over the next file.
- Keep your comments word for word. Formatting a stylesheet moves indentation and line breaks, and leaves your comments exactly as you wrote them, in the same places. Section banners and the note explaining why a magic number is what it is all survive the pass.
- Fold what you are not reading. Double-click a brace and its block collapses, which turns a thousand-line stylesheet into a list of selectors you can move around quickly and expand only where you need to work.
Troubleshooting
Bringing the CSS switches into view
The language-specific section follows the sheet's language picker rather than the document, so set the picker to CSS and the property-alignment and short-rule switches appear beneath it. Leave the picker on the global default when you want to set a width for every language at once — that is the setting to reach for when you are standardising a whole project.
Apply ran and the stylesheet looks the same
That is usually the right answer, and it is worth knowing you can trust it. A stylesheet already laid out the way you have asked for comes back as it was: the text stays put and the tab stays unmarked, so an unchanged file is your confirmation that the whole thing was already in order. An empty document behaves the same way. If you were expecting the layout to move, set the sheet's language picker to CSS, check the width, and Apply again.
The indentation came out wrong in one part of the file
Almost always a missing or extra brace, and the result points straight at it: everything below the stray brace sits one level too deep or too shallow, so the first line at the wrong depth marks the spot. If you saved first, go back with File ▸ Reload from Disk (⌘R), then hunt the brace down by double-clicking one — its block folds, and an unmatched brace gives itself away when the fold swallows more or less than the rule you expected. Balance it and format again.
Re-indenting a generated or bundled stylesheet
A framework build, or a bundle of everything the site loads, is tidied the same way a hand-written stylesheet is: set the sheet's language to CSS, choose your width, and Apply settles the file from the first selector to the last in a single pass, breakpoints and all. Save with ⌘S beforehand, as you would with any file, and File ▸ Reload from Disk (⌘R) stays there as your way back to the version you started from. Opening, scrolling and searching a stylesheet that size stays comfortable, which is what our large-file engine gives you, so a file you only mean to read is yours to move around in straight away. Once it is laid out, fold the blocks you are not working in and a generated file reads as a list of selectors you can move through quickly.
The file still mixes tabs and spaces
Re-indenting settles the indentation at the front of your lines. To see what is left elsewhere, turn on Show Invisibles in the toolbar — a middle dot for a space, an arrow for a tab. For a full account, open Clean ▸ Clean Invisible / Special Characters…: our hidden-character scanner reports Mixed tab/space indent and Trailing whitespace among its twenty-one categories, and you choose which to clean.
My stylesheet opens as plain text every time
Check the file's name first. Renaming it so it ends in .css is the durable fix: it then opens as CSS for you and for anyone you hand it to. If renaming is not an option, set the language once through the Identify pill.
Frequently asked questions
Where do I find the control for formatting CSS?
In the toolbar. The Indent button — the braces glyph — opens the Indentation sheet from any document, so the control is one click away wherever you are in the file. The indentation guides sit in the same toolbar, one click from the text you are reading.
Can I use two spaces for CSS and four for everything else?
Yes. Brace style, indent width and tabs-or-spaces are stored per language. Choose CSS in the sheet's picker, set the width to 2, and Apply — the setting stays with CSS and does not disturb your other languages.
Does formatting change the file on disk straight away?
You decide when it does. Apply changes the document on screen so you can read the result first, and the file on disk changes when you save with ⌘S. Until then the tab carries a leading * to show there is something unsaved. Your work is protected either way: our auto-recovery safety net is always on.
Will it reformat the CSS inside my HTML file?
Yes, if you set the sheet's language to HTML rather than CSS. The script-and-style option is on by default, so a <style> block is tidied along with the markup, and <pre> content is left alone.
Will formatting touch my comments?
Your comments come back word for word, in the same places. Formatting a stylesheet moves indentation and line breaks and leaves the wording alone, so a section banner still heads its section and a note about a particular value still sits beside it.
Does Note My colour CSS as I type?
Yes. CSS is one of the fifteen code languages our syntax engine colours as you type, which makes selectors, properties and values easy to tell apart. The colour is on screen only and never goes into the file, so the stylesheet you save contains your text and nothing else.
My stylesheet arrived minified on one line. Will this help?
Yes. Set the sheet's language to CSS, choose your width, save the file, then Apply: one enormous line comes back as blocks you can search, skim and fold. Save the expanded version under its own name and you have a readable copy to work in while the original stays untouched beside it.