Using CSS in Ulysses

Ulysses 1.1 ‐ 2013-10-25

CSS (Cascading Style Sheet) files allow you to style web pages and eBooks using simple declarations. Ulysses comes with a number of pre-installed styles which you can just use right-away. To tweak these styles, simply Ctrl-click them and select “Duplicate” from the menu. Alternatively, you can drag your own CSS files into the style preferences table.

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.

Generally, you can use CSS for both HTML and ePub, since the latter is also based on HTML and CSS technologies. However, please keep in mind that eBook readers already do a lot a styling for you (for instance, paragraphs are already justified).

Below, you can find some CSS code snippets for things you might or might not want to tweak when exporting to HTML or 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?

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

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

The first line change 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

Which HTML tag is used for the markup definition xy?

Have a look at our definition-to-HTML tag mapping reference for HTML and ePub.