La guía rápida para aprender CSS básico desde cero

Cuando trabajas con páginas web hay una diferencia enorme entre saber manejar solamente herramientas como WordPress o Joomla que te hacen el trabajo más fácil porque te abstraen de las tecnologías subyacentes a las páginas web o tener conocimientos, incluso solamente básicos, de estas tecnologías que son, fundamentalmente, HTML y CSS.

guia rapida aprender css

Imagen de Shutterstock - © Alies Interactive

Créeme, simplemente no hay color en cuanto al techo de tus posibilidades. Por eso, seas blogger o cualquier otro perfil de persona que trabaja en la web, te recomiendo tan encarecidamente que aprendas los fundamentos de estas dos tecnologías, los cuales, además, no son nada difíciles de entender.

En un post anterior le tocó el turno a un tutorial básico de HTML y hoy toca el post sobre las hojas de estilo en cascada o CSS (Cascading Style Sheets en inglés). Si HTML es el lenguaje con el que se construyen los contenidos de una página, las hojas de estilo CSS son el lenguaje en el que se usa para trabajar el diseño de cualquier web actual.

Si no tienes aún conocimientos de HTML, te recomiendo encarecidamente que te leas antes el tutorial de HTML ya que no tienen mucho sentido aprender CSS sin saber, al menos, algo de HTML.

Aprender CSS es fácil si te lo planteas bien

Incluso con una herramienta como WordPress (que francamente te recomiendo como mejor opción para crear una web “normal” hoy en día) dónde en principio se supone que las miles y miles de plantillas de diseño (temas WordPress) de las que goza WordPress harían innecesario cualquier conocimiento de CSS, no habrá color entre saber o no saber un poco de CSS.

Tener simplemente unos conocimientos básicos de CSS como los que puedes adquirir en este post y no estar limitado a las opciones de configuración de la plantilla de turno te llevará a otro nivel en lo que serás capaz de hacer con tu web.

En el caso de WordPress, por ejemplo, saber un poco de HTML y CSS significa que la plantilla ya no marca el techo de lo que puedes hacer con tu blog o tu web basada en WordPress. Incluso con temas gratuitos muy simples y un poco de imaginación y habilidad podrás conseguir unos resultados que te sorprenderán, y mucho.

Aunque una hoja con reglas CSS de una web grande y compleja, como lo puede ser este mismo blog, ciertamente puede llegar a intimidar un poco cuando la ves las primeras veces, pero no te asustes: los fundamentos básicos de CSS son muy fáciles de aprender y ya te van a dar mucho juego.

Lo que ocurre simplemente es que se trata de una especificación muy grande y muy potente, de ahí que un diseño CSS profesional puede ser algo realmente muy sofisticado. Pero te aseguro que en el 99% de las ocasiones con un nivel medio-básico te apañarás más que de sobrada y llegar a este nivel de conocimientos, insisto, no es muy complicado si e echas un poco de ganas.

¿Cómo funcionan las hojas de estilo en cascada?

Las hojas de estilo CSS son un conjunto reglas que enumeran en un fichero .css y que describen el aspecto que deben tener los diferentes elementos HTML de una página.

Lo interesante de esto es que funcionan con una filosofía de patrones o plantillas, es decir, no es necesario especificar cada uno de los elementos, sino que se pueden definir reglas como estas dos:

  • “Los títulos de nivel 1 y 2 han de ser de color negro y un tamaño de fuente de 16 y 14 pixeles respetivamente.”
  • “El texto de los párrafos están alineados a la izquierda, tienen un tamaño de fuente de 12 pixeles y un color gris oscuro.”

A modo de comparación, si dominas el uso de estilos en Microsoft Word, verás que esto se parece mucho al concepto de estilo en Word, aunque las CSS son infinitamente más potentes que Word en todas sus posibilidades.

Veamos un ejemplo concreto de cómo se expresarían las reglas anteriores en el lenguaje de las CSS:

