Aprendizaje compartido

Para entender la relación entre CSS y el resultado final, no hay un mejor método que la prueba y error. Primero, los diseñadores deben entender como una tecnología nativo de la web — CSS — se aplica a un medio basado en páginas (libros). Este paradigma parece sencillo pero requiere un leve ajuste en la lógica de los diseñadores de libros, y para lograrlo, ellos deben probar el proceso y perseverar hasta conseguirlo. Después del primer éxito, las tareas se vuelven más fáciles.

Quizás la mejor manera de empezar es tomando un libro existente para revisar el CSS de otra persona, y luego cambiarlo para ver qué pasa. La generación de archivos en PDF toma un poco más de medio minuto, así que este es un método rápido para visualizar los efectos del CSS en la diagramación del libro. Para experimentar, visita la página: http://collaborative-futures.org/ 

Al final de esta página, hallarás un vínculo hacia el CSS que usa la versión impresa de la segunda edición del libro - el mismo libro en que estás trabajando. Puedes ver que el CSS dice:

/* 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");*/

Este es un CSS de sintaxis que CSS que importa 'el verdadero' CSS utilizado que puede hallarse aquí:

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

Copia este CSS, cámbialo, ingrésalo en el campo de textos CSS para Booktype y vuelve a intentar exportarlo. Experimenta con cambios en el CSS y observa qué sucede...

Estos son algunos ejemplos que quizás quieras probar. 

Ejemplo de lista

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

Ejemplo de lista de definiciones

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

Ejemplos de tablas

Primer ejemplo:

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

Segundo ejemplo:

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

Ejemplo de imagen 

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