Key facts
- Plain text made of selectors and declaration blocks, for example .button { color: #fff; }.
- MIME type is text/css; browsers in strict mode refuse stylesheets served with any other type.
- Linked from HTML with <link rel="stylesheet" href="style.css"> or imported with @import.
- Often generated from Sass, Less or PostCSS, and minified for production to remove whitespace and comments.
- Typical files range from a few KB to a few hundred KB; frameworks may ship larger bundles.
How to open a .css file
Windows
Open it in VS Code or Notepad++ for syntax highlighting. In a browser, press F12 and use the Elements panel to see which rules apply.
macOS
Open it in VS Code, Nova or any code editor, and inspect live styles with Safari's or Chrome's Web Inspector.
Linux
Edit it in VS Code, Kate, nano or vim, and inspect applied styles with the DevTools in Firefox or Chromium.
Common problems and fixes
- Changes do not show on the site
- The browser, a CDN or a caching plugin is serving the old file. Hard-refresh with Ctrl+F5 (Cmd+Shift+R on Mac), purge caches, and add a version query such as style.css?v=2.
- "Refused to apply style ... because its MIME type ('text/html') is not a supported stylesheet MIME type"
- The URL is returning an HTML page, usually a 404 or login page, or the server sends the wrong Content-Type. Open the CSS URL directly, fix the path, and make sure .css files are served as text/css.
- A rule is ignored or overridden
- A more specific selector, a later rule, or !important wins the cascade. Check the crossed-out declarations in DevTools to see which rule overrides yours.
- Minified CSS is unreadable
- .min.css files put everything on one line. Beautify a copy for reading, and edit the original source (or the Sass/Less file) rather than the minified build.
- Styles break after a stray brace or semicolon
- A missing } or ; can invalidate the following rules. Look for the first rule that stops working and check the syntax just above it.
Often converted to or from: SCSS, Less, minified CSS, inline styles