h1, h2 {
  color: black;
  font-size: 16px;
}

h2 {
  font-size: 14px;
}

p {
  color: rgb(32,32,32);
  text-align: left;
}

Los conceptos clave en las hojas de estilo CSS

Este ejemplo muy sencillo de reglas CSS ya nos sirve perfectamente para habla de los conceptos clave que hay que tener claros en todo esto.

¿Te dedicas al diseño web pero no consigues hacerlo rentable?

Pues entonces descubre el curso gratuito que te hubiese cambiado la vida cuando empezaste como diseñador web freelance.

Haz clic en el botón de abajo para descubrir:

  • En qué estás fallando. ¿Por qué otros viven de esto y a ti te cuesta tanto?
  • Los secretos para adelantar a tu competencia por la derecha.
  • Cómo multiplicar por tres tus ingresos sin hacer más webs, ni subir precios.
  • 16 palabras y mensajes de venta que todo diseñador debería borrar de su web.
  • Cómo hacer páginas web de 400€ en menos de 4 horas.

Y estos son sólo 5 ejemplos de un total de 18 vídeos con más de 5 horas de grabación totalmente gratis (sí, gratis de verdad).

Reglas, selectores y propiedades

En el ejemplo anterior tenemos un total de 3 reglas, cada una se compone de un selector que indican a qué elementos HTML aplica la regla que es el texto que precede a las llaves de apertura y cierre de la regla. En la primera regla, el selector es “h1, h2”, en la segunda “h2” y en la tercera “p”.

Cada regla se compone a su vez de propiedades que especifican qué exactamente se hará con esos los elementos HTML a los que aplica.

El selector de la primera regla, por ejemplo, indica que esta regla se refiere a los elementos HTML <h1> y <h2> y que a ellos se aplicarán el color negro (propiedad “color”) y un tamaño de letra de 16 pixeles al texto (propiedad “font-size”).

Hay cientos de propiedades de las cuales destacaré luego las que, en mi experiencia, me han parecido las más frecuentemente usadas y más útiles. En cuanto a los selectores, los ejemplos han sido triviales puesto que se refieren a elementos HTML sin más, pero hay formas mucho más sofisticadas de diseñar selectores.

Un ejemplo rápido de esto:

p a {
  text-decoration: underline:
}

p.text-izq {
  text-align: left;
}

En la primera regla se han anidado dos elementos para indicar que esta regla sólo se refiere a enlaces (etiqueta <a> en HTML) dentro de párrafos de texto (etiqueta <p> en HTML) y que a estos enlaces se le aplicará un subrayado. Es decir, esta regla no aplica a elementos <a> que no se encuentren dentro de un párrafo (<p>).

En la segunda regla se ha especificado algo parecido, pero jugando con un elemento y un atributo de clase (ver estos conceptos en el tutorial HTML). Es decir, esta regla aplicará a párrafos que contienen un atributo “class” con el valor “text-izq” tal como éste:

<p class=”text-izq”>Texto del párrafo</p>

Fíjate que en la regla “text-izq” empieza con un punto. Es la manera de especificar en el lenguaje CSS que “text-izq” se refiere a un atributo de clase.

No voy a profundizar más aquí puesto que este post no pretende ser un curso completo de CSS. Sin embargo, ya sólo con esto ya tienes cierto juego y creo que puedes ver la filosofía de cómo funcionan los selectores y qué pretenden. Para profundizar en el tema selectores te recomiendo esta referencia sobre los selectores básicos y esta otra sobre los avanzados.

La cascada: herencia, sobreescritura y conflictos de estilos

El nombre de hojas de estilo en “cascada” no es casual, expresa que los estilos que especifican con reglas se pueden heredar de una manera jerárquica.

Es decir, veamos esta regla:

body {
  font-family: Arial;
}

