Styles & Themes

HTML Styles

| By Philip

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 HTML documents 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 web pages 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 HTML.

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

…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; }

See also: text-align

Tag Reference for HTML Export

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

Structure

Markup DefinitionHTML OutputCSS Selector
Heading 1<h1>…</h1>h1
Heading 2<h2>…</h2>h2
Heading 3<h3>…</h3>h3
Heading 4<h4>…</h4>h4
Heading 5<h5>…</h5>h5
Heading 6<h6>…</h6>h6

 

Paragraph

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

Grouping

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

Text

Markup DefinitionHTML OutputCSS Selector
Strong<strong>…</strong>strong
Emphasis<em>…</em>em
Marked(Unchanged) 
Delete(Deleted) 
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
Annotation(Deleted) 

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 class="footnote">Index</a>a/sup>
Reference: <ol id="footnotes"><li>…</li></ol>
sup, a.footnote
ol#footnotes

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 for styling 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 26, 2019.

HTML Styles

Customize the look of your exported HTML document with CSS files