Skip to main content

13.9.12 CSS support

You can modify the CSS style definitions for the exported file. The HTML exporter assigns the following special CSS classes1 to appropriate parts of the document—your style specifications may change these, in addition to any of the standard classes like for headlines, tables, etc.

p.authorauthor information, including email
p.datepublishing date
p.creatorcreator info, about org mode version
.titledocument title
.subtitledocument subtitle
.todoTODO keywords, all not-done states
.donethe DONE keywords, all states that count as done
.WAITINGeach TODO keyword also uses a class named after itself
.timestamp-kwdkeyword associated with a timestamp, like ‘SCHEDULED
.timestamp-wrapperspan around keyword plus timestamp
.tagtag in a headline
._HOMEeach tag uses itself as a class, “@" replaced by “_"
.targettarget for links
.linenrthe line number in a code example
.code-highlightedfor highlighting referenced code lines
div.outline-Ndiv for outline level N (headline plus text)
div.outline-text-Nextra div for text at outline level N
.section-number-Nsection number in headlines, different for each level
.figure-numberlabel like “Figure 1:"
.table-numberlabel like “Table 1:"
.listing-numberlabel like “Listing 1:"
div.figurehow to format an in-lined image
pre.srcformatted source code
pre.examplenormal example
p.verseverse paragraph
div.footnotesfootnote section headline
p.footnotefootnote definition paragraph, containing a footnote
.footrefa footnote reference number (always a ﹤sup﹥)
.footnumfootnote number in footnote definition (always ﹤sup﹥)
.org-svgdefault class for a linked ‘.svg’ image

The HTML export back-end includes a compact default style in each exported HTML file. To override the default style with another style, use these keywords in the Org file. They will replace the global defaults the HTML exporter uses.

#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="style1.css" />
#+HTML_HEAD_EXTRA: <link rel="alternate stylesheet" type="text/css" href="style2.css" />

To just turn off the default style, customize org-html-head-include-default-style variable, or use this option line in the Org file.

#+OPTIONS: html-style:nil

For longer style definitions, either use several ‘HTML_HEAD’ and ‘HTML_HEAD_EXTRA’ keywords, or use <style> ... </style> blocks around them. Both of these approaches can avoid referring to an external file.

In order to add styles to a sub-tree, use the ‘HTML_CONTAINER_CLASS’ property to assign a class to the tree. In order to specify CSS styles for a particular headline, you can use the ID specified in a ‘CUSTOM_ID’ property. You can also assign a specific class to a headline with the ‘HTML_HEADLINE_CLASS’ property.

Never change the org-html-style-default constant. Instead use other simpler ways of customizing as described above.

  1. If the classes on TODO keywords and tags lead to conflicts, use the variables org-html-todo-kwd-class-prefix and org-html-tag-class-prefix to make them unique.