How to open .CSS files (style sheets) on Android, Windows and Linux

You’re customising a website theme, a forum skin or a static site you downloaded, and the look of it lives in style.css, or in a file like _variables.scss if the theme uses Sass. You only want to change a colour or a font size, from your phone or from a PC with no code editor installed.

Folders opens CSS, SCSS, Sass and Less files in its text editor, with highlighting made for style sheets, on Android, Windows and Linux. Find the colour, replace it everywhere, save. It doesn’t compile Sass or Less, and a style sheet on its own doesn’t display a web page, but for reading and editing it’s all you need.

What is a .CSS file?

CSS (Cascading Style Sheets) is the W3C standard language that describes how web pages look: colours, fonts, spacing, layout and animation. A style sheet is plain text made of selectors (which elements to style) and declarations (how to style them), such as h1 { color: #1a73e8; }. “Cascading” refers to how rules from several sheets combine, with more specific and later rules winning.

Preprocessors add features that CSS lacked for years, such as variables, nesting, mixins and functions, and compile down to CSS, because browsers only read CSS:

Extension	What it is
.css	Plain CSS, read directly by browsers
.scss	Sass’s main syntax (“Sassy CSS”): CSS plus extras, with braces and semicolons; any valid CSS is also valid SCSS
.sass	Sass’s original indented syntax: no braces or semicolons, and indentation marks nesting
.less	Less, a similar preprocessor; its variables start with @

A few conventions help when reading these files. Sass variables start with $, as in $brand: #1a73e8;. SCSS files whose names begin with an underscore, like _buttons.scss, are partials: pieces imported into a main file rather than compiled on their own. Bootstrap, one of the best-known CSS frameworks, used Less up to version 3 and switched to Sass for version 4. And modern CSS now has its own variables (custom properties such as --accent) and nesting, so some projects no longer need a preprocessor at all.

You may also find style.min.css, a minified copy on as few lines as possible, and style.css.map, a source map that points browser tools back to the original SCSS or Less.

How to open a .CSS file with Folders

On Android

1. Download Folders from the download section and install it (Android 7.0 or newer).
2. Open it and allow All files access.
3. Go to the theme or project folder, or type .css or .scss into the search box at the top.
4. Tap the file. Inside a downloaded ZIP theme, tap it in the archive; you don’t need to extract everything first.

From another app, choose Open with → Folders.

On Windows and Linux

1. Install Folders on Windows 10 or 11 (64-bit) or Linux.
2. Double-click the style sheet in Folders.
3. On Windows, right-click the file in File Explorer and choose Open with → Folders. The installer adds Folders to that menu for CSS, SCSS, Sass and Less.

What you can do with it in Folders

• Highlighting made for style sheets: selectors such as .card and #header, property names, at-rules such as @media and @import, Sass $variables and Less @variables, colour codes like #1a73e8, numbers with units (px, rem, %, ms) and comments each stand out, with line numbers beside them.
• Find and replace, with Match case: change #1a73e8 to your new brand colour throughout the file, or rename a class within it.
• Go to line: browser developer tools report rules as style.css:214, so you can jump straight there.
• Tabs: keep main.scss and the partials it imports open together.
• Word wrap for minified files, and smaller or larger text.
• Document info shows the line, column, encoding and line endings.
• Undo, redo, edit and Save.

What it doesn’t do: compile SCSS, Sass or Less into CSS, show a preview of the page, add vendor prefixes or check your CSS for errors.

Other ways to open .CSS files

• Visual Studio Code (free, Windows and Linux) understands CSS, SCSS and Less, and shows colour swatches next to colour codes.
• Browser developer tools: inspect any element on a page, try changes live, and copy the rule you settle on.
• The Sass compiler: sass styles.scss styles.css turns SCSS or Sass into CSS; for Less, lessc styles.less styles.css does the same.

Problems opening a .CSS file?

• Your change doesn’t show on the site. Either the browser is using a cached copy (reload without the cache), or the site loads a different file. If the theme uses Sass, the site reads the compiled CSS, not the .scss you edited, so compile again.
• Sass reports errors after pasting code. SCSS and the indented .sass syntax are different, even though both are Sass. Code with braces belongs in .scss; indented code without braces belongs in .sass.
• The whole file is one line. It’s minified. Turn on word wrap to read it, but make lasting changes in the original source file.
• Symbols in content: "…" come out garbled. The file’s encoding doesn’t match what the browser expects. Check Document info, and add @charset "UTF-8"; as the very first line if the file is UTF-8.

Questions people ask

How do I open a CSS file to see the website? A CSS file only describes styling; it isn’t a page. Open the HTML file that links to it in a browser. To read or edit the HTML itself, see how to open HTML files.

SCSS vs Sass vs CSS: what’s the difference? CSS is what browsers read. Sass is a preprocessor with two syntaxes: SCSS, which looks like CSS with extras, and the older indented Sass syntax. Both compile to CSS.

How do I convert SCSS to CSS? Run the Sass compiler (sass input.scss output.css), or let your project’s build tool do it. Folders doesn’t compile style sheets.

Can I edit a CSS file on my phone? Yes. Open it in Folders, make the change and tap Save. Keep a copy of the original first, in case you want to undo it later.

Related guides: how to open HTML files and how to open JavaScript files. Or see all 382 file types Folders opens.