CSS: Las hojas de estilo en cascada diseñan tu sitio

Cuando hablamos de construir un código para un sitio web, muchas veces se usa la analogía con la construcción de una casa. Siendo el HTML la estructura de la casa; el JavaScript todas las partes funcionales como puertas y ventanas; y el CSS viene a ser la pintura y el diseño estético de la misma.

Pues, el CSS es el encargado de darle vida y buen gusto a nuestro sitio web, algo que carece en las Crocs.

Entonces, especificar el CSS, dentro de un HTML y un JavaScript ayuda a los sitios web con un diseño agradable. Hoy tocaremos un poco del CSS, su función y cómo podrías implementarlo en tu sitio.

¿Qué es el CSS?

El CSS es un acrónimo en inglés conocido cómo Cascading Style Sheets, que en español significa Hojas de Estilo en Cascada. Este formato de estilo fue desarrollado por la W3C allá por el 1996.

Como te lo comenté más arriba, se le denomina Hojas de Estilos en Cascada porque las características se aplican de arriba a abajo. Pues, este estilo se genera como sí de una cascada de agua se tratase, porque tiene reglas con un esquema prioritario.

Esta cascada pertenece a un sistema de lenguaje de diseño gráfico que se escribe dentro del propio código HTML del sitio web. Que es en definitiva, lo que permite crear páginas de una manera precisa conforme a los estilos visuales.

Estos estilos visuales antes mencionados pueden ser colores, márgenes, tipografía, formas para distintos bloques, etc. por esta razón, la estética es CSS dependiente.

¿Para qué sirve el CSS?

Básicamente, la tecnología CSS tiene la función de crear la estética de un contenido web, presentando las características visuales de estas. Entonces, esto trae múltiples beneficios, como:

• Mostrar el documento HTML final en diferentes estilos.
• Tener un sitio web responsivo.
• Estética altamente personalizada.
• Evita la creación archivos demasiado pesados, facilitando el lazy loading.
• Ayuda a reducir el tamaño del DOM.
• Definir el estilo visual de todo un sitio web o el de simplemente una única URL.
• Trabajar con estándares logrando un trabajo más definido.
• Produce más flexibilidad y control en las especificaciones del sitio web.
• Simplifica la creación de la página web.
• Ayuda a contribuir en los lineamientos estéticos de accesibilidad para la WCAG.

¿Cómo se vincula con el HTML?

El HTML y CSS están íntimamente relacionados, pues, el HTML es un lenguaje de marcado y el CSS crea la estética. Entonces, podríamos decir que el HTML construye la casa, y el CSS la pinta, para retomar el ejemplo de la introducción.

A pesar de que el CSS no es completamente imprescindible, es importante para darle un toque estético a un sitio web. Si solo usas HTML tu página se verá pelada y no destacará por ninguna de las maneras.

Cómo podremos apreciarlo en la imagen, tenemos un sitio home completamente construido con los diferentes lenguajes a nuestra izquierda. Pero en la derecha, tenemos el mismo sitio web sin CSS, ni JavaScript. — ¿Se nota la diferencia?

Usando el CSS en WordPress

Dentro de WordPress, el CSS es un poco diferente, pues, está controlado en su mayoría por los temas. Estos se componen de archivos tipo plantilla, etiquetas de plantilla, y el CSS propiamente dicho.

Pese a que todos estos componentes se generan automáticamente por tu tema, los mismos pueden ser editados.

Pues, los archivos plantilla dividen partes de tu sitio web en secciones «como el header.php o el archive.php»; y las etiquetas plantilla se utilizan para llamarlas y otros contenidos de su base de datos.

Estos archivos están compuestos principalmente por formatos PHP y HTML, aunque podés añadir el CSS en dichas secciones sí lo crees pertinente. Para hacerlo, debemos encontrar la hora de estilo conocida cómo style.css. Allí podremos cambiar la estética del sitio web, por medio de ediciones o agregados de códigos.

Añadiendo un CSS personalizado en WordPress

Sí tu objetivo no es editar el código CSS actual, pues solo te interesa añadir una estética nueva. Lo más práctico es utilizar el WordPress Customizer o directamente un plugin específico para dicho fin.

Para ello, la hoja de estilo puede ser añadida a través de uno de estos métodos, pues, es mucho más fácil de acceder y usar. Entonces, no tendrás que preocuparte por poner tu nuevo CSS en el lugar equivocado sí quieres hacer eventualmente una nueva modificación.

Otro punto importante de añadir nuestro CSS por estos métodos, es que no se pierden al actualizar el tema. Sin embargo, sí cambias el tema, lo más probable es que si desaparezca.

Entonces, podés agregar un código al sytle.css y dejarlo terminado. Pero por las dudas siempre es importante hacer una copia de seguridad.

1. WordPress Customizer

Para esto, tenemos dos ideas interesantes, o podemos ir directamente al Editor de Temas, desde la barra izquierda:

Apariencia > Editor de temas > style.css.

O también podemos hacer lo propio desde el Backend de WordPress. Para ello debemos ir hasta:

Apariencia > Personalizar > Personalizamos el tema.

En el Backend, veremos el sitio web actual, junto con las diversas opciones en una nueva barra lateral izquierda. Entonces, para añadir un nuevo fragmento de CSS, debemos ir a la opción donde dice CSS adicional. En este podremos personalizar elementos como los colores, menús y demás widgets.

Luego de abrirlo. Se mostrará a una nueva pantalla con un cuadro de entrada de código y algunas instrucciones a la izquierda.

La pantalla de CSS adicional incluye resaltado de sintaxis, al igual que el Editor de temas. Además, tenemos un sistema de validación que nos permite saber sí el código es correcto o incorrecto.

CSS adicional

Cualquier código que escribas aparece automáticamente en el área de vista previa de la derecha. A menos que este código nuevo contenga un error de sintaxis.

Cuando termines de crear tu código, simplemente resta por publicarlo, programarlo, o guardarlo para seguir editando. También tenés la opción de generar una vista precia con un enlace por sí necesitás una opinión externa.

El código CSS que sobreescribirá el estilo por defecto de tu tema y no desaparecerá cuando este se actualice. Si no podés verlo desde tu vista previa, deberías chequear que estés usando los selectores correctos en tu código.

La única desventaja de esto, es que sí cambias de tema, todo lo generado se borrará. Otro punto a favor para crear una copia de seguridad de tu style.css antes de cambiar de tema, pues, podrías perder mucho tiempo y trabajo.

Si tenés muchas dificultades con esto, siempre tenés la opción de un plugin. Pero, sí no querés o podés usar estos adicionales, seguí leyendo que veremos cómo crear código manualmente con ejemplo.

2. Plugin para CSS personalizado

Esta es la idea más práctica de personalizar una estética a medida. Pues, la velocidad y la practicidad de esto, es mucho más eficiente que crear el CSS a medida.

Cada metodología tiene su punto a favor y su punto en contra, por eso, hay que tener en claro que se pretende. Pues, el plugin es más simple de usar, pero quizás no puedas personalizar todo a medida, y la inversa sucede con el editor de código.

Para tomar una decisión, tenés que pensar en la UI «User Interface» de tu sitio, y de allí podrías ir analizando las opciones. Algunos plugins pueden crear estilos a través de presets y diversas opciones creadas, lo cual facilita mucho el proceso.

1. Simple Custom CSS

Simple Custom CSS es el plugin de edición de CSS más popular, debido a su facilidad de uso, interfaz mínima y backend ligero. Pues, es un plugin de WordPress muy pequeño que tiene un gran impacto.

2. Simple Custom CSS and JS

Simple Custom CSS and JS es una buena opción, pues, te permite editar todo, desde el encabezado hasta el pie de página. Todo desde el frontend hasta el backend de administración.

3. CSS Hero

El Plugin CSS Hero es otra idea interesante que también podés tener en consideración. Este plugin sirve para crear un código más complejo y complicado que el resto, pues tiene varias opciones. Ok, no es el plugin más sencillo de utilizar, pero ciertamente es muy versátil.

Ejemplo con un generador de código

Ahora veremos muy por encima cómo crear nuestro propio código CSS para personalizar nuestro sitio web. Esto es útil para las personas que no tengan muy en claro cómo generar código, pero que saben lo suficiente como para unir partes.

Lo primero que debemos hacer es entrar a Web Code Tools ↗. En esta herramienta encontraremos varias tarjetas donde podremos generar diversos tipos de códigos.

Nosotros entraremos en el generador de Cascading Style Sheets. Allí nos saldrán las diferentes opciones que podremos modificar y personalizar. En este caso, voy a crear un espaciado mayor al establecido por defecto.

Luego de generar el código, copiamos el fragmento creado, en este caso sería:

tab-size: 4;

Luego, a esto lo integramos en nuestro editor de WordPress, cómo vimos en la sección de CSS Adicional. ¡Listo!, ya tenemos nuestra primera adición de hoja de estilo.

Conclusión

Bueno, finalizamos el post, vimos los aspectos básicos de este tipo de Hojas de Estilo en Cascada. Hay que tener en cuenta la analogía de la casa para entender cómo es que se construye el código de un sitio web.

Pues, el CSS fue creado para trabajar en conjunto con el HTML. Entonces, debido a esta tecnología, el CSS tiene un estándar muy amplio, con especificaciones, beneficios y posibilidades muy grandes.

A día de hoy, el CSS es un obligado para ser visualmente correcto en la mayoría de páginas web. Pues, caso contrario estás penalizando la User Interface «UI». Es muy simple de crear algo estéticamente correcto, y con lo que vimos, alcanza y sobra.

Para finalizar, te dejo un banner con un descuento de 25 dólares para la adquisición de tu próximo sitio en WordPress.