Comillas, comillas, comillas

La etiqueta <blockquote> </blockquote> la utilizamos para destacar una cita textual. Su sintaxis es sencilla:

<blockquote>
   ....... texto .......
</blockquote>

Por lo general, tratamos de diferenciarla gráficamente del resto de la página y, por defecto, la mayoría de los navegadores las muestran con un margen izquierdo y con una fuente especial; pero, como es algo que solemos utilizar con cierta frecuencia, lo mejor es definir algún tipo de estilo CSS que nos permita incluirlas con facilidad.

Las posibilidades son muchas y no hace falta limitarse a un modelo, podemos crear varias clases diferentes y utilizarlas según nuestra conveniencia. Los estilos, los agregamos en nuestra plantilla, antes de la etiqueta </head>.

La forma más sencilla es sólo utilizar colores y bordes:

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

ESTILO CSS:

<style>
blockquote.cita1 {
   width:400px;
   margin: 10px 0 10px 50px;
   padding: 10px;
   text-align: justify; 
   font: 14px/22px normal helvetica, sans-serif;
   color: #FFFFFF;
   background: transparent;
   border-left: 4px solid #FF9933;
} 
</style>

CODIGO HTML:

<blockquote class="cita1">
   ....... contenido .......
</blockquote>

Otra posibilidad es utilizar una imagen como fondo. En este caso, la colocamos como propiedad background de la etiqueta:

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

ESTILO CSS:

<style>
blockquote.cita2 {
   width:400px;
   margin: 5px;
   padding: 18px 10px 18px 70px;
   text-align: justify;
   font: 14px/20px italic Times, serif;
   background: #DADADA url(URL_imagen) no-repeat center left;
   border-top: 1px solid #FFFFFF;
   border-bottom: 1px solid #FFFFFF;
} 
</style>

CODIGO HTML:

<blockquote class="cita2">
   ....... contenido .......
</blockquote>

Por último, la más compleja es agregar dos imágenes, una en la parte superior y otra en la parte inferior. Si decidimos hacer esto, el problema a resolver es que necesitamos mostrar dos imágenes en una sola etiqueta con lo cual necesitamos insertar un bloque dentro de otro.

<blockquote>
   <span>
      ....... texto .......
   </span>
</blockquote>

En la etiqueta blockquote colocaremos el fondo que se verá en la parte superior y en la etiqueta span, el fondo que se verá en la parte inferior. De esta manera, de forma general, las propiedades serán:

background: color url(URL_imagenSuperior) no-repeat left top;

background: color url(URL_imagenInferior) no-repeat right bottom;

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

ESTILO CSS:

<style>
blockquote.cita2 {
   width:400px;
   padding: 30px 20px 10px 30px;
   text-align: justify;
   font-family: Georgia;
   font-style: italic;
   font-size: 15px;
   color: #000000;
   background: #FFFFFF url(URL_imagenSuperior) no-repeat 5% 5%;
} 
blockquote.cita3 span {
   display: block;
   padding: 15px 10px 15px 10px;
   background: url(URL_imagenInferior) no-repeat bottom right;
} 
</style>

CODIGO HTML:

<blockquote class="cita2">
   <span>
      ....... contenido .......
   </span>
</blockquote>

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

ESTILO CSS:

<style>
blockquote.cita4 {
   width:400px;
   margin: 5px ;
   padding: 20px 10px 10px 10px;
   text-align: justify;
   font: 14px/20px italic Times, serif;
   background: #FAEBBC url(URL_imagenSuperior) no-repeat top left;
   border-top: 1px solid #e1cc89;
   border-bottom: 1px solid #e1cc89;
} 
blockquote.cita4 span {
   display: block;
   background: transparent url(URL_imagenInferior) no-repeat bottom right;
}
</style>

CODIGO HTML:

<blockquote class="cita2">
   <span>
      ....... contenido .......
   </span>
</blockquote>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

ESTILO CSS:

<style>
blockquote.cita5 {
  width:400px;
  margin: 5px;
  padding: 5px 10px 5px 70px;
  text-align: justify;
  font: 12px/18px normal "Courier New", sans-serif;
  color: #FFFFFF;
  background: #000000 url(URL_imagenSuperior) no-repeat top left;
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
} 
blockquote.cita5 span {
   display: block;
   padding-right: 50px;
   background: transparent url(URL_imagenInferior) no-repeat bottom right;
}
</style>

CODIGO HTML:

<blockquote class="cita2">
   <span>
      ....... contenido .......
   </span>
</blockquote>

REFERENCIAS:

www.w3.org

css-tricks.com