12.5.9 CSS support

You can also give style information for the exported file. The HTML exporter assigns the following special CSS classes¹ 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.author            author information, including email
     p.date              publishing date
     p.creator           creator info, about org mode version
     .title              document title
     .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
     div.figure          how to format an inlined 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>)

Each exported file contains a compact default style that defines these classes in a basic way². You may overwrite these settings, or add to them by using the variables org-export-html-style (for Org-wide settings) and org-export-html-style-extra (for more fine-grained settings, like file-local settings). To set the latter variable individually for each file, you can use

     #+STYLE: <link rel="stylesheet" type="text/css" href="stylesheet.css" />

For longer style definitions, you can use several such lines. You could also directly write a <style> </style> section in this way, without referring to an external file.

In order to add styles to a subtree, 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.