Aquí estamos diciendo que la etiqueta <body> que es la que envuelve el contenido de cualquier página web tenga un tipo de letra “Arial”. Esto no tendría mucho sentido si no fuera porque gracias a la capacidad de herencia de las reglas de este modo por defecto cualquier elemento hijo como un título o un párrafo va a “heredar” ese estilo, salvo que especifique lo contrario como, por ejemplo, en esta regla:

p {
  font-family: Verdana;
}

En esta última regla aplica el principio de “especificidad”. En principio, se plantearía un conflicto entre la regla general de <body> con lo que dice la regla de <p>, pero se resuelve fácilmente puesto que se aplica la regla más específica y referirse a un párrafo es más específico que referirse a “los elementos hijos que pueden dentro de <body>”.

Si necesitas un hosting para tu web o tienda online, ¡actúa!

Aviso: estas ofertas son válidas ahora, pueden vencer en unos pocos días.

Igualmente, una regla con un selector “p a” (enlace dentro de un párrafo) tendría precedencia sobre una regla con un selector “a” que se refiere a un enlace a secas.

De nuevo, sabiendo esto, te apañaras bien en el 99% de los casos. Pero lo cierto es que el tema de la precedencia de las reglas entre sí tiene cierta tela, si lo quieres conocer más a fondo, échale un vistazo a esta referencia.

Un ejemplo práctico

Ahora que creo que ya vas viendo cómo funciona esto, te propongo un pequeño ejercicio práctico para jugar un poco con tus nuevos conocimientos: modificar el diseño este blog cambiando una de sus reglas CSS, concretamente el color de los títulos de los posts. Y tranquilo: el cambio sólo afectará a la página en tu navegador, mi blog no sufrirá daños 🙂

Para ello te propongo utilizar la herramienta de inspección de código que traen consigo las versiones actuales de los navegadores FireFox, Chrome o Microsoft Edge (el antiguo Internet Explorer). Con ellas puedes ver y manipular el código de una página web tanto a nivel de HTML como a nivel de CSS de una manera realmente cómodo e intuitiva.

En cualquiera de estos navegadores se activa la herramienta con F-12, en el ejemplo he usado Firefox que es la que más me gusta en conjunto, aunque utilizo también mucho la de Chrome.

En este vídeo-tutorial puedes aprender a utilizar la herramienta de Chrome que es muy similar a la de FireFox:

El ejercicio que te propongo es cambiarle el color a los títulos <h1> de los posts en este blog.

Para ello, necesitamos encontrar la(s) regla(s) CSS que determina(n) la estética de estos títulos. Gracias a estas herramientas esto es tan simple como realizar los siguientes 4 pasos que puedes ver en la captura de abajo:

  1. Activar el selector de elementos con el icono al que apunta la flecha en el paso 1.
  2. Una vez activado, puedes colocar el ratón sobre el elemento a examinar. En Firefox me gusta particularmente cómo los resalta. Además puedes ver cómo en el cuadro indica que el selector empleado en el HTML es “h1.entry-title”, es decir, aplican las reglas para etiquetas <h1> y la clase “entry-title”. Luego vemos estos conceptos un poco más despacio.
  3. Dentro del árbol de código HTML, se ha identificado el elemento HTML exacto que has seleccionado antes con el ratón. Fíjate como concuerda con las reglas CSS.
  4. En el lado derecho se listan todas las reglas que concuerdan con el elemento <h1> y la clase “entry-title” que corresponden al elemento HTML seleccionado. Los blogs WordPress suele tener muchas reglas CSS de diferentes ficheros, por eso verás que salen varias reglas. Lo importante es que el orden de prioridad es de arriba abajo.

Echa ahora un vistazo con calma a la siguiente captura de pantalla y observa cómo se reflejan estos cuatro pasos en ella. Intenta reproducirlos en tu ordenador.

inspector elementos chrome
Los inspectores de código incorporados en los navegadores son tremendamente útiles cuando se trabaja con HTML y CSS.

