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.

aprender 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í:

h2 {

font-familyRaleway, Helvetica, Arial, Lucida, sans-serif;

font-size29px;

color: #000000;

La primera propiedad se refiere al tipo de letra, la segunda al tamaño y la tercera al color. Conociendo esto, puedo cambiar cualquiera de ellas, por ejemplo:
h2 {

font-familyRaleway, Helvetica, Arial, Lucida, sans-serif;

font-size15px;

color: #f13367;

Prueba tus cambios usando la opción inspeccionar de tu navegador para comprobar si funciona correctamente y no  has cometido ningún error de sintaxis. Te aconsejo que uses Google Chrome o Mozila para hacer esto.

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

Uso de cookies

Este sitio web utiliza cookies para mejorar tu experiencia de navegación. Si continúas navegando estás dando tu consentimiento para la aceptar las cookies y nuestra política de cookies

ACEPTAR
Aviso de cookies
claves para tener una web de exito

Consigue gratis el Ebook que va a revolucionar tu página web

Suscríbete y recibe gratis las claves para tener una web de éxito.

No olvides confirmar tu suscripción, te llegará un mail de confirmación :)

Pin It on Pinterest