Las etiquetas q y blockquote se utilizan para dar formato a las citas. La etiqueta q se utiliza para resaltar citas cortas dentro del texto, es un elemento en línea. La etiqueta blockquote permite crear un bloque separado con una cita grande.

La cita se puede resaltar del texto principal con una fuente o color de texto diferente. Antes y después del contenido de la etiqueta q, el navegador coloca automáticamente comillas. Las comillas se pueden anular con la propiedad CSS quotes.

<p>Como dijo <cite>John Lennon</cite>, <q>La vida es lo que te sucede mientras haces planes</q>, y es difícil discutir con eso.</p>

CSS:

p {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 46px;
  color: #333333;
}
q {
  quotes: '«' '»';
  color: #744ce6;
}
Estilo CSS básico de cita
Estilo CSS básico de cita
💪
Consejo: No utilices la etiqueta para otros tipos de texto, como traducciones o bromas, ya que no es semántico.

La etiqueta blockquote es adecuada para citas que se destacan en una sección separada. Ya no es solo un elemento de texto, sino también un elemento para marcar secciones. Esto significa que la cita puede tener su propio título, encabezado, pie de página y elementos de texto.

Características del Formato de Citas

Junto con la etiqueta blockquote, , se utiliza el atributo cite, que también puede actuar como una etiqueta independiente. Tanto el atributo como la etiqueta se utilizan para indicar la fuente de la cita, un enlace al trabajo o al autor. Sin embargo, el atributo cite no es visible en la página; es necesario para cumplir con los derechos de autor.

<blockquote cite='https://unaweb.net'>Si las puertas de la percepción se limpiaran, todo se le aparecería al hombre como realmente es: infinito.</blockquote>

CSS:

blockquote {
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 28px;
  color: #333333;
}

Ejemplo de cita formateada con etiqueta cite:

Estilo CSS para cita con etiqueta cite
Estilo CSS para cita con etiqueta cite
<blockquote class='quote'>
  <p>La libertad no vale nada si no incluye la libertad de equivocarse.</p>
  <cite>Mahatma Gandhi</cite>
</blockquote>

CSS:

.quote {
  padding-left: 50px;
  border-left: 4px solid #e2e2e2;
  font-family: 'Georgia', 'Times New Roman', serif;
}
.quote p {
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 28px;
  color: #333333;
}

.quote cite {
  font-style: italic;
  font-weight: normal;
  font-size: 22px;
  line-height: 28px;
  color: #aaaaaa;
}

Es importante no confundir una cita con un pensamiento acentuado importante en el texto. Tales pensamientos destacados no tienen autoría; están destinados a crear una estructura de texto. Se recomienda formatearlos como un párrafo separado <p> con su propio estilo de fuente o resaltar la oración con la etiqueta <strong>.

Formas de formatear citas

La opción de formato estándar y común es cambiar la fuente, el color del texto, aumentarlo o cambiar el estilo. También puedes cambiar la familia de fuentes, el interlineado y poner las letras en mayúsculas.

Formateo de fuente y estilo de citas HTML
Formateo de fuente y estilo de citas HTML
<blockquote class='quote'>
  <p>Todo está en la mente. El pensamiento es el principio de todo. Y los pensamientos se pueden controlar. Y por eso el principal asunto de la superación personal es trabajar en los pensamientos.</p>
  <cite>León Tolstoi</cite>
</blockquote>

CSS:

.quote {
  font-family: 'Montserrat', 'Arial', sans-serif;
  text-align: center;
}
.quote p {
  font-style: italic;
  font-weight: normal;
  font-size: 20px;
  line-height: 30px;
  color: #744ce6;
}
.quote cite {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  color: #aaaaaa;
}

Otra opción es formatear la cita como un bloque centrado usando una fuente capitular:

Cita con texto capitulado
Cita con texto capitulado
<blockquote class='capital-quote'>
  <p>Recuerda que no lograr el éxito, a veces, también es una gran suerte.</p>
  <footer>Dalái Lama</footer>
</blockquote>

CSS:

.capital-quote {
  text-align: center;
  font-family: 'Georgia', serif;
  font-size: 24px;
  margin: 10px 0;
}
.capital-quote p::first-letter {
  font-size: 48px;
  font-weight: bold;
}
.capital-quote footer {
  margin-top: 10px;
  text-align: center;
  font-style: italic;
}

Bordes o marcos

A menudo, se agregan bordes o marcos al formato estándar.

<blockquote class='quote'>
  <p>Algunas cosas pueden captar tu atención, pero concéntrate mejor en aquellas que se apoderan de tu corazón.</p>
  <cite>Proverbio indio</cite>
</blockquote>

CSS:

.quote {
  width: 740px;
  padding: 10px 50px;
  border-right: 8px solid #d5d5d5;
  border-left: 8px solid #d5d5d5;
  font-family: 'Merriweather', 'Times New Roman', serif;
  font-style: normal;
  font-weight: normal;
  color: #333333;
}
.quote p {
  margin-top: 0;
  font-size: 27px;
  line-height: 50px;
}
.quote cite {
  font-size: 16px;
  line-height: 30px;
  font-style: normal;
}

Además de un borde simple, puedes crear un borde tridimensional con sombras:

<blockquote class='styled-quote'>
  <p>No caerse nunca no es el mayor mérito en la vida. Lo principal es levantarse cada vez.</p>
  <footer>Nelson Mandela</footer>
</blockquote>

CSS:

.styled-quote {
  border: none;
  box-shadow: 3px 4px 6px rgba(0, 0, 0, 0.2);
  padding: 10px;
  margin: 10px 0;
  background-color: #fff;
}
.styled-quote p {
  font-size: 16px;
  font-style: italic;
}
.styled-quote footer {
  margin-top: 10px;
  text-align: right;
  font-style: normal;
  font-weight: bold;
}
Ejemplo con borde tridimensional y sombras
Ejemplo con borde tridimensional y sombras

Sangría inversa

Otra opción es resaltar la cita con una sangría inversa en el texto.

<article>
  <p>La obra de Mark Twain abarca una amplia gama de géneros, como el humor, la sátira, la ciencia ficción filosófica y el periodismo, entre otros.</p>
  <p class='accent'>
    "Nos gustan las personas que nos dicen con valentía lo que piensan, siempre y cuando piensen como nosotros". Mark Twain.
  </p>
  <p>Ernest Hemingway señaló que toda la literatura estadounidense moderna surgió de un libro de Mark Twain llamado "Las aventuras de Huckleberry Finn".</p>
</article>

CSS:

p {
  padding-left: 50px;
  font-family: 'Merriweather', 'Times New Roman', serif;
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  line-height: 27px;
  color: #333333;
}
.accent {
  padding-left: 0;
  font-family: 'Roboto', 'Arial', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 34px;
  color: #333333;
}
Cita con sangría inversa
Cita con sangría inversa

Color de fondo

Si necesitas resaltar la cita con contraste, agrega un fondo.

<p><blockquote>Nuestra mente lo es todo. Nos convertimos en aquello en lo que pensamos.</p> <cite>Buda</cite></blockquote>.

CSS:

blockquote {
  background-color: #e3b071;
  padding: 10px;
}

En el ejemplo, se establece un color de fondo para el bloque de la cita y se agregan pequeños márgenes alrededor del texto.

Para que la cita se vea más interesante, puedes crear un fondo como un bloque de color con esquinas redondeadas:

Cita con color de fondo en bloque
Cita con color de fondo en bloque
<blockquote class='colorful-quote'>
  <p>Detrás de cada empresa exitosa hay una decisión valiente tomada en algún momento.</p>
  <footer>Peter Drucker</footer>
</blockquote>

CSS:

.colorful-quote {
  background-color: #ffcc00;
  border-radius: 10px;
  padding: 15px;
  margin: 10px 0;
}
.colorful-quote p {
  font-size: 20px;
  font-style: italic;
  color: #fff;
}
.colorful-quote footer {
  margin-top: 10px;
  text-align: right;
  font-weight: bold;
  color: #fff;
}

¿Algo más en que podamos ayudarnos? Déjanos saber en los comentarios.

Categorizado en:

CSS,