CSS template

From MobileRead
Jump to: navigation, search

A basic CSS template provides a starting point for ePub design. The following CSS contains classes, properties, and values to cover basic book manuscript elements. Edit as needed for your design needs. Mix and match for your design preferences. Note: {text-indent:0em;} has been included in case the .epub file is pushed through Kindle Previewer.

Not all properties, such as those controlling widows and orphans, are supported by all eReaders at this time.

Contents

[edit] Page Margin

@page {
     margin-top:30px;
     margin-bottom:20px;
}
 
body {
     margin-right:30px;
     margin-left:30px;
     padding:0;
}

[edit] Images

img {
     max-width:100%;
     oeb-column-number:1;
     display:inline-block;
}
.video {
     max-width:100%;
}
.noresize {
    width:auto;
    display:block;
}    
div.figure {
     text-align:center;
     text-indent:0;
     margin-top:1em;
}
div.caption {
     font-family:Verdana, Geneva, sans-serif;
     font-size:small;
     text-align:center;
     text-indent:0;
     margin:1em 0;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
}
span.captioncredit {
     font-family:Verdana, Geneva, sans-serif;
     font-size:x-small;
     text-align:center;
     text-indent:0;
     margin:0;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
}
.centered-art {
     font-style:normal;
     font-weight:normal;
     text-align:center;
     margin:1em 0;
     text-indent:0;
}

[edit] Links

[Insert] a color value. 

a {
     font-style:italic;
     color:[insert];
     text-decoration:none;
}

[edit] Spans

span.emphasis {
     font-weight:normal;
     font-style:italic;
}
 
span.strong {
     font-weight:bold;
     font-style:normal;
}
 
span.strongemphasis {
     font-weight:bold;
     font-style:italic;
}
span.applebug {}

[edit] Front Matter

[edit] Cover Page

img.cover-image {
	max-width:100%;
	max-height:100%;
	display:block;
}

[edit] Title Page

.header .titlepage {} /* head group for title page */ 
 
h1.title {
     font-family:Verdana, Geneva, sans-serif;
     font-size:x-large;
     text-align:center;
     font-weight:bold;
     color:[insert];
     margin-top:2em;
     text-indent:0;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
}
 
h1.sub {
     font-family:Verdana, Geneva, sans-serif;
     font-size:medium;
     text-align:center;
     font-weight:bold;
     font-style:italic;
     margin-top:1em;
     text-indent:0;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
}
 
h1.author {
     font-family:Verdana, Geneva, sans-serif;
     text-align:center;
     margin-top:4em;
     text-indent:0;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
}

[edit] Colophon

p.colophon1 {
     font-family:Verdana, Geneva, sans-serif;
     font-size:small;
     text-align:center;
     margin-top:4em;
     text-indent:0;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
}
 
p.colophon2 {
     font-family:Verdana, Geneva, sans-serif;
     font-size:x-small;
     margin:0;
     text-indent:0;
     text-align:center;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
}

[edit] Table of Contents

Only difference currently is level of margin above. Both are centered. 

p.contents1 {
     text-align:center;
     margin-top:1em;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
}
 
p.contents2 {
     text-align:center;
     margin-top:.5em;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
}

[edit] Copyright Page

Entry with or without space above. 

p.copyright1 {
     font-size:x-small;
     margin-top:1em;
     text-align:center;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
}
 
p.copyright2 {
     font-size:x-small;
     margin:0;
     text-align:center;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
}

[edit] Market Copy

p.marketingcopy {
     font-family:Verdana, Geneva, sans-serif;
     font-size:large;
     text-align:center;
     margin-left:2em;
}

[edit] Headings

This is the default styling of all headings to deal with issues such as page breaks splitting headings and hyphenation issues. Later with html5 we will also be able to wrap an h1 and an h2 that are right next to each other in an hgroup tag and also give it properties like page break avoid so that headings do not get separated.

[edit] Base

h1, h2, h3, h4, h5, h6 {
     page-break-after:avoid;
     -webkit-hyphens: none !important; 
     adobe-hyphenate: none !important; 
     -moz-hyphens: none !important; 
     hyphens: none !important;
}

[edit] Parts or Chapters

.header .chapter {} /* head group for chapter titles */ 
 
 
h2.num {
     font-family:Verdana, Geneva, sans-serif;
     text-align:left;
     text-indent:0;
     margin-top:4em;
}
h2.title {
     font-family:Verdana, Geneva, sans-serif;
     text-align:left;
     margin-bottom:2em;
     text-indent:0;
}
h2.titlecenter {
     font-family:Verdana, Geneva, sans-serif;
     text-align:center;
     margin-bottom:2em;
     text-indent:0;
}
h3.num {
     font-family:Verdana, Geneva, sans-serif;
     text-align:left;
     text-indent:0;
     margin-top:4em;
}
h3.title {
     font-family:Verdana, Geneva, sans-serif;
     text-align:left;
     margin-bottom:2em;
     text-indent:0;
}
h3.titlecenter {
     font-family:Verdana, Geneva, sans-serif;
     text-align:center;
     margin-bottom:2em;
     text-indent:0;
}

[edit] Text Headings

/* Level 1 text head */
h4 {
     font-family:Verdana, Geneva, sans-serif;
     text-align:left;
     margin:1em 0 0 0;
     text-indent:2em;
}
/* Level 2 text head */
h5 {
     font-family:serif;
     text-align:left;
     font-weight:bold;
     font-style:italic;
     margin:1em 0 0 0;
     text-indent:2em;
}
/* Level 3 text head */
h6 {
     font-family:serif;
     text-align:left;
     font-weight:bold;
     font-style:italic;
     margin:1em 0 0 0;
     text-indent:2em;
}

[edit] Normal Text

p {
     line-height:1.5em;
     text-align:justify;
     widows:2;
     orphans:2;
     margin:0;
     text-indent:0;
     -webkit-hyphenate-before:3;
     hyphenate-before:3;
     -webkit-hyphenate-after:3;
     hyphenate-after:3;
     -webkit-hyphenate-lines:2;
     hyphenate-lines:2;
}
 
p.first { text-indent:0;} /* First Paragraph not indented */
 
 
p.first:first-letter, span.drop-cap {
	vertical-align:base-line;
	font-size:2em; 
	line-height:1em;
	margin-right:.05em;
	font-weight :700;
} /* Initial Drop Cap in first paragrpah */
 
 
p.ind {
     text-indent:2em;
     margin:0;
}
 
p.indspace {
     text-indent:2em;
     margin-top:1em;
}
 
p.noind {
 
}

[edit] Page Break Woes

I wrap this around h3, h4, h5 + first paragraph of text to keep together on some ereaders: 

div.keeptext {
     page-break-inside:avoid;
     margin:0 !important;
}

[edit] Centered

You may need to use the applebug span around these items for them to work on iBooks. 

p.center {
     text-align:center;
     text-indent:0;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
     margin:0;
}

[edit] Extract

p.extractnormal {
     margin:1em 0 0 1em;
     text-indent:0;
     text-align:left;
}

For extracts that represent text messages, computer text, etc..: 

p.extractcourier {
     font-family:"Courier New", Courier, monospace;
     text-indent:0;
     margin:1em 0 0 1em;
     text-align:left;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
}

For extracts that represent handwriting: 

p.handwriting {
     font-family:"BradleyHandITCTT-Bold", "Comic Sans MS", cursive;
     text-indent:0;
     margin:1em 0 0 1em;
     line-height: 1.5;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
}


a:link {} /* unvisited link */ a:visited {} /* visited link */ a:hover {} /* mouse over link */ a:active {} /* selected link */

[edit] Lists

p.listhead {
     margin:1em 0 0 2em;
     font-weight:bold;
     font-style:normal;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
     page-break-after:avoid;
     text-align:left;
}

Generic list head for ol's or ul's. 

ol {
     margin:1em 0 1em 0;
}
ol.nospace {
     margin:0;
}
ul {
     margin:1em 0 1em 0;
}
ul.nospace {
     margin:0;
}
li {
     line-height:1.5em;
     orphans:2;
     widows:2;
     text-align:justify;
}

[edit] Sidebars

.aside .sidebar {
     margin:1em 0 !important;
     padding:1em 0 !important;
     border:1px solid #178E7D;
     page-break-inside:avoid;
     background-color:[insert];
}
.aside .casestudy {
     margin:1em 0 !important;
     padding:1em 0 !important;
     border:1px solid black;
     background-color:[insert];
     page-break-inside:avoid;
}
p.sbh1 {
     font-family:Verdana, Geneva, sans-serif;
     font-size:small;
     text-align:left;
     font-weight:bold;
     font-style:normal;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
     margin:0 1em;
     color:[insert];
}
p.sbh2 {
     font-family:Verdana, Geneva, sans-serif;
     font-size:medium;
     text-align:left;
     font-weight:bold;
     font-style:italic;
     margin:0 1em 1em 1em;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
     color:[insert];
}
p.sbh3 {
     font-family:Verdana, Geneva, sans-serif;
     font-size:small;
     text-align:left;
     font-weight:bold;
     margin:1em 1em 0 1em;
     text-indent:2em;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
}
p.sbf {
     font-family:Verdana, Geneva, sans-serif;
     font-size:small;
     margin:0 1em;
}
p.sb {
     font-family:Verdana, Geneva, sans-serif;
     font-size:small;
     margin:0 1em;
     text-indent:2em;
}
p.sbextract {
     font-family:Verdana, Geneva, sans-serif;
     font-size:small;
     margin:1em;
}
li.sbol {
     font-family:Verdana, Geneva, sans-serif;
     font-size:small;
     margin:0 1em 0 0;
}
li.sbul {
     font-family:Verdana, Geneva, sans-serif;
     font-size:small;
     margin:0 1em 0 0;
}

