org: CSS support
12.6.10 CSS support
-------------------
You can modify the CSS style definitions for the exported file. The
HTML exporter assigns the following special CSS classes(1) 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
.figure-number label like "Figure 1:"
.table-number label like "Table 1:"
.listing-number label like "Listing 1:"
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(2). You may overwrite these settings, or
add to them by using the variables ‘org-html-head’ and
‘org-html-head-extra’. You can override the global values of these
variables for each file by using these keywords:
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="style1.css" />
#+HTML_HEAD_EXTRA: <link rel="alternate stylesheet" type="text/css" href="style2.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.
---------- Footnotes ----------
(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.
(2) This style is defined in the constant ‘org-html-style-default’,
which you should not modify. To turn inclusion of these defaults off,
customize ‘org-html-head-include-default-style’ or set ‘html-style’ to
‘nil’ in an ‘OPTIONS’ line.
Info Catalog
org: Text areas in HTML export
org: HTML export
org: JavaScript support