Reading time aprox: 2 minutes, 33 seconds
CSS Avanzado
Evidentemente, manejar los estilos de una página web, es cosa del «CSS» y, hay cosas básicas en la edición web, pero también aspectos que podemos llamar «CSS avanzado».
Sabemos que el CSS no es cuestión de magia, aunque a veces pueda parecerlo, así que vamos a intentar desmitificarlo un poco.
Los básicos
Si ya tienes experiencia en la construcción de páginas web, quizá esto «te sobra» 😉
El lenguaje «CSS» no es un lenguaje de programación, así que no puedes escribir programas, sirve para «modelar objetos».
Los objetos a modelar, en este caso, son las «entidades» que forman una página web.
Una «entidad» puede ser una letra del texto, un conjunto de letras, una imagen, una zona de la página, el fondo de la página (lo que se ve detrás de los textos y las imágenes), etcétera.
Esto ya nos está diciendo, que primero debemos crear el contenido y, luego le damos forma, lo modelamos.
Hay tres formas en que podemos dar formato a una entidad y para ilustrarlas, la entidad será «texto».
** Nota ** no complicaré las cosas con codificado «HTML», usare conceptos.
- En la definición de la misma entidad.
[Palabra estilo="color rojo"]Texto
- Mediante la aplicación de un estilo al crear la página web.
[comienzo de página] [Definiciones de estilo] [palabra texto en rojo] [fin de estilos] [cuerpo de la página] Lorem ipsum sit amet texto consectetur. [fin de página] - En un documento aparte que contiene todos los formatos a aplicar.
Con la segunda y tercera fórmulas, tenemos la posibilidad de cambiar el formato de forma más fácil, ya que no hay que encontrar el texto exacto y cambiar su definición, pero si debemos tener forma de localizar el texto que queremos cambiar, de forma inequívoca.
La localización del texto se hace mediante identificadores de nombre único o de forma genérica, si queremos alterar todas las entidades «parecidas».
Con la tercera fórmula, tenemos la ventaja de la facilidad de cambio y además, la ventaja de poder realizar los cambios sin tener que manipular la página, sólo cambiamos el documento de formatos.
Ahora que tenemos claro lo básico, hablamos de
CSS avanzado
Sabemos que WordPress es un «CMS», pero eso no significa que no sea (desde el punto de vista del usuario final) una página web. Es decir, un documento en «HTML».
La diferencia está en que no es necesario que escribas el código «HTML» de la página, WordPress se ocupa por ti.
Entonces, que ¿podemos hacer?
Veamos cómo lo hace WordPress. Sin entrar en detalle, sólo en bloques de concepto. La descripción en detalle está en el conjunto de este sitio ?
WordPress funciona por bloques, coge un texto que tú has escrito con sus correspondientes imágenes (una entrada) y lo integra con un formato de estilo (el tema que has escogido), generando el código «HTML» que compone una página web.
La forma que tenemos de alterar la presentación de ese código «HTML», es cambiando la «hoja de estilos» correspondiente.
Sea cual sea el tema que escojamos, existe un documento con el nombre de «style.css» que es la «hoja de estilos» de ese tema en concreto.
Alterando el documento «style.css» podemos cambiar el aspecto final de la presentación de cualquier entidad de la página web.
Cada tema, cuenta con dicho documento y es por eso que WordPress puede ofrecernos la posibilidad de cambiar el aspecto de las páginas
Como parte del menú «Apariencia», encontramos una herramienta llamada «Editor de temas» donde podemos cambiar el documento «style.css».
Es muy recomendable crear un «tema hijo» en lugar de alterar la «hoja de estilos» de un tema. Hay muchas razones para ello, entre otras:
- Cualquier cambio que realicemos en un tema hijo, no afecta al tema padre, simplemente borrando en nuestro documento las definiciones nuevas, regresamos a como estaba todo al principio.
- Si cometemos un error, aunque lleguemos a hacer que la página resulte impresentable (no se puede presentar), podemos deshacer los cambios y volver al original.
Hay otros archivos que podemos modificar con la herramienta de edición, pero esta es la forma de cambiar el aspecto de la web.
El «style.css» contiene las definiciones de presentación que el tema escogido ha formulado. Por ejemplo, veamos una porción del código CSS contenido en el archivo «style.css» del tema «Twenty Nineteen»:
body {
background-color: #fff;
}
a {
transition: color 110ms ease-in-out;
color: #0073aa;
}
a:hover,
a:active {
color: #005177;
outline: 0;
text-decoration: none;
}
Estas cuatro instrucciones le dicen al navegador que debe presentar el tema con un fondo de color blanco y que los enlaces (todos) estarán marcados con color rojo oscuro sin ninguna decoración adicional.
¡Gracias por leernos!
¡Tus comentarios y preguntas nos ayudan a mejorar, por favor comenta!