Function: css-mode

css-mode is an autoloaded, interactive and byte-compiled function defined in css-mode.el.gz.

Signature

(css-mode)

Documentation

Major mode to edit Cascading Style Sheets (CSS).

This mode provides syntax highlighting, indentation, completion, and documentation lookup for CSS.

Use C-M-i (completion-at-point) to complete CSS properties, property values, pseudo-elements, pseudo-classes, at-rules, bang-rules, and HTML tags, classes and IDs. Completion candidates for HTML class names and IDs are found by looking through open HTML mode buffers.

Use C-h S (info-lookup-symbol) to look up documentation of CSS properties, at-rules, pseudo-classes, and pseudo-elements on the Mozilla Developer Network (MDN).

Use M-q (fill-paragraph) to reformat CSS declaration blocks. It can also be used to fill comments.

C-M-i completion-at-point
C-M-q prog-indent-sexp
C-c C-f css-cycle-color-format
C-h S css-lookup-symbol

In addition to any hooks its parent mode prog-mode might have run, this mode runs the hook css-mode-hook, as the final or penultimate step during initialization.

Probably introduced at or before Emacs version 22.2.

Key Bindings

Source Code

;; Defined in /usr/src/emacs/lisp/textmodes/css-mode.el.gz
;;;###autoload
(define-derived-mode css-mode prog-mode "CSS"
  "Major mode to edit Cascading Style Sheets (CSS).
\\<css-mode-map>
This mode provides syntax highlighting, indentation, completion,
and documentation lookup for CSS.

Use `\\[completion-at-point]' to complete CSS properties, property values,
pseudo-elements, pseudo-classes, at-rules, bang-rules, and HTML
tags, classes and IDs.  Completion candidates for HTML class
names and IDs are found by looking through open HTML mode
buffers.

Use `\\[info-lookup-symbol]' to look up documentation of CSS properties, at-rules,
pseudo-classes, and pseudo-elements on the Mozilla Developer
Network (MDN).

Use `\\[fill-paragraph]' to reformat CSS declaration blocks.  It can also
be used to fill comments.

\\{css-mode-map}"
  (setq-local font-lock-defaults css-font-lock-defaults)
  (setq-local comment-start "/*")
  (setq-local comment-start-skip "/\\*+[ \t]*")
  (setq-local comment-end "*/")
  (setq-local comment-end-skip "[ \t]*\\*+/")
  (setq-local syntax-propertize-function
              css-syntax-propertize-function)
  (setq-local fill-paragraph-function #'css-fill-paragraph)
  (setq-local adaptive-fill-function #'css-adaptive-fill)
  (setq-local add-log-current-defun-function #'css-current-defun-name)
  (smie-setup css-smie-grammar #'css-smie-rules
              :forward-token #'css-smie--forward-token
              :backward-token #'css-smie--backward-token)
  (setq-local electric-indent-chars
              (append css-electric-keys electric-indent-chars))
  (setq-local font-lock-fontify-region-function #'css--fontify-region)
  (add-hook 'completion-at-point-functions
            #'css-completion-at-point nil 'local)
  ;; The default "." creates ambiguity with class selectors.
  (setq-local imenu-space-replacement " ")
  (setq-local imenu-prev-index-position-function
              #'css--prev-index-position)
  (setq-local imenu-extract-index-name-function
              #'css--extract-index-name))