Ahora toca modificar el título. Para ello vamos a modificar la siguiente regla:

h1, .fpost .entry-title {
  font-size:33.6px;
}

Añadimos una línea (haz clic con el ratón justo delante de “font-size” y podrás editarla) para que quede así:

h1, .fpost .entry-title {
  font-size:33.6px;
  color: red;
}

El resultado estético es discutible, pero desde luego nadie podrá discutir que el cambio se ve con claridad 🙂

Propiedades básicas que deberías conocer

Ahora que conoces la filosofía básica y conoces también una herramienta magnífica para experimentar con CSS como lo son las herramientas de inspección de código de los navegadores, simplemente probando propiedades interesantes, ya podrás hacer un montón de cosas, por eso, te dejará una lista de lo que me parecen las propiedades más útiles.

Como temas WordPress premium te recomiendo Divi y GeneratePress

Consulta también aquí las mejores plantillas WordPress

Solamente adjunto una descripción muy breve a cada una, la descripción detallada la encuentras en sus respectivos enlaces.

Mi consejo es: juega un poco con las siguientes propiedades y diferentes selectores para ver qué pasa. Cuánto más simple, mejor al principio. Ahora bien, no te quedes para siempre en el “trasteo”, si quieres aprender CSS como es debido, has de hacerlo con un poco de orden por lo que te recomiendo que, después de una fase de jugar y experimentar, lo aprendas de una manera más estructurada con el material que te aporto al final del post.

1. Maquetación básica

  • width: Ancho de un elemento.
  • height: Alto de un elemento.
  • vertical-align: Alineamiento vertical dentro de un elemento.
  • margin: Espacio que se añade entre el elemento y sus vecinos. Se puede diferencia por lado (arriba, abajo, izquierda, derecha).
  • padding: Relleno interior que se añade en los bordes del A diferencia de margin, cuenta para el tamaño del elemento.
  • float: Mueve el elemento todo lo posible hacia el lado indicado. Esta propiedad se usa en el posicionamiento flotante de CSS. El tema del posicionamiento en CSS no es trivial y conviene estudiar cómo funciona antes de usar esta propiedad.

2. Fuentes y texto

3. Color y fondos

  • color: Color del elemento. Se puede especificar en diferentes formatos como palabras predefinidas (red, green, etc.) RGB o como valor hexadecimal.
  • background-color: Color del fondo del elemento.
  • background-image: Permite especificar una imagen de fondo.
  • background-repeat: Permite usar una imagen a modo de mosaico en diferentes modalidades.
  • box-shadow: Crear un efecto de sombra para un elemento.

4. Listas

  • list-style-image: Usar la imagen especificada como viñeta para la lista.
  • list-style-type: Diferentes estilos de viñetas y estilos de numeración para elementos de lista.

5. Bordes

  • border: Añade un borde a un elemento y establece algunas propiedades (grosor, estilo de línea, etc.)
  • border-color: Color del borde.
  • border-style: Diferentes estilos para el borde (sólido, puntos, etc.)
  • border-radius: Permite crear esquinas redondeadas para un elemento.

Vincular los estilos CSS a páginas HTML

Ya sabes cómo crear reglas CSS, ¿pero cómo se aplican a una página HTML?

Para ello tienes básicamente 3 opciones:

1. Hojas de estilo CSS inline

La primera opción consiste en usar el atributo “style” en un elemento HTML tal como se puede ver aquí:

<h1 style=”font-family:Verdana; color:red”>Título de nivel 1</h1>

En este caso, no hay selector puesto que no hay elemento que seleccionar, es el que es. Por tanto, se especifican simplemente las propiedades a aplicar al elemento en cuestión. Este tipo de reglas tienen mayor prioridad de todas las reglas.

