Learn by Sharing

To understand the relationship between CSS and the final result there is no substitute for trial and error. Designers must first understand how a ‘web native’ technology — CSS — applies to page based media (books). This paradigm appears simple but it requires a slight re-alignment of how book designers think about designing books, and to do this designers must try the process and persevere until they succeed. After that initial success things become easier.

Probably the best way to start is to take an existing book and look at someone else's CSS, then change it and see what happens. Generating a PDF takes anywhere from half a minute to a few minutes so this is a pretty quick method for seeing how CSS effects the layout of the book. For experimenting visit the following page:

http://collaborative-futures.org/

At the bottom of this page you will find a link to the CSS used for the print version of the second edition of this book. You can see the CSS states:

/* Main CSS File: */
@import url("http://collaborative-futures.org/material/styles.css");

/* Uncomment based on the book size you export: */

/* A5 */
/* @import url("http://collaborative-futures.org/material/size/a5-hacks.css"); */

/* 5.5"x8.5" */
/* @import url("http://collaborative-futures.org/material/size/5.5x8.5-hacks.css");*/

This is CSS syntax that imports the ‘real’ CSS used which can be found here:

http://collaborative-futures.org/material/styles.css

Copy this CSS, change it, and enter it in the CSS text field of Booktype, then try exporting the book again. Experiment with changing the CSS and see what happens.

The following are some examples you may wish to try out. 

List Example

ol { font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:grey;  }
ol li p { padding:8px; font-style:normal; color:black; border-left: 1px solid #999; }
ol li p em { display:block; }

Definition List Example

dl {
    overflow: hidden;
    padding: 0;
}
dl dt {
    clear: both;
    float: left;
    padding-right: 10px;
    width: 160px;
}
dl dd {
    margin-left: 170px;
    padding-left: 20px;
}

dl dt {
    padding-bottom: 5px;
    padding-top: 5px;
    position: relative;
    text-transform: uppercase;
}
dl dd {
    border-color: #DDDDDD;
    border-style: solid;
    border-width: 0 0 0 1px;
    padding-bottom: 5px;
    padding-top: 5px;
}
dl dt:before {
    border-top: 1px solid #DDDDDD;
    content: "";
    position: absolute;
    right: -15px;
    top: 0;
    width: 30px;
}
dl dt:after {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 6px 6px 6px 6px;
    content: "";
    height: 5px;
    position: absolute;
    right: -3px;
    top: -3px;
    width: 5px;
}
dl dt:first-child:before, dl.definition dt:first-child:after {
    display: none;
}

Table Examples

First example:

table
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
}
table th
{
	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	background: #b9c9fe;
	border-top: 4px solid #aabcfe;
	border-bottom: 1px solid #fff;
	color: #039;
}
table td
{
	padding: 8px;
	background: #e8edff;
	border-bottom: 1px solid #fff;
	color: #669;
	border-top: 1px solid transparent;
}
table tr:hover td
{
	background: #d0dafd;
	color: #339;
} 

Second example:

 table
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	background: #fff;
	margin: 45px;
	width: 480px;
	border-collapse: collapse;
	text-align: left;
}
table th
{
	font-size: 14px;
	font-weight: normal;
	color: #039;
	padding: 10px 8px;
	border-bottom: 2px solid #6678b1;
}
table td
{
	color: #669;
	padding: 9px 8px 0px 8px;
}
table tbody tr:hover td
{
	color: #009;
}

Image Example 

 IMG {  -webkit-border-radius: 5px; border-radius: 5px; } 

h1
{
     font-size: 36px;
     border-top: 1px solid #333333;
     border-bottom: 1px solid #333333;
     line-height: 1em;
     font-family: 'Times New Roman';
} 

h1{
        font-family:Georgia,serif;
	color:#4E443C;
	font-variant: small-caps;
	text-transform: none;
	font-weight: 100;
	margin-bottom: 0;
} 

p {
font-size: 1em;
line-height: 1.25em;
margin: 0;
text-align: left;
}
p + p {
text-indent: 2.5em;
}
p:first-letter {
font-size: 3.5em;
line-height: 1em;
font-weight: 400;
float: left;
margin: 0 0.107em 0 0;
}
p:first-line {
font-weight: 800;
}
p + p:first-letter {
font-size: 1em;
line-height: 1.25em;
float: none;
margin: 0;
} 

p {
font-size: 1em;
line-height: 1.25em;
margin: 0.625em 0;
text-align: justify;
}
p:first-letter {
font-size: 3.5em;
line-height: 1em;
}
p + p:first-letter {
font-size: 1em;
line-height: 1.25em;
}