Ejemplo de clase #sep3 • 2013DW - Diseño web

dabblet.css

/**
 * Ejemplo de clase #sep3 • 2013DW - Diseño web
 * En este ejemplo 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:fixed;bottom:0;padding:0;border-top:1px dotted #555;width:100%;}

/**
 * En este ejemplo, usamos un tipo de selector diferente:
 * 
 * Buscamos cualquier elemento cuyo atributo `class`
 * incluya `.derechos` y de ahí seleccionamos todos
 * los elementos `p`.
 */
.derechos p{padding:0 0 0 1em;}

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>

<div class="derechos">
  <p>Copyright ©2013 Roberto Valencia</p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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