Se suele recomendar encarecidamente evitar esta manera de vincular estilos CSS puesto que al tener que aplicarse a cada elemento individualmente, implican un esfuerzo y mantenimiento disparatado.

No obstante, hay casos de uso muy concretos en los que son prácticas. Por ejemplo, en un widget sencillo de WordPress que permita configurar directamente ciertas propiedades CSS desde su interfaz de configuración puede ser una buena opción implementar estas propiedades con esta técnica.

2. Hojas de estilo CSS internas

La segunda opción es escribir las reglas dentro de un elemento <style> dentro de esta etiqueta que, a su vez, se encontraría dentro del elemento <head> de la página HTML.

Obviamente la desventaja es que en este caso las reglas sólo son visibles para esa página concreta en las que se han declarado y no se pueden usar para otras páginas.

3. Hojas de estilo CSS externas

La última opción es la más usad y consiste en crear uno o varios ficheros con extensión “.css” en los cuales se declaran las reglas CSS.

La manera de vincular estas reglas a una página HTML consiste en referencia el fichero .css desde esa página. De este modo se puede crear un fichero global para una web entera y usarlo en todas las páginas que se quiera.

En este caso, la declaración también se incluye dentro del elemento <head> y tiene el siguiente aspecto:

<link rel="stylesheet" type="text/css" href="/css/estilos-1.css" />
<link rel="stylesheet" type="text/css" href="/css/estilos-2.css" />

Aquí hay que tener también en cuenta que en el caso de usar varios ficheros el orden de inclusión marca precedencia en el orden inverso. En el caso de existir un conflicto por haber diferentes reglas con igual selector en varios ficheros, las reglas de los ficheros siguientes sobreescriben los anteriores.

Es decir, si en estilos-1.css tenemos una regla  como:

p a {
  text-decoration: underline;
}

Y luego en estilos-2.css otra que dice:

p a {
  text-decoration: none;
  color: blue;
}

La propiedad “text-decoration” genera un conflicto que se resuelve dando prioridad a la propiedad de estilos-2.css.

Personalizar CSS en blogs: WordPress y Blogger

Como la gran mayoría de los lectores de este post son bloggers, es obligada una pequeña referencia del tema CSS en blogs. Solamente haré unos breves apuntes ya que en su momento dedicaré un post específico a cómo personalizar blogs usando CSS.

CSS en Blogger

Si tienes un blog en Blogger estás de suerte porque uno de los puntos más fuertes de esta plataforma gratuita es que te permite trabajar directamente con HTML y CSS para personalizar tus plantillas. Por tanto, en Blogger lo tienes fácil.

Aquí te dejo un vídeo con un pequeño tutorial que explica cómo se hace esto:

CSS en WordPress.org

En el caso de WordPress.org (la versión descargable que se instala en un hosting propio) también lo tienes muy fácil. El famoso plugin Jetpack trae entre sus +30 módulos uno que permite editar reglas CSS que se añadirán a WordPress. Por otra parte, está también el plugin Simple Custom CSS, una alternativa muy interesante a Jetpack que sólo implementa esta funcionalidad y, por tanto, bastante más ligero que Jetpack.

Te recomiendo encarecidamente alguno de estos plugins para crear estilos CSS para tu blog WordPress y que no toques directamente el código del tema (normalmente el fichero style.css que viene entre los ficheros del tema) como hace mucha gente alegremente una vez que aprenden un poco de esto.

La razón es que, primero, con cada actualización del tema se macharían tus cambios y, segundo, que tu personalización la pierdes también en el momento que cambies de tema. Con los plugins evitas estos problemas.

Si necesitas un hosting para tu web o tienda online, ¡actúa!

Aviso: estas ofertas son válidas ahora, pueden vencer en unos pocos días.

CSS en WordPress.com

En WordPress.com, la plataforma gratuita que no requiere hosting propio, por desgracia, una de sus limitaciones es que, por defecto, no puedes trabajar directamente con estilos CSS.

