CSS básico y sencillo que todo usuario de WordPress debería conocer

Gracias a los gestores de contenido como WordPress, actualmente es tremendamente sencillo crear webs, no digamos con la ayuda de maquetadores como Divi o Elementor.

Ni siquiera tienes que aprender a programar, simplemente instalas WordPress, un tema bien diseñado y personalizas tu web a golpe de clic.

Todo el código que necesita tu web para funcionar lo han desarrollado ya los programadores en HTML, CSS, PHP y JavaScript, tú solo te concentras en personalizar tu web y crear contenidos.

Pero también es cierto que, cualquiera que tenga un sitio WordPress, en algún momento se verá necesitado, o al menos tentado, de alterar algún código.

No es que te vayas a convertir en desarrollador web, programando en PHP y JavaScript profesionalmente, sino que conociendo los códigos básicos de HTML y CSS, que son los fundamentos de toda página web, tendrás un control más completo de tu web, WordPress o lo que sea con lo que esté creada.

Como ya vimos hace poco el HTML básico que todo usuario de WordPress debería conocer, hoy vamos a centrarnos en los básicos de CSS, con trucos e ideas que te darán la herramienta para no tener limitaciones a la hora de personalizar tu web.

Allí donde terminan los ajustes de personalización de tu tema WordPress tendrás todo el potencial del CSS para diseñar tu web sin limitaciones.

Si te pareció sencillo aprender HTML básico, CSS te va a encantar, porque además el impacto en el aspecto de tu web será inmediato.

¡Hoy vas a dar el salto más importante de tu vida en tu relación con la creación web!

Pero, empecemos por el principio …

¿Qué es CSS?

CSS es la abreviatura de Cascading Style Sheets, u hojas de estilo en cascada. CSS es el lenguaje que usan los diseñadores web para dar estilo a una página web.

Controla los colores, estilos de fuentes, fondos, tamaños de columnas, adaptabilidad y todos los demás estilos de una web. Sin CSS las páginas web son planas, sin atractivo ni nada que incite a verlas o leerlas.

CSS es lo que usamos para aplicar estilos al HTML de una web.

Por ejemplo, tu blog WordPress favorito, fíjate qué diferencia de verlo con y sin CSS:

Creo que ha quedado claro para qué sirve el CSS ¿no?

Visto esto, y la importancia del CSS para la web tal y como la conocemos, en la que el aspecto, la presentación lo es todo, o casi, vamos a aprender los principales elementos de su sintaxis para que puedas empezar desde ya a aplicar estilos con CSS.

Selectores, clases e IDs

Selectores

En CSS la base de todo es el selector, que es una abreviatura que indica al código al que se aplicará el estilo.

Puedes apuntar a párrafos concretos del sitio con un p {}. (Cualquier código que se aplique al selector se pone entre corchetes.)  En muchos casos, estos selectores del elemento apuntarán a etiquetas HTML con las que creas tu página web (como por ejemplo p {} que se aplica a <p>h2 {}<h2>).

Clases

Luego tenemos las clases, que son tipos específicos de selectores que defines. Por ejemplo, si quieres aplicar estilo solo a los encabezados H1 de las entradas tendrías algo como .post-title {}.

Un selector de clase CSS se identifica mediante un punto u otro indicador delante del selector. Se utilizan para que se apliquen a elementos de toda la web, pero no a elementos base como un H1. Ya que estamos, fíjate que los selectores no tendrán un punto, u otro indicador, delante, lo que significa que se aplican al HTML base.

IDs

Los IDs en CSS funcionan exactamente igual que las clases, salvo en dos pequeñas diferencias.

Vienen precedidos por un símbolo # delante del selector, y que su nombre viene dado por una instancia muy específica, única o muy limitada, de un elemento que necesita algún estilo especial. Por ejemplo #formulario-comentarios {}#caja-suscripcion-final-entradas {}.

Estos IDs indican que, en vez de aplicarse a un tipo de elemento, se refieren a elementos individuales concretos.

Ejemplo de uso:

p {
color: red; //Color rojo en todos los párrafos
}

.class {
color: white; //Color blanco en el tipo de elemento class
}

#id {
color: blue; //Color azul en el elemento concreto id
}

Otros selectores

Como estamos viendo los básicos de CSS no vamos a meternos en selectores más complejos, pero existen.

Puedes aplicar las seudo-clases, que se pueden aplicar, por ejemplo, solamente cuando se pasa el cursor sobre un enlace. O un selector de atributo, que solo se aplicará a elementos que tengan un parámetro concreto. También, puedes activar un CSS que sea relativo a la posición de un elemento usando p::after o img::before.

Puede ser increíblemente avanzado y complejo hacerlo bien, así que para aprender lo básico, no es algo de lo que debas preocuparte. Sin embargo, sí quería que supieras que hay formas mucho más específicas de interactuar con el documento HTML.

Dos puntos y punto y coma

He dicho antes que todo el código CSS va dentro de corchetes ¿verdad?. Pero dentro de estos corchetes, cada línea de personalización debe terminar con un punto y coma (;). Esto le indica al navegador que ese estilo en particular está completo.

Por cierto, no importan los espacios en el CSS, salvo por legibilidad, pero el punto y coma es obligatorio al final de cada personalización, sí o sí.

Además, entre el estilo CSS y el valor tienes que poner dos puntos (:), y de nuevo, no importan los espacios.

Ejemplo de uso:

.main-content .article{
font-family: Arial, Helvetica, sans-serif;
}
.main-header{
margin-top: 20vh;
}

Ten en cuenta que, aunque puedas dejar espacios, normalmente lo correcto es no hacerlo. Eso sí, aunque los haya, luego, con las técnicas de minimizado que ofrecen actualmente tanto temas como plugins, todos esos espacios se quitan.

Comentarios CSS

Si tienes que incluir documentación en el código CSS puedes hacerlo con comentarios.

Los comentarios CSS se abren y cierran con los símbolos /* y */ respectivamente.

Comentar el código no solo es importante para ti, por si más adelante necesitas revisar el CSS y así saber para qué es cada estilo, sino también para otros desarrolladores.

Por lo general, los comentarios CSS se utilizan para indicar qué hace una personalización de estilo concreta.

Ejemplo de uso:

/* Esto es un comentario CSS */
img {
display: none;
}

Es una buena práctica que te acostumbres siempre a comentar tu código CSS, ya que tus estilos cambiarán con el tiempo, y así siempre tendrás claro qué hace cada estilo aplicado.

!important

Ni te imaginas lo habitual e importante que puede llegar a ser la etiqueta !important en el CSS. Es, de hecho, uno de los elementos más utilizados, a veces incluso en exceso, en el CSS.

La etiqueta !important añadida a cualquier línea de personalización que se omita cualquier otro estilo para ese selector, da igual dónde esté en la hoja de estilos.

De este modo, si quieres asegurarte de que un elemento en particular siempre tenga un color concreto, por ejemplo, deberías usar !important para conseguirlo.

La etiqueta !important siempre debe ir entre el valor y el punto y coma, no antes.

Ejemplo de uso:

#comment-title {
color: blue;
}
/* En la siguiente línea omitimos el color azul por defecto del título de comentarios y forzamos con !important que sea rojo */
#comment-title {
color: red!important;
}

display: none;

Este elemento CSS es uno de los más importantes que todo principiante en CSS debería aprender.

Lo que hace es que desaparezca cualquier elemento al que lo apliques. Por ejemplo, si  necesitas que una página no tenga menú de cabecera, simplemente le pones este código:

/* Ocultar el menú de navegación de cabecera */
.header-nav {
display: none;
}

Fíjate que, a partir de ahora, siempre pondré comentarios en el CSS, para que te vayas acostumbrando.

Al hacer esto con una clase que aparece en todas las páginas se eliminaría de todo el sitio, así que debes ser cuidadoso.

Lo más común es usarlo solamente en entradas o páginas concretas, para eliminar elementos específicos, como los datos meta de las entradas. Por ejemplo, con Divi, puedes personalizar el módulo de blog para que no tenga extractos usando este código:

/* No mostrar extractos del contenido en los módulos blog de Divi */
.home-page-blog .post-content {
display:none;
}

Tienes muchos más ejemplos de uso aquí mismo en el blog.

visibility: hidden;

Otro código CSS que puedes usar para que no se muestre un elemento en pantalla es visibility:hidden;, pero ten en cuenta la diferencia entre usar visibility:hidden; y display:none;.

El código display:none; eliminará completamente el elemento de la página, el navegador no entregará el elemento, como si lo hubieses borrado completamente, mientras que con visibility:hidden;  el código sigue cargándose con la página, pero no es visible. La funcionalidad está ahí, pero el usuario no puede verlo.

Esto es importante, pues debes comprender que este código debes usarlo solamente si necesitas la funcionalidad de algo pero no quieres que se muestre, como por ejemplo un píxel de seguimiento o cualquier otro tipo de elemento que interactúe con otros elementos de la página pero que no quieres que se vea.

Ejemplo de uso:

/* Ocultar píxel de Facebook */
#fb-tracking-pixel { 
visibility:hidden; 
}

Margen (margin) y relleno (padding)

Es bastante común equivocarse al principio de aprender CSS con los márgenes (margin) y los rellenos (padding), parecen lo mismo, pero una vez los conoces bien verás que son totalmente distintos.

margin

Margen es el espacio que hay alrededor de un elemento. Es invisible y transparente, y puede ser incluso negativo.

Un margen mayor a la izquierda empuja el elemento a la derecha, un margen mayor superior empuja el elemento hacia el fondo.

Un margen negativo hace lo opuesto. Por ejemplo, un margen superior negativo tirará del elemento hacia arriba.

padding

El relleno acota el tamaño del elemento. Un relleno a la izquierda ampliará el fondo del elemento a la izquierda. En realidad es como aumentar su masa física, como la ropa interior de invierno, es eso, un relleno, eres más gordo que antes de ponértela.

Así es como funciona el relleno en el CSS, y es por eso que no hay relleno negativo.

Ejemplo de uso:

Al usar estos códigos puedes usar como unidades píxeles (margin:12px) o viewport (padding:1vw) parea un espaciado uniforme alrededor del selector.

También puedes usar margin-top, margin-left, margin-right o margin-bottom para que afecte solo a ese lado y tengan distintos niveles cada uno. Lo mismo para el relleno, con padding-left, y así sucesivamente.

/* Encabezados h2 con margen inferior de 25 píxeles y un relleno a la izquierda de 15 viewport */
h2 {
margin-bottom:25px;
padding-left:15vh;
}

Colores

Cambiar los colores de algunos elementos es casi seguro lo primero que vas a querer modificar el primer día que tengas una web.

Con CSS puedes definir un color de dos maneras.

El modo más habitual es usar códigos hexadecimales de 6 dígitos, como #ffffff para el blanco o #000000 para el negro, por ejemplo. Con códigos hexadecimales puedes definir cualquier color RGB, y no hay que aprendérselos de memoria, sería imposible, hay montones de herramientas para obtenerlos.

El otro modo es usar una palabra ya predefinida para un color. Los colores básicos, como azul, amarillo o rojo están ya predefinidos (en inglés), y puedes usarlos sin tener que recordar sus códigos hexadecimales. Pero si necesitas colores que no sean los principales, entonces toca recurrir a los códigos hexadecimales.

Cómo usar los códigos de color

A la hora de ponerte a usar los códigos de color hay varias maneras de hacerlo.

Por ejemplo, si quieres cambiar el color de todos los textos simplemente usa color:#black y cualquier texto dentro del selector se cambiará al que especifiques. Puedes hacer lo mismo con los encabezados, tipo H1 o H2.

Ejemplo de uso:

/* Color de texto en blanco y color de fondo en negro en los párrafos */
p {
color:white;
background-color:#000;
}

/* Borde de los H3 en azul oscuro y fondo en verde */
h3 {
background:green;
border: #001ddf;
}

Cambiar cosas como background-color:red; o background:green; de un elemento es igual  de fácil: añade un valor de color.

También puedes usar valores de color:#000; para selectores del tipo a:hover que cambiarán el color de los enlaces al pasar el cursor sobre ellos, o border:blue; para poner un borde de colores alrededor de cualquier elemento.

Tipografías

Otro elemento muy común que querrás cambiar casi nada más crear tu web serán los tipos de letra, las fuentes o tipografías que se usan en distintas partes de tu web.

En ocasiones tu tema WordPress te permitirá personalizarlas y cambiarlas, pero casi siempre habrá algún selector que querrás personalizar a tu gusto … y no habrá un botón para cambiar precisamente esa fuente.

