Cajas de texto

dabblet.css

/**
* Cajas de texto
* En esta sección, van los selectores y propiedades CSS
* @author Robert Valencia <http://robertvalencia.com>
*/

/** Reset de CSS
* Por lo general hay ciertas reglas de CSS que usamos 
* para ‘resetear’ algunos valores y así tener un punto
* de partida más apropiado a nuestras necesidades.
*/
body{margin:0;padding:0;}


/* Propiedades para el elemento `body` */
body{ background-color:gray; }

/* 
* Propiedades para la caja verde, 
* la cual es un `div` con un atributo de clases `verde-limon` y `caja`
*
* las siguientes son formas de declarar el fondo verde 
* al mismo elemento div:
*
* div{ background-color:limegreen;} 
* .verde-limon{ background-color:limegreen;}
*/
div{background-color:red;}

/*
* Propiedades para la clase `caja` 
* aplica un margen interno de un cuadratín,
* un ancho máximo de 50% y lo centra en la ventana.
*/
.caja{
	padding:1em;
	width:50%;
	margin:5em auto;
}

/* Propiedades para el versículo */
.versiculo { color: red ; text-align:center;font-family:Georgia,serif;font-size:23px;line-height:160%;}	
#verso-1{color:gray;}
#verso-2{color:rgba(23,29,59,1);}

/* 
* Propiedades para el elemento `cite`, 
* alineándolo a la derecha y con un tamaño más pequeño.
*/
cite{text-align:right;display:block;font-size:.67em;}

/* Propiedades para el elemento de derechos */
.derechos{position:absolute;bottom:10px;padding:.5em 0 0 10px;border-top:1px dotted #555;width:100%;}

dabblet.html

<div class="caja verde-limon">
	<p id="verso-1" class="versiculo">
		Todo lo puedo en Cristo que me fortalece
		<cite>—Filipenses 4:13</cite>
	</p>

</div>

<div class="caja rosita">
	<p id="verso-2" class="versiculo">
		Jesús lloró.
		<cite>—Juan 11:35</cite>
	</p>
	
</div>
<p class="derechos">Copyright ©2013 Roberto Valencia</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"140","seethrough":"","prefixfree":"1","page":"all"}