Cajas de colores con HTML y CSS para destacar textos

En este post aprenderemos cómo diseñar cajas de colores con HTML y CSS para destacar textos. Un tema que del que hablé en el curso CSS, pero sin asignarle una utilidad concreta como haré ahora.

Por cierto, si te interesa aprender a personalizar el estilo de tu web, te dejo el enlace al punto de partida y primera parte de la guía CSS.

En este caso, usaremos las cajas de colores en HTML y CSS para destacar los textos más importantes en nuestras webs y blogs. De esta manera conseguiremos salir del típico artículo plano, en el que tanto los textos importantes como los de relleno tienen el mismo aspecto.

Esta es una técnica muy útil para crear textos destacados, que también podrás implementar en tus Call to Action o CTA, las famosas llamadas a al acción en cristiano 😉

¿Por qué destacar textos con cajas de colores?

Sabrás que el tiempo de estancia o permanencia en una página es un factor de posicionamiento. Por lo que es probable que, cuanto más a gusto esté el lector en un post más tiempo pasará en esa web.

Además, seguro que el mensaje que quieras trasladar le llegará mucho mejor 😉

Todos sabemos que los usuarios escanean y que, en general, no se detienen a leer el texto completo. De hecho, yo mismo me salto los párrafos largos, porque entiendo que el autor se habrá preocupado de destacar aquellos importantes.

Aunque por increíble que parezca, no siempre es así 😳

¿No te encuentras con post que no tienen negritas o puntos y aparte?

Qué menos que escribir párrafos cortos, añadir algunas negritas, cursivas y dividir en apartados para hacer la lectura más agradable.

¡Si al final te cuesta más o menos lo mismo! 🙄

Sin embargo, si aún siguiendo estas reglas básicas de SEO OnPage, ves que no es suficiente o que algunos de tus párrafos necesitan algo más de amor o atención, puedes diseñar cajas de colores HTML con CSS para destacar lo textos.

¿Cómo hacer cajas de colores en HTML y CSS?

La técnica para crear cajas de colores en tu web es bastante sencilla. Aunque veremos también una opción más PRO al final del post, que es «casi» igual de fácil.

Lo ideal es aprender un poco de HTML, ya que trabajaremos desde el editor HTML.

➡ Si usas WordPress, pues desde el editor HTML de WordPress

Por lo menos, para que sepas de qué estamos hablando y que te resulte más sencillo el tutorial 😀

No obstante, te dejo los códigos a la vista para que puedas copiar y pegar en tu web, «sin tener ni papa» de HTML o CSS. Así igualmente podrás tener este tipo de cajas en tu web.

Crear las cajas de colores en 6 pasos

1. El primer paso es definir el elemento HTML, que en nuestro caso serán párrafos.
2. Luego, asignaremos el color de fondo (o no), en función de nuestras necesidades.
3. Llega el momento de personalizar el texto.
4. Ajustaremos los espacios internos de la caja, para dejar aire entre el texto y los bordes.
5. ¡Hablando de bordes! Podremos añadir bordes e incluso redondearlos a nuestro gusto.
6. Y para finalizar definiremos los espacios antes y después de la caja de color.

Diseñar una caja de colores con HTML + CSS

Vamos a diseñar una caja básica siguiendo los pasos antes enumerados.

Para definir el elemento HTML y darle un color de fondo (background), escribe o «copia y pega» este código en tu editor HTML para los pasos 1 y 2:

<p style="background:violet;">Tu primera caja de colores</p>

Tu primera caja de colores

Como verás tenemos una caja, pero no con el aspecto que queremos 😳

Así que vamos con el paso 3, personalizar el texto. Que de momento pintaremos de blanco (color) y le daremos más grosor (font-weight).

<p style="background:violet; color:white; font-weight:bold;">Tu primera caja de colores con texto blanco</p>

Tu primera caja de colores con texto blanco

Como este contenedor tampoco es exactamente lo que queremos, vamos con el paso 4 para darle espacios internos a la caja (padding).

<p style="background:violet; color:white; font-weight:bold; padding:15px;">Tu primera caja de colores con espacios internos</p>

Aquí la cosa va mejorando y se parece más a lo que buscamos ¿no?

Ok, pues añadamos entonces un borde (border), por ejemplo de 3px, que es el paso número 5.

<p style="background:violet; color:white; font-weight:bold; padding:15px; border:3px solid purple;">Tu primera caja de colores con borde</p>

Tu primera caja de colores con borde

Y como paso número 6, asignamos el margen superior (margin-top) e inferior (margin-bottom). En mi caso no ha sido necesario porque todos mis párrafos ya tienen un margen establecido.

No obstante, le meto unos márgenes de 100px para que el efecto quede claro.

<p style="background:violet; color:white; font-weight:bold; padding:15px; border:3px solid purple; margin-top:100px; margin-bottom:100px;">Tu primera caja de colores con margen superior e inferior</p>

Tu primera caja de colores con margen superior e inferior

Y ahora, si quieres puedes alinear el texto al centro (text-align), cambiarle el tamaño (font-size) y ajustar los colores a tu gusto.

<p style="background:#FF813E; color:white; font-weight:bold; padding:15px; border:3px solid #B34F19; margin-top:40px; margin-bottom:40px; text-align:center; font-size:22px;">Tu primera caja de colores personalizada con HTML + CSS</p>

Tu primera caja de colores personalizada con HTML + CSS

Para rematar la faena, vamos a redondear las equinas (border-radius).

<p style="background:#FF813E; color:white; font-weight:bold; padding:15px; border:3px solid #B34F19; margin-top:40px; margin-bottom:40px; text-align:center; font-size:22px; border-radius:10px;">Tu caja de colores personalizada con HTML y CSS</p>

