Emacs: Xah CSS Mode

By Xah Lee. Date: . Last updated: .

xah-css-mode.el is a emacs major mode for working with CSS code.

emacs xah css mode 2016-07-10
emacs xah-css-mode



Correct Syntax coloring of ALL CSS words. If it's not colored, you have a typo.

Semantic Coloring. CSS words are colored by their type. e.g. HTML tag names, CSS attribute names, CSS value keywords, CSS unit names, pseudo selector names, media keywords. ID selector string and class name in bold.

Keyword completion with ido-mode interface. Press Tab after a word to complete. All CSS words are supported: {html5 tags, property names, property value keywords, units, colors, pseudo selectors, “at keywords”, …}.

Single Key Prettify Code Format. Press Tab before word to reformat current block of code. That is, all lines enclosed by curly brackets {}.

Syntax coloring of hexadecimal color format #rrggbb and #rgb and HSL Color format hsl(0,68%,42%).

Abbreviations: over 100 abbrevs for the most used CSS properties. Just type the initial letters followed by a space.

• Command to convert #rrggbb color format under cursor to HSL Color format.

• Command to insert a random color.

• Command to minify CSS code.

• Command to unminify (expand) CSS code to multi-lines format.

Abbreviations Feature



followed by space, and it becomes


press space again and it becomes

font-size: 2rem;

Just type the initial letters.

Here's example of the top 16 most used CSS properties and the expansion:

font-size: 2rem;
width: 200px;
color: red;
margin-top: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
margin-right: 1rem;
height: 200px;
padding-top: 1rem;
padding-left: 1rem;
padding-bottom: 1rem;
padding-right: 1rem;
display: inline-block;
background-color: black;
text-align: left right center justify;
position: static absolute fixed relative initial inherit;

If you have a question, put $5 at patreon and message me on xah discord.
Or support me by Buy Xah Emacs Tutorial