¿Quieres aprender CSS desde cero fácilmente?

Una de las cosas que más pereza da a la hora de crear un blog en WordPress, es modificar la plantilla para dejarla a tu gusto. Si no sabes programar, ponerse a aprender css desde cero puede ser una puta pesadilla.

Empiezas a ver códigos raros, no sabes qué tocar para que algo salga como quieres, destrozas lo que ya estaba bien y hasta el punto de desesperarte y tener ganas tirar el ordenador por la ventana.

Si, sé lo que es, pero créeme que no hay nada que dé más satisfacción que cambiar el diseño de títulos, letras, colores, parágrafos, bloques y otros detalles para hacer que tu web esté tal y como tú quieres.

Por suerte, hoy en día muchas plantillas WordPress permiten cambiar muchas de estas cosas fácilmente pero siempre falta algo, siempre hay algo que se te resiste.

Si sabes CSS y conoces cómo cambiar los estilos de una web, creo que este post no te va a aportar mucho pero si quieres entender como funcionan los estilos y cómo puedes cambiarlos de manera muy sencilla, sigue leyendo porque te va a interesar.

Aprender CSS desde cero es fácil

Este artículo está muy enfocado a aquellos que tienen un blog o una web, no tienen conocimientos de programación o diseño y de vez en cuando les gustaría cambiar o modificar algo de su plantilla de la manera más fácil posible.

Vamos a hacerlo muy sencillo para que lo entiendas, una web hecha en WordPress está programada en PHP (un lenguaje de programación que hoy no te interesa para nada), HTML y CSS.

A grandes rasgos, en PHP está hecho todo el esqueleto y las funcionalidades internas de la web, en HTML la estructura de lo que tú ves por pantalla y en CSS el diseño y los estilos de lo que estás viendo.

Ahora, después de esta explicación tan patillera, gráfica y sencilla, los diseñadores web expertos tenéis permiso para abrirme en canal con vuestras críticas...

Pero yo me voy a hacer el sordo ya que aprender CSS desde cero no es fácil y lo quiero hacer todo muy sencillo...

Venga, voy a hablar de lo que te interesa, o sea de la estructura y los estilos que tú puedes modificar fácilmente para que te guste más cómo se ve tu web. Todo de manera muy sencilla para que cualquier novatillo pueda hacerlo.

Incluso tú, que siempre dices que eres un negado con la tecnología 😉 😛

¿Cómo saber qué tienes que tocar?

Esta es una pregunta que seguro que te has hecho miles de veces.

Para aprender css desde cero y saber cómo modificar fácilmente los estilos de tu blog, será más fácil ver un ejemplo concreto para saber exactamente:

  1. Qué se toca
  2. Cómo se toca
  3. Dónde se toca

Para obtener el resultado esperado.

Vamos a ponernos en el caso concreto de que quieres cambiar el tamaño y color de los títulos principales de tu web, algo sencillo para empezar.

Para poder hacerlo, primero tendrás que saber qué etiqueta HTML y qué clase concreta afecta a esos títulos. Todo esto te puede sonar a chino pero enseguida lo entenderás mucho mejor.

Para saber esto, tendrás que inspeccionar desde tu navegador uno de los títulos que quieras modificar y ver a que etiqueta y clase afecta. Una vez veas esto, podrás identificar qué estilos está cargando y modificarlos o añadir nuevos para que se vea tal y como quieres.

En el siguiente video te enseño qué es una etiqueta HTML, qué clase afecta a una etiqueta concreta y cómo descubrirlo desde el navegador Google Chrome.

También te enseñaré a modificar directamente desde el navegador los estilos de tu web para que te vayas haciendo una idea de lo que puedes hacer una vez empieces a tocar CSS.

Ya verás que es muy sencillito y tan práctico que podrás hacerlo a la vez que ves el video y con cualquier web.

¿Cómo modificar los títulos de tu blog?

Ahora ya te has familiarizado con la herramienta para desarrolladores de tu navegador por lo que ya estás listo para entrar de lleno a modificar estilos 😛

Con lo visto en el video anterior ya no estás en el nivel aprender CSS desde cero, ahora igual estás en el aprender CSS desde uno pero eso ya es una avance, ¿no? 😛

Recuerda que en el primer video hemos hecho los cambios sobre el navegador por lo que al actualizar la página se perdían los cambios.

En el siguiente video vamos a hacerlos de manera permanente para que tu web ya tenga esos estilos cada vez que cargues la página.

2 cosas a tener en cuenta antes de ver el video y seguir las instrucciones:

  1. Antes de hacer ningún cambio te recomiendo que hagas una copia de seguridad (un backup) de tu web ya que hay que instalar un plugin y siempre es mejor ser previsor antes que liarla y no saber cómo volver atrás.
  2. Si tienes un plugin de caché o tu hosting controla la caché a nivel de servidor, igual no ves los cambios de manera automática. En caso de que suceda algo así, limpia la caché cada vez que hagas un cambio o pídele a tu hosting que haga que la caché no afecte a estos cambios.

Ahora si, vamos a ver cómo modificar los estilos y el CSS de tu web para cambiar el diseño de los títulos de tu blog.


Te dejo el código que he aplicado para estos cambios por si lo quieres usar. Tendrás que comprobar si las clases son las mismas y en caso de que no lo sean (que sería lo normal) modificarlas por las tuyas.


