Styles & Themes

ePub Styles

| By Alexander der Große

Export styles let you customize the look of your exported Ulysses documents. Ulysses comes with a number of built-in styles for each export format, but as a Mac user, you can also create your own. You can style ebooks just using regular CSS files.


Table of contents (use the links to jump directly to the respective article section):


Using CSS in Ulysses

CSS (Cascading Style Sheet) files allow you to style ebooks using simple declarations. There is a myriad of web resources on CSS. For a general introduction, the CSS tutorial from W3Schools explains the basics and all important properties. It also includes a reference. For some interesting tricks and hacks, have a look at the Snippets section of CSS-Tricks.

For editing CSS, you can use just about any text editor, such as TextMate, Sublime, Chocolat or BBEdit/TextWrangler.

In general, we recommend starting with one of Ulysses’ built-in styles. Open “Ulysses” › “Preferences” and switch to the Styles tab. Right-click on a style and select “Duplicate” to create a copy. Right-click the copy again and select “Edit” to view and modify it in your favorite text editor. You can then use the new style in Quick Export or during Export Preview.

Below, you can find some CSS code snippets for things you might or might not want to tweak when exporting to ePub.

How do I…

…indent all paragraphs except the first?

Replace the settings for paragraph (i.e., all “p” selectors) with the following code snippet:

p { margin: 0; }
p + p { text-indent: 1.5em; }
The first line sets the spacing around paragraphs to zero. The second line indents all paragraphs which have a paragraph in front of them by 1.5 em.

See also: text-indent margin

…change the way lists look?

Just add a “list-style-type” property, as follows:

ul { list-style-type: square; }
ol { list-style-type: upper-roman; }

The first line changes the style of unordered (i.e., itemized) lists from circles (the default) to squares. The second line changes the style of ordered lists from decimal numbering to upper-case Roman numbering.

See also: list-style-type

…use the default styling for dividers in the “Default” template for ePub?

Remove all lines starting with the “hr” (horizontal row) selector from the CSS file.

…change the font size and spacing between the headings?

Open the CSS files and look out for the properties “font size” and “margin-top”/“margin-bottom” in the “h1”-“h6” selectors. For instance, the following sets the font-size to 1.5 em and the margin at the top and bottom to 0.5 em for level 2 headings:

h2 {
    font-size: 1.5em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;

See also: font-size, margin-top, margin-bottom

…justify the text of paragraphs?

Add the following line to your “p” selector:

p { text-align: justify; }

Please note that in the case of ePub, most readers already justify text automatically.

See also: text-align


Tag Reference for ePub export

The following table gives a mapping from Ulysses markup definitions to HTML tags used in ePub export.
Ellipses (“…”) are replaced with the text inside the tags.


Markup DefinitionHTML OutputCSS Selector
Heading 1<h1 class="chapter-title">…</h1>h1.chapter-title
Heading 2<h2 class="section-title">…</h2>h2.section-title
Heading 3<h3>…</h3>h3
Heading 4<h4>…</h4>h4
Heading 5<h5>…</h5>h5
Heading 6<h6>…</h6>h6


Markup DefinitionHTML OutputCSS Selectors
Divider<hr />hr
Code Block<pre><code>…</code></pre>pre, code
Raw Source(Unchanged) 


Markup DefinitionHTML OutputCSS Selectors
Ordered List<ol><li>…</li></ol>ol, li
Unordered List<ul><li>…</li></ul>ul, li
Block Quote<blockquote>…</blockquote>blockquote


Markup DefinitionHTML OutputCSS Selector
Inline Comment(Deleted) 
Inline Code<code>…</code>code
Inline Raw Source(Unchanged) 

Attributed Text

Markup DefinitionHTML OutputCSS Selector
Link<a href="URL" title="Title">…</a>a

Text Objects

Markup DefinitionHTML OutputCSS Selectors
Image<img src="URL" title="Title" alt="Desc." />img
Video<video src="URL" title="Title" />video
FootnoteLink: <sup><a epub:type="noteref" class="footnote">Index</a></sup>
Reference: <aside epub:type="footnote">…</aside>
sup, a.footnote

Syntax Highlight

If a programming language is set for a code block, the <code> element will have two additional CSS classes:

  • code-highlighted: Specifies that a code block has a syntax highlight in general.
  • code-LANGUAGE: Specifies that a code block is highlighted for a specific language (e.g. “code-swift”).

Inside the <code> element, Ulysses will place highlighted text inside <span> elements. All highlighted elements will have two CSS classes:

  • syntax-all: A class that is applied to all highlighted elements. It allows to style highlighted elements in general (e.g. to make all highlighted elements bold).
  • syntax-TYPE: A class that is specific to the type of highlight. 

Here is an overview of the CSS classes used to highlight code syntax. You can also download an example document that contains all available syntax classes.

Syntax ClassMeaning
syntax-allThis class is applied to highlighted elements in general.
syntax-boldThis class is applied to bold formatting (Markdown only).
syntax-changedThis class is applied to content marked as modified (e.g., Diff syntax).
syntax-commentThis class is applied to comments in the code.
syntax-constantThis class is applied to constants.
syntax-deletedThis class is applied to content marked as deleted (e.g., Diff syntax).
syntax-entityThis class is applied to entities and symbols (e.g., type names, function names, attributes).
syntax-errorThis class is applied to invalid syntax.
syntax-escapeThis class is applied to escaped characters in strings.
syntax-headingThis class is applied to headings (Markdown only).
syntax-insertedThis class is applied to content marked as inserted (e.g., Diff syntax).
syntax-italicThis class is applied to italic formatting (Markdown only).
syntax-keywordThis class is applied to language-specific keywords.
syntax-linkThis class is applied to hyperlinks (Markdown only).
syntax-listThis class is applied to lists (Markdown only).
syntax-parameterThis class is applied to function parameters (only some languages).
syntax-stringThis class is applied to text strings.
syntax-tagThis class is applied to tags (only HTML, XML).
syntax-variableThis class is applied to variables.

 This article was last updated on February 27, 2019.

ePub Styles

Style the layout of your ebooks with regular CSS files