Aquí, de nuevo, viene CSS al rescate, pues cambiar de fuente tipográfica con CSS es muy fácil, y solo necesitas conocer – para empezar – dos códigos CSS fundamentales: font-family y font-size.

Ejemplo de uso:

/* Cambio de tipografía para los párrafos a Verdana en 20 píxeles */
p {
font-family: verdana;
font-size: 20px;
}

¿Cómo se añade o modifica el CSS en WordPress?

Una vez que hayas aprendido los códigos básicos de CSS vas a querer aplicarlos ¿verdad?

CSS adicional del Personalizador de WordPress

En WordPress tienes varias maneras de aplicar tus conocimientos, y el primero es el personalizador. Solo tienes que ir a la administración de tu WordPress y acceder a Apariencia → Personalizar → CSS adicional para empezar a aplicar tus códigos CSS personalizados. Cualquier código CSS que añadas se aplicará omitiendo los estilos CSS del tema existentes y, si no fuera así, siempre puedes añadir !important.

Solo tienes que empezar a escribir tu código CSS en la caja que encontrarás.

Este personalizador tiene algunas características que te ayudarán a la hora de escribir CSS, como la numeración de líneas automáticas, cierre automático de corchetes o aviso de errores de código.

Editor de temas de WordPress

Otro lugar donde puedes modificar o añadir códigos CSS es en el editor de temas integrado en WordPress.

Una vez ahí simplemente selecciona el tema, luego el archivo a editar, que normalmente el principal será style.css,  y empieza a aplicar tu CSS personalizado.

Aquí debes tener siempre la precaución de no modificar directamente el CSS del tema activo principal, pues cuando actualices el tema se perderían las modificaciones.

La manera de evitarlo es crear un tema hijo y editar el CSS ahí. Pero mi consejo es que uses siempre el personalizador, como hemos visto antes, ahí es seguro aplicar cambios de CSS, no se perderán al actualizar el tema ni tienes que crear un tema hijo.

CSS inline

Otro modo de añadir código CSS es hacerlo integrado en el HTML, lo que se conoce como inline.

Básicamente a lo que se refiere con este término es a que el CSS se escribe dentro del HTML específico al que se aplicará.

Esto es especialmente útil cuando quieres aplicar alguna personalización de CSS no a un tipo de selector, ni siquiera a un selector concreto, sino a una instancia específica y única de un elemento.

Por ejemplo, si quieres que un párrafo concreto de un texto tenga un color diferente al definido por el CSS, puedes editarlo como HTML y añadirle el CSS integrado, inline.

<h1 style="color: white; text-align: center;">Este es un encabezado distinto al resto</h1>

Editor de código

Aunque normalmente vayas a usar el personalizador de WordPress para personalizar tu CSS te recomiendo que tengas siempre a mano y empieces a acostumbrarte a usar un editor de código.

Mi favorito es Visual Studio Code, disponible gratis para todos los sistemas operativos, pero hay muchos, tanto gratuitos como de pago.

Estos editores de código van mucho más allá de una simple caja para escribir código, ofrecen ayudas de código genéricas e incluso específicas para WordPress, todo tipo de lenguajes de programación, herramientas de depuración de código, organización por proyectos, todo lo que un programador profesional necesita, pero fácil de usar también para el principiante.

Para modificar o añadir CSS con un editor de código propio tienes primero que acceder al archivo a editar mediante una aplicación de FTP.

Resumiendo

Aunque ya hemos visto que el HTML es la base de la web, solo cuando aprendas CSS vas a ver las infinitas posibilidades de personalización a las que vas a acceder, sin depender de tu tema WordPress ni de ningún maquetador.

Además, el código CSS es muy agradecido, pues son cosas que se ven al instante, que aportan valor y diseño a tu web, y que con muy poco esfuerzo y unos conocimientos básicos puede permitirte lanzarte de lleno en el diseño web, para seguir aprendiendo y mejorando, a tu ritmo.

¿Quieres seguir aprendiendo CSS?

¿Te has quedado con ganas de más? ¿quieres aprender más valores que puedes cambiar en tu web? Aquí tienes un enlace fundamental para seguir aprendiendo:

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(5 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba Ir al contenido