Para poder hacer esto tienes que pagar por una mejora llamada Custom Design la cual te permite personalizar fuentes y crear estilos CSS propios.

Referencias para profundizar más

Espero que este post te haya permitido atisbar el potencial que tienen los estilos CSS. Si te ha llamado la atención el tema y quieres aprender a fondo a usar estilos CSS, te recomiendo los siguientes recursos:

  • Introducción a CSS: Un magnífico libro online y gratuito de librosweb.es, totalmente recomendable para principiantes. Aunque ya tiene unos años me sigue pareciendo muy bueno para empezar y llegar de conocimiento medio que ya permite hacer cosas muy serias.
  • CSS avanzado: La versión avanzada del libro anterior.
  • CSS Tricks: Un blog genial (en inglés) sobre trucos y todo tipo de virguerías en CSS. Ya es para lectores de nivel avanzado.
  • Referencia de CSS de Sitepoint: Mi sitio preferido para consultar y buscar propiedades y cómo utilizarlas.
  • CSS Zen Garden: el famosísimo sitio de demostración de las posibilidades de CSS que cuenta con muchísimo diseños para dar ideas, algunos son espectaculares.
  • La página de la W3C sobre CSS: La página oficial de CSS, es decir, del organismo de normalización responsable del estándar.

Y recuerda también que este post forma parte de una serie temática que se compone de los artículos que puedes ver en el cuadrito de la derecha.

¿Te gustaría leer más sobre esta temática? Busca aquí:

Acerca del autor: Berto López

Soy autor y fundador de este blog, e Ingeniero en Informática de formación con amplia experiencia: he trabajado como empleado, empresario, incluso funcionario. Vamos, que he probado de todo 😄

De todo ello, lo que me apasiona de verdad, es el emprendimiento, combinado con la tecnología, algo que he podido retomar con mi proyecto web actual al cual pertenece, entre otras, esa web.

Aparte de mi propia experiencia emprendedora, mi contacto profesional con pymes y pequeños emprendedores me ha generado un gran interés en el marketing online.

Emprendí muy joven y eso hizo que todo el desarrollo inicial de las redes sociales, WordPress, SEO, etc. ya lo viví con esa experiencia. Me fascinó cómo cambió las reglas del juego para bien, sobre todo, para los pequeños emprendedores.

Esto me parece algo tan importante, de tanto calado social, que este blog nace con la vocación de ser un sitio de divulgación de este conocimiento y con la intención de motivar sus lectores para que aprovechen al máximo el potencial de estas disciplinas.


38 comentarios en «La guía rápida para aprender CSS básico desde cero»

  1. Gracias por la aportación para los que estamos empezando, me ha parecido muy útil la función de retocar WordPress a través de CSS, pues nos abre muchas posibilidades para modificar y personalizar.
    Un saludo

    Responder

Deja un comentario

⚠️ Importante: por respeto a esta comunidad, sigue estas pautas al dejar tu comentario:

  • Usa tu nombre personal, ni nombres inventados, ni el de tu web, ni el de tu empresa.
  • Cuida la redacción: separa párrafos y no escribas en mayúsculas (equivale a gritar).
  • No dejes enlaces a tu web en el comentario, dispones del campo "sitio web" para ello.
  • Eliminaremos comentarios con insultos, ofensivos o con lenguaje soez.

Al rellenar el formulario estás dando el consentimiento expreso al tratamiento de tus datos (guardar tu comentario y datos del formulario en el blog) conforme al Reglamento General de Protección de Datos (RGPD).

El responsable de este sitio es Wenova Online S.L.. La finalidad de este formulario es la divulgación en marketing online y emprendimiento, legitimado con tu consentimiento expreso.

El destinatario de tus datos es Webempresa (el hosting de este blog, ubicado en España) y podrás ejercer tus derechos de acceso, rectificación, limitación o supresión de tus datos (ver la política de privacidad).