Next: , Previous: Text areas in HTML export, Up: HTML export

12.9.11 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.            author information, including email              publishing date
     p.creator           creator info, about org mode version
     .title              document title
     .subtitle           document subtitle
     .todo               TODO keywords, all not-done states
     .done               the DONE keywords, all states that count as done
     .WAITING            each TODO keyword also uses a class named after itself
     .timestamp          timestamp
     .timestamp-kwd      keyword associated with a timestamp, like SCHEDULED
     .timestamp-wrapper  span around keyword plus timestamp
     .tag                tag in a headline
     ._HOME              each tag uses itself as a class, "@" replaced by "_"
     .target             target for links
     .linenr             the line number in a code example
     .code-highlighted   for highlighting referenced code lines
     div.outline-N       div for outline level N (headline plus text))
     div.outline-text-N  extra div for text at outline level N
     .section-number-N   section number in headlines, different for each level
     .figure-number      label like "Figure 1:"
     .table-number       label like "Table 1:"
     .listing-number     label like "Listing 1:"
     div.figure          how to format an in-lined image
     pre.src             formatted source code
     pre.example         normal example
     p.verse             verse paragraph
     div.footnotes       footnote section headline
     p.footnote          footnote definition paragraph, containing a footnote
     .footref            a footnote reference number (always a <sup>)
     .footnum            footnote number in footnote definition (always <sup>)
     .org-svg            default 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 lines, 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.

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.