.entry-title {
font-size: 40px !important;
}
.content h1 {
color: #00a99d;
text-align: center;
}

Probablemente si quitas el .content (porque es casi seguro que tu tema no tendrá esta clase) y dejas solo h1 te funcionará perfectamente.

¿Quieres seguir aprendiendo y conociendo nuevos trucos CSS?

Me gustaría saber si te gusta este tipo de contenidos más prácticos y aplicables en los que te enseño trucos sobre diseño web para que tú mismo los puedas aplicar a tu blog.

Si es así, cada cierto tiempo publicaré algunos trucos de programación en CSS o HTML que te puedan ser de utilidad para que puedas mejorar tu blog y tenerlo personalizado y a tu gusto.

Este primer artículo contiene información muy sencilla y elemental pero más adelante podemos profundizar sobre cosas más interesantes que te preocupen acerca del diseño de tu blog y enfocarnos en algo de CSS más avanzado pero siempre explicado para novatos:

  • Cambiar el diseño de las listas numeradas
  • Cómo hacer una página con varias columnas en WordPress
  • Cómo hacer un bloque de precios atractivo
  • Cómo crear botones atrayentes
  • Cómo hacer bloques con el ancho completo para Landing Pages
  • ... y lo que se nos ocurra
¿Te interesa? Proponme temas que te gustaría aprender acerca de diseño web y los incluiré en futuros artículos. Cuéntamelos en los comentarios y prometo darles solución 😀

¿Quieres tener tu propio negocio online?

Te enseño los pasos para que aprendas a validarlo con éxito

Deja un comentario

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

Acepto la política de privacidad *

Surfea tu Vida te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Victor Lloret Cerezo (Surfea tu Vida) como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicito es para gestionar los comentarios que realizas en este blog. No se comunicarán estos datos a terceros. Legitimación: Consentimiento del interesado. Como usuario e interesado te informo que los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Surfea tu Vida) fuera de la UE en EEUU y acogido al acuerdo EU-US Privacy Shield, aprobado por el Comité Europeo de Protección de Datos. Ver política de privacidad de Webempresa.

El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios tiene como consecuencia no poder atender tu solicitud. Podrás ejercer tu derecho de acceso, rectificación, cancelación y oposición al tratamiento de tus datos personales, en los términos y en las condiciones previstos en la LOPD dirigiéndote a la dirección de correo electrónico victor@surfeatuvida.com así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://www.surfeatuvida.com/, así como consultar mi política de privacidad. Al enviar tu comentario, algunos datos como tu nombre, correo electrónico y web quedan almacenados en una cookie para volver a utilizarlos en futuras visitas. Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

6 comments on “¿Quieres aprender CSS desde cero fácilmente?”

  1. Extraordinario artículo, Víctor. Es de los que son útiles de verdad. A veces hay cosas que, explicadas sencillas, están al alcance de casi cualquiera. Es importante enseñar a perder ciertos "miedos" con la tecnología y este tipo de entradas lo consiguen. Muchas gracias.

    Como sugerencia, me llama la atención cómo modificar CSS en plugins de WordPress. Tengo alguno al que quiero meter mano 😉

    Un abrazo

    1. Hola Paco, muchas gracias!! Ese era el objetivo con este post, explicar algo de manera muy sencilla, quitando miedo y llegando a todo el mundo. Sin atosigar con demasiado conocimiento, poco a poco.

      Empezando por algo muy sencillo y práctico para ver resultados inmediatos y ver que no todo lo que tiene que ver con el diseño es tan tan complicado, hay cosas que si sabes qué tocar son relativamente sencillas.

      Me apunto tu sugerencia aunque ahí ya te metes en temas más avanzados, pero le haré un hueco sin problemas 😉

      Un abrazo!!

    1. Gracias José!! 😀

      La idea es esa, un video muy fácil y práctico para dejar de pensar que todo lo que tiene que ver con diseño o programación es Matrix jajaja

      Si se te ocurre cualquier sugerencia para el próximo post de este tipo, que tus lectores o clientes te pregunten o algo así, solo me lo tienes que decir y lo toco en el siguiente.

      Un abrazo y gracias! 😛

  2. Al fin he tenido tiempo para empaparme de tus truquillos 🙂

    Me ha encantado Víctor, de hecho no tenía ni idea cómo cambiar el estilo de la fuente del body (y lo hacía manualmente en cada post)... así que imagínate.

    No conocía la herramienta de desarrollador y la verdad que ha sido un gustazo, aunque he de decirte que con el plugin no se me cambiaban los títulos y tal, tenía que entrar directo a editar el css del tema. Pero me he movido genial y todo perfecto 😉

    PD: Estoy trabajando con el trabajo fin de carrera y es un proyecto en el que tendré que crear una página web a base de HTML 5, PHP y CSS, estoy empezando a hacer varios cursos de html sobre todo, y artículos así sobre CSS vienen genial para poder aplicarlo al estilo de la web 😉

    ¡Un abrazo!

Surfea tu vida con tu Negocio online

Vamos a darle vida a tu web

Soy tu diseñador web freelance de confianza, estoy especializado en WordPress y en Negocios online así que puedo ayudarte a crear la web de tus sueños para tu proyecto. 
¡Contáctame y hablamos!
QUIERO TRABAJAR CONTIGO

Sígueme la pista

Copyright © 2019 · Surfea tu Vida
Contenido a cargo de Victor Lloret. Todos los derechos reservados.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram