A CSS mode is now included in Emacs version 22.2.2. The version from Stefan Monnier was formerly available at:

There are several other stabs at creating a CSS major mode for Emacs, but I think it would be preferable to base any attempt to make a better CSS mode on the version now in Emacs. Therefore I have moved all other CSS modes mentioned here to Old CSS Modes below.

Comments and Questions

There is no completion in css-mode in Emacs 23

Stefan has prepared for this a bit, writing a function that can download and organize the current syntax. However there is currently no parser. The CSS syntax is rather complex so a parser should perhaps be built on CEDET (which is now in CVS Emacs).

Note that none of the old mode has context sensitive completion.

Feedback discussion

Thanks for posting this survey of CSS modes; it certainly beats googling myself (it needs more pagerank - grin.) I hope it develops into the key resource for CSS mode until a definitive implementation is chosen for Emacs v22. Where do you want the feedback posted to? This Wiki page, or to a mailing list? David

Posting feedback here is a very good alternative I believe. It could also be good to post a link to help-gnu-emacs when there are something new and important here.

Discussion on CSS as an embedded language

Somewhere on EmacsWiki, it would be useful to see a discussion about the tidiest way to support CSS embedded in other languages, such as HTML and XHTML. Perhaps for Emacs v 23. David

Please do this on the page MultipleModes.

CSS Tips

First, make sure your CSS is neatly formatted, with a \n between each section. You can usually jump paragraphs, by hitting C-arrow down. Also check for any CSS hacks, which might depend on order of declaration, while doing this. sort.el should already be loaded. Select the region you wish to sort. Finally, call M-x sort-paragraphs

Old CSS Modes

An article with a screenshot of Lars Marius Garshol’s mode can be found at . For what it is worth, I have quickly evaluated the scripts by Lars Marius Garshol and Alex Shinn. I am a CSS beginner, and generally sloppy with punctuation, so I need as much help as possible. Therefore I find features in both useful: I find Lars’ mirror mode very handy, as is his comment shortcut. Alex has element completion (though it capitalizes elements) and his font lock highlights them. I tend to prefer Alex’s default formatting, but that is always a matter of personal preference. There are lots of nice things that could be added to both by someone with the right blend of hubris and laziness, such as validation, class and id completion from a tags table, and the M-q support from AlexSchroeder’s css-mode-simple. Q: What is your preferred key-binding for completion? Lars uses ESC TAB (M-Tab if that isn’t owned by the window manager) while Alex has a clever auto Tab that completes in the first word of the line, and indents at the start of the line or after the first semicolon. David

This is from a user I asked to try Stefan Monnier’s version:

I tried this mode over the last few days, while I was revamping a web site. I must say that I like the indenting work that it does a LOT better than the version that I have in my emacs-snapshot (Debian though, which is now outdated by almost 2 months now: GNU Emacs (x86_64-pc-linux-gnu, X toolkit, Xaw3d scroll bars) of 2007-03-02 on excelsior, modified by Debian). The font-locking is also a LOT better. Overall, this is a major improvement, so I hope this makes into Emacs proper soon!

CSS Extensions

Niels Giesen offers some CSS related utils from his git repo at:


Niels Giesen also appears to have been the original author of css-color.el CssColor which has been absorbed by NxhtmlMode. mon key maintains a modified version of the the older pre NxhtmlMode css-color.el along with other adaptations of Niels’ CSS packages these are:

MarkupModes, CategoryHypermedia, CategoryModes, MultipleModes