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.
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.

Ejemplo de editor de temas en wordpress.

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

Apariencia > Personalizar > Personalizamos el tema.

En el editor del BackEnd de WordPress podremos agregar un CSS adicional.

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.

En el editor de CSS Adicional tenemos la opción de insertar nuestro código personalizado

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.

En la herramienta de Web Code Tools, podremos generar varios tipos de códigos. Algunos como CSS; html; json-ld; meta tags; open graph; y twitter cards.

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.

Ejemplo de CSS donde editamos el espaciado con el código tab-size.

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 sitio WordPress
Consigue 25 dólares para tu próximo sitio WordPress.

9 comentarios en “CSS: Las hojas de estilo en cascada dise√Īan tu sitio”

Deja un comentario

Post relacionados

Por si te quedaste con ganas de m√°s...

Como seguramente seguis con muchas ganas de leer post de mni blog ¬ędijo nunca, nadie¬Ľ, te dejo algunos otros post que podr√≠an ser de inter√©s, ordenados de manera completamente random.

¬ŅNecesit√°s contactarte conmigo?

Si ten√©s ganas de ponerte en contacto porque necesit√°s ayuda particular o simplemente te falta uno para el f√ļtbol, no dudes en dejarme un mensaje por mail o en las redes sociales.

error: Content is protected !!
Ir arriba
A %d blogueros les gusta esto: