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.

En la imagen de la izquierda tenemos un sitio web con HTML, CSS, y JavaScript. A la derecha la misma página, pero solo con HTML.

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.

Consigue 25 dólares para tu próximo sitio WordPress.

Tf*idf: La frecuencia de términos vs Frecuencia inversa del documento es una práctica funcional a tu SEO dentro del marketing de contenidos

Puede que te parezca extraño el título del artículo de hoy, pero, posiblemente el Tf*idf sea una métrica que seguro utilizaste sin saberlo. En especial sí tu sitio web o blog aplica marketing de contenidos para posicionarse conforme a los motores de búsqueda. Si una de las patas centrales de tu negocio o actividad profesional

Read More »

Metodología Agile: qué es y cómo aplicarla a tu proyecto de alto rendimiento en tu flujo de trabajo

Cuando hablamos de cambios y procesos tecnológicos relacionados con la transformación digital, tendremos una gran cantidad de nuevos conceptos dentro de la nube de ideas de temas relacionados. Sin embargo, sí hablamos propiamente de la gestión de proyectos, un concepto se destaca por sobre el resto, estoy hablando, de la metodología Agile. Entonces, hablando netamente

Read More »

Mindset: Aprende sobre el poder de la mentalidad positiva o growth mindset «progresivo» y a detectar tu propio mindset con ejemplos

Este es un tema muy propio del desarrollo personal, pues, tener una mentalidad correcta, es crucial para tu crecimiento. Entonces, toca hablar del Mindset, y de los marcos mentales relacionados con el mismo. El Mindset es un término que ha ganado mucha popularidad en los últimos años. Este concepto es simple y la verdad, no

Read More »

Liderazgo: Aprende qué es este concepto con definiciones y ejemplos, los tipos de líderes, algunas frases

Bueno, se viene un post cortito y serio sobre Liderazgo y desarrollo personal. El liderazgo es una cualidad importante que tienen todas las personas, independientemente de su área de interés; pues, el liderazgo se encuentra a muchos niveles y tiene muchos matices. En este post, intentaré definir el liderazgo, y mencionar los tipos de liderazgo

Read More »

Diseño web: Aprende qué es y como un diseño profesional puede ayudarte a posicionar tu sitio web con este post tutorial

Bueno, el diseño web es un área enfocada en el desarrollo de interfaces digitales, como el diseño de sitios y aplicaciones para web «Progressive Web App». Para ello, los diseñadores web crean sitios utilizando lenguajes de programación como HTML, CSS, JavaScript, e incluso otros tantos más. Pero, siempre, el motivo del diseño debe estar orientado

Read More »

Diseño: Cuando el diseño es tu pasión nada puede malir sal

— La idea de este post ocurrió mientras estaba escuchando la siguiente canción que seguramente comparta por aquí debajo. Mientras lo hacía, no paraba de pensar en el meme que dice: «el diseño gráfico es mi pasión«. Bueno, siendo justos, tampoco soy un gran maestro del diseño, pues, todo lo que engloba al diseño requiere

Read More »
error: Content is protected !!