Aprender CSS de manera fácil para modificar el aspecto de tu plantilla de WordPress

Si tienes una web o un blog hecha con WordPress y te gusta trastear y hacer modificaciones, necesitas animarte a aprender CSS cuanto antes. Si eres como yo, de letras, una persona que tiene una ligera ansiedad cuando ve un conjunto de símbolos que no tienen sentido aparente, y eso te echa para atrás a la hora de atreverte con el CSS, no te preocupes, ¡no es tan difícil como parece! En este artículo te cuento qué es el CSS, que cambios te permite realizar en tu plantilla o theme de WordPress y dónde puedes empezar a aprender a manejar este lenguaje fascinante.

¿Qué es el CSS?

CSS son las siglas de Cascading Stylesheets, un lenguaje utilizado para establecer el diseño de una página web que ha sido escrita en HTML o XHTML. Digamos que con HTML se escribe la estructura de la página y con CSS le damos el aspecto final a esa estructura cambiando colores, tamaños de texto, tipografías, espaciados entre elementos, capas, etc.

Hasta la aparición del CSS todo esto se introducía también dentro del código HTML. La ventaja del uso del CSS es que podemos tener todo el estilo de una página web en un documento separado, evitando tener que repetir la información una y otra vez y facilitando la aplicación de cambios a nivel global en toda la web.

A pesar de que todos estos lenguajes en principio parecen muy complicados, el CSS resulta un lenguaje muy intuitivo y es bastante fácil de aprender.

¿Qué puedes modificar en tu plantilla de WordPress sabiendo CSS?

Muchas veces elegimos una plantilla para nuestra página web y nos encontramos con importantes limitaciones a la hora de hacer pequeños cambios. Aumentar un espaciado entre dos secciones, cambiar el tipo de letra o su tamaño, cambiar el color de un botón, el ancho de un borde, etc. puede parecer imposible si tu plantilla no tiene miles de opciones de personalización y no sabes CSS. En cambio si conoces este lenguaje se te abre un sinfín de posibilidades para personalizar tu theme y hacer cosas como:

• Cambiar el aspecto de los botones: color de fondo, tamaño, tamaño del texto, bordes, color del texto, etc.
• Eliminar elementos, cambiar espaciados entre elementos, cambiar la disposición de elementos, etc.
• Personalizar el aspecto de la tipografía: cambiar tipo de letra, color, tamaño de cada tipo de texto (párrafo, H1, H2, etc.), espaciado entre caracteres o líneas, etc.

Por suerte los temas de WordPress están creados de tal forma que su aspecto se puede modificar fácilmente mediante CSS. Desde la actualización a WordPress 4.7, no importa qué plantilla estés usando porque siempre tendrás la posibilidad de añadir CSS personalizado en el apartado Apariencia / Personalizar / CSS adicional. Esto introduce un editor bastante simple y simplifica mucho las cosas porque antes dependía de la plantilla que usaras el hecho de que tuviera un apartado especial en sus ajustes para añadir el CSS personalizado y si no lo tenía, tenías que usar un Child Theme. Aunque es recomendable solo para pequeños cambios, para proyectos más complejos te recomiendo usar el plugin Simple Custom CSS, que muestra el código identificando clases y valores CSS resaltado por colores facilitando el trabajo.

¿Cómo ver el CSS de tu plantilla?

Para entender mejor el diseño de tu plantilla, tienes la posibilidad de inspeccionar el CSS de cualquier elemento del diseño de manera fácil y con ayuda de tu navegador. Para hacerlo, posa el ratón sobre cualquier elemento, haz click en el botón derecho y selecciona la opción inspeccionar. Entonces aparecerá una nueva sección en la parte inferior de tu pantalla con dos pestañas, la de la izquierda para el HTML y la de la derecha para el CSS.

Ahí podrás ver qué propiedades han sido aplicadas en un elemento en particular y puedes incluso cambiarlas para ver cómo quedaría en tiempo real. Luego tendrás que copiar el código que hayas modificado en el área de tu plantilla dedicada al CSS personalizado o en su defecto, a través del plugin que te recomendé en el apartado anterior o de la opción de CSS personalizado de WordPress.

Por ejemplo, si me coloco en cualquier palabra de uno de los subtítulos texto de mi web y sigo los pasos que te he contado, me puedo encontrar con algo así:

¿Dónde puedes aprender CSS poco a poco fácilmente y gratis?

Internet está lleno de tutoriales sencillos para aprender CSS poco a poco y gratis.

• Code Academy Con su curso básico Learn HTMl & CSS podrás aprender los básicos de estos dos lenguajes.
• W3Schools Aquí encontrarás todas las modificaciones que puedas imaginar para hacer cambios en el CSS de tu plantilla.
• HTML.es Un buen y completísimo tutorial de CSS en español organizado por temas.
• Ciudadano cero también ofrece una guía en español bastante completa y muy bien explicada para principiantes.
• Consejos para escribir mejor CSS