Custom styling

To custom style you ebook you can provide an extra CSS file that is included after the spell default CSS template, so every style can be overwritten. Be aware, that common ebook readers only support a small subset of what is usually possible with CSS.

Incuding custom CSS files

Custom CSS files can be included via command line while converting your Markdown to EPUB.

Use this as an example how this would be done with the provided example.md on windows:

..\spell.exe -s test.css example.md example.epub

Default CSS

This is the default CSS inserted automatically in every ebook. Use this as a reference for selectors inside the book:

// Default CSS
body {
	font-family: Palatino;
}
h1, h2, h3, h4, h5, h6 {
	font-family: Helvetica;
	font-variant: small-caps;
	text-align: left;
	color: #666666;
	page-break-after: avoid;
	page-break-inside: avoid;
}
h1 {
	border: 1px solid #888;
	border-width: 1px 0;
	text-align: center;
	width: 75%;
	padding: 0.5em;
	margin: 2em auto 4em auto;
}
h2 {
	border: 1px solid #888;
	border-width: 0 0 1px 0;
	padding: 0.5em 0;
}
p.firstparagraph {
	text-indent: 2em;
}
p {
	text-indent: 1em;
}
p, li {
	margin-top: 0.3em;
    margin-bottom: 0.3em;
}
hr {
	border: 1px solid #444;
	height: 2px;
	width: 25%;
	margin: 3em auto 3em auto;
}
blockquote {
	margin-left: 3em;
	margin-right: 3em;
	padding: 1em;
	page-break-before: avoid;
	page-break-inside: avoid;
}
blockquote.cite {
	font-size:140%;
	border: 1px solid #888;
	border-width: 1px 0;
	padding: 0.5em;
	position: relative;	
}
blockquote.note, blockquote.info, blockquote.warn {	
	border: 1px solid #888;
	border-width: 1px;
	border-radius: 0.5em;
	padding: 1em;
	position: relative;	
}
blockquote.cite::before {
	content: url("...");
	position: absolute;
	width: 2em;
	height: 2em;
	top: -1em;
	left: -1em;
  	z-index: 1;
}
blockquote.note::before {
	content: url("...");
	position: absolute;
	width: 2em;
	height: 2em;
	top: -0.8em;
	left: -0.8em;
  	z-index: 1;
}
blockquote.info::before {
	content: url("...");
	position: absolute;
	width: 2em;
	height: 2em;
	top: -0.8em;
	left: -0.8em;
  	z-index: 1;
}
blockquote.warn::before {
	content: url("...");
	position: absolute;
	width: 2em;
	height: 2em;
	top: -0.8em;
	left: -0.8em;
  	z-index: 1;
}
blockquote.code {
	font-family: monospace, monospace;
	background-color: #ccc;
	border-radius: 0.5em;
	text-align: left;
}
span.code {
	font-family: monospace, monospace;
	background-color: #aaa;
	border-radius: 2px;
	padding: 0.1em;	
}