[edit] Tables

table {
     border-collapse:collapse;
     margin:1em 0 !important;
     page-break-inside:avoid;
     width:100%
}
td {
     font-family:Verdana, Geneva, sans-serif;
     font-size:small;
     text-indent:0;
     text-align:left;
     -webkit-hyphens:none;
     -moz-hyphens:none;
     hyphens:none;
     page-break-inside:avoid;
     border-bottom:1px solid [insert color];
     vertical-align:top;
     padding:5px !important;
}
td.tt {
     font-size:medium;
     font-weight:bold;
     text-align:center;
     border-bottom-style:none;
     color:[insert];
}
td.tch1 {
     font-weight:bold;
     text-align:center;
     vertical-align:bottom;
     background-color:[insert];
     border-bottom-style:none;
}
td.tch2 {
     font-weight:bold;
     font-style:italic;
     vertical-align:bottom;
}
td.tfn {
     font-size:x-small;
     border-bottom-style:none;
}

[edit] Recipes

p.recipe-title {
     font-weight:bold;
     font-size:x-large;
     line-height:normal;
     text-align:center;
     margin:1em 0 0em 0 !important;
     text-indent:0;
     -webkit-hyphenate-lines:0;
     -webkit-hyphens:none;
     hyphens:none;
     page-break-before:always;
     color:[insert];
}
p.recipe-message {
     font-style:italic;
     text-align:center;
     margin-top:.5em;
     -webkit-hyphenate-lines:0;
     -webkit-hyphens:none;
     hyphens:none;
}
p.recipe-yield {
     font-weight:bold;
     text-align:center;
     margin-top:1em;
}
p.recipe-ing-head {
     font-weight:bold;
     text-align:center;
     margin-top:1.5em;
}
p.recipe-ingredients {
     text-align:center;
     -webkit-hyphenate-lines:0;
     -webkit-hyphens:none;
     hyphens:none;
     -webkit-hyphenate-lines:0;
     -webkit-hyphens:none;
     hyphens:none;
}
p.recipe-instructions {
     margin-top:1em;
     text-align:center;
}
ol.recipe {
     font-weight:bold;
     color:[insert];
     margin-top:1em;
}
/* this makes the recipe step number bold and a color for a little zip */
ol p.recipestep {
     line-height:1.5em;
     text-align:justify;
     widows:2;
     orphans:2;
     -webkit-hyphenate-before:3;
     hyphenate-before:3;
     -webkit-hyphenate-after:3;
     hyphenate-after:3;
     -webkit-hyphenate-lines:2;
     hyphenate-lines:2;
     color:[insert];
     margin-top:.5em;
}
div.recipesidebarbox {
     background-color:[insert];
     margin:0 0 2em 0 !important;
     padding:.5em !important;
     page-break-inside:avoid;
}
p.recipesidebarhead {
     font-family:Verdana, Geneva, sans-serif;
     font-weight:bold;
     font-size:small;
     margin:0 !important;
     text-align:left;
     -webkit-hyphenate-lines:0;
     -webkit-hyphens:none;
     hyphens:none;
     page-break-after:avoid;
}
p.recipesidebar {
     font-family:Verdana, Geneva, sans-serif;
     font-size:small;
}

[edit] Tables

table.recipe {
     width:100%;
     margin:2em 0 0 0;
     page-break-inside:avoid;
}
th.recipe {
     font-family:Verdana, Geneva, sans-serif;
     font-size:x-small;
     line-height:normal;
     margin:0 !important;
     padding:.5em !important;
     text-align:left;
     font-weight:bold;
     -webkit-hyphenate-lines:0;
     -webkit-hyphens:none;
     hyphens:none;
     page-break-after:avoid;
     background-color:[insert];
}
td.recipestat {
     font-family:Verdana, Geneva, sans-serif;
     font-size:x-small;
     line-height:normal;
     margin:0;
     padding:.5em .5em 0 .5em !important;
     text-align:left;
     -webkit-hyphenate-lines:0;
     -webkit-hyphens:none;
     hyphens:none;
     width:auto;
}
Retrieved from "http://wiki.mobileread.com/wiki/CSS_template"
Personal tools
Namespaces
Variants
Actions
Navigation
MobileRead Networks
Toolbox
Advertisement