Tu caja de colores personalizada con HTML y CSS

Teniendo claro el concepto, ya eres capaz de crear cajas como esta con los colores que tú quieras 😆

Ejemplos de cajas de colores HTML y CSS

Si te apetece practicar, cambia en los ejemplos el color de fondo, el texto, el grosor y color del borde, la distancia entre la caja y el elemento anterior, el posterior… para conseguir diferentes tipos de cajas de colores HTML y CSS con las que llamar la atención sobre los textos.

<p style="background: #e2fdf4; color: #0ebd84; font-weight: bold; padding: 15px; border: 2px solid #bdfae6; border-radius: 6px;">Tu caja de color verde y cantos redondeados</p>

Tu caja de color verde y cantos redondeados

<p style="background: #bdf0fa; color: #0c92ac; font-weight: bold; padding: 15px; border: 2px solid #abecf9; border-radius: 6px;">Tu caja de color azul y cantos redondeados</p>

Tu caja de color azul y cantos redondeados

<p style="background: #fcdbe6; color: #f15c8e; font-weight: bold; padding: 15px; border: 2px solid #fac9d9; border-radius: 6px;">Tu caja de color rosa y cantos redondeados</p>

Tu caja de color rosa y cantos redondeados

<p style="color: #a2a2a2; font-weight: bold; padding: 15px; border: 2px solid #d8d8d8; border-radius: 6px;">Tu caja de color blanco y cantos redondeados</p>

Tu caja de color blanco y cantos redondeados

NOTA: Es posible que por la configuración de los párrafos de tu web, debas ajustar la propiedad line-height, que indica la distancia en altura entre las líneas de un mismo párrafo.

Con esto, creo que tienes información suficiente como para crear cajas HTML decoradas con CSS a partir de un párrafo. A pesar de ello, vamos a ver unos ejemplos más que te resultarán interesantes.

Crear cajas de colores en HTML y CSS con bordes diferentes

Si te has fijado, este es un recurso que utilizo mucho en mi blog, y es tan fácil como el anterior.

En este caso lo que trabajaremos será solo el borde de uno o dos lados 😉

Siguiendo el mismo orden que en los ejemplos de cajas de colores, y solo modificando la propiedad border, podrás conseguir estos efectos:

<p style="background: #f7f5f5; font-weight: bold; padding: 15px; border-left: 5px solid #ff0080;">Caja de colores HTML y CSS con borde a la izquierda</p>

Caja de colores HTML y CSS con borde a la izquierda

Si quieres el borde más grueso, solo tienes que asignarle más píxeles.

Caja de colores HTML y CSS con borde grueso a la izquierda

Y si lo quieres a la derecha, cambia la propiedad border-left por border-right.

<p style="background: #f7f5f5; font-weight: bold; padding: 15px; border-right:5px solid #ff0080;">Caja de colores HTML y CSS con borde a la izquierda</p>

Caja de colores HTML y CSS con borde a la derecha

Para bordes arriba y/o abajo, utiliza las propiedades border-top y border-bottom.

<p style="background: #f7f5f5; font-weight: bold; padding: 15px; border-top:2px solid #ff0080; border-bottom:2px solid #ff0080;">Caja de colores HTML y CSS con borde arriba y abajo</p>

Caja de colores HTML y CSS con borde arriba y abajo

Si le asignas border y border-radius solo a uno de los lados, también quedará curioso 😀

<p style="background: #f7f5f5; font-weight: bold; padding: 15px; border-left:8px solid #ff0080; border-top-left-radius:8px; border-bottom-left-radius:8px;">Caja de colores HTML y CSS con borde redondeado a la izquierda</p>

Caja de colores HTML y CSS con borde redondeado a la izquierda

O puedes poner el border y el border-radius en lados opuestos.

Caja de colores HTML y CSS con borde y borde redondeado en lados opuestos

Como verás, una vez le coges el truco no es nada complicado 😆

La forma PRO de crear tus cajas de colores en HTML y CSS

Uno de los inconvenientes de meter tanto código en línea para crear cajas de colores, es que «ese código solo sirve para ese elemento en esa URL».

Además, todo esto en un editor HTML, sobre todo en el de WordPress, puede resultar bastante abrumador. Por eso los profesionales del diseño web, creamos las cajas de otra forma.

➡ La idea es separar el código HTML del CSS.

Y para ello te recomiendo que le des un vistazo a este post que habla de los selectores CSS. En concreto lo que te interesa son las clases CSS.

Pero no te preocupes que te hago un resumen rápido 😉

Asignando una clase a tu párrafo, conseguirás que cada párrafo de esa clase tenga un mismo estilo CSS previamente asignado. Y lo tendrá en cualquier URL de tu página web.

Es decir, si tienes 1 párrafo de la clase «caja-destacada» en 3 post diferentes, en todos tendrán el mismo estilo que has asignado una sola vez.

Escribe esto en tu editor HTML:

<p class="caja-destacada">Esta caja coge el estilo desde otro archivo</p>

Y ahora esto en cualquiera de estos 3 lugares:

.caja-destacada{
padding:15px 15px 20px 15px;
border-left:5px solid #F98200;
background:#F5F5F5;
margin-bottom:30px;
line-height:26px !important;
}

Y tendrás una caja como esta lista para usar en cualquier parte de la web, solo asignando a cualquier párrafo la clase «caja-destacada», o el nombre que le hayas puesto.

Por si te lo preguntas, existen formas aún más profesionales de generar cajas de colores o con texto destacado en HTML y CSS, pero eso será otra historia 🙂

¡Si te ha molado el post, comparte en las redes y no olvides dejar tu comentario!