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.

aprender css basico desde cero

Imagen de Fotolia - © Coloures-pic

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:

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.

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:

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:

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.

Multiplica el Nº de gente que lee tu blog

Con este eBook gratuito de plantillas de copywriting crearás titulos que dispararán los clics en tus contenidos:

  • 77 Plantillas de títulos probadas que multiplicarán los clics.
  • Sacaras infinitas ideas crear tus propios títulos.
  • Con las palabras "mágicas" redactarás textos irresistibles.
¡Buenas! ¿Me dices tu nombre?

¡Un placer conocerte!

Apuntáte aquí y recibirás gratis una copia del eBook.

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:

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:

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

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

Para que te sea más fácil seguir lo que viene a continuación te dejo un vídeo-tutorial de esta herramienta, el interfaz de usuario ha cambiado ligeramente con respecto a la versión utilizada en el vídeo, pero te podrás hacer perfectamente una idea:

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. Si usas Chrome o Internet Explorer te costará algo más porque sus interfaces de usuario varían algo, pero el proceso y resultados son idénticos.

captura inspector código firefox

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:

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

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

Si te interesa el tema blogging, tampoco te pierdas nuestra recopilación de los mejores recursos para blogs & bloggers

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 tema profesional para WordPress te recomiendo Divi

Más información aquí

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

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:

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:

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

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

Si tienes un blog WordPress, tampoco te pierdas nuestra recopilación de los mejores plugins de WordPress

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.

Para el hosting de tu web te recomiendo Webempresa, Raiola o Hostgator

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.

Acerca del autor: Berto López

Soy autor y cofundador de este blog, actividad que realizo como hobby ya que las nuevas tecnologías siempre me han atraído mucho.

Ahora trabajo por cuenta ajena, pero he sido empresario durante casi una década trabajando en la implantación de proyectos tecnológicos en sectores con carencias en conocimiento de las nuevas tecnologías, como Retail y Pymes.

De hecho, esta experiencia ha sido la inspiración para el blog: ayudar a profesionales y pequeños empresarios a conocer y aprovechar el potencial de las nuevas tecnologías y la web 2.0.


Comentarios

  1. ¡Muy buen artículo! Me ha servido de gran ayuda. Espero que sigáis publicando material así de útil. ¡¡Gracias!!

  2. Excelente recurso de apoyo, explica de una forma clara y sencilla los elementos básicos que se deben manejar de css

  3. Hola Berto! Gracias por todo nuevamente. Tengo una duda con lo que dices de modificar CSS en wordpress.org. Entré al pluging de Jetpack y el me manda a “Apariencias” -> “Editar CSS”. Si edito ahí, eso me afecta el tema?

    • Berto López dice:

      Efectivamente, aquí puedes sobreescribir las reglas CSS de tu tema o añadir nuevas reglas que tendrás los correspondientes efectos en la apariencia de tu tema.

      ¡Un saludo!
      Berto

  4. Excelente información!!!

  5. Un post muy completo sobre CSS y muy bien explicado para los novatos.
    Saludos!

  6. Todo un curso para aprender CSS.
    Muy interesante.
    Gracias por compartir!

  7. ¡Menudo post te has marcado, Berto! Muchas gracias, pues aunque algunas cosas ya las tenía claras (las tuve que aprender para modificar mi propio blog), me vendrán bien los materiales que recomiendas para seguir avanzando.

    Un saludo 😉

  8. Genial post !! Saludos

  9. Muy buen aporte, tener unos conocimientos básicos de HTML y CSS son más que suficientes para personalizar lo más habitual de un sitio web.

    Y de paso estamos ayudando al rendimiento de nuestro sitio web, al no tener que instalar plugins para cambiar el tipo de letra, para darle algo de estilo a los posts…

    Un abrazo.

  10. Muy bueno!!! Muchísimas gracias por la información, realmente la necesitaba.

    Un saludo!

  11. Impresionante como siempre Berto, una gran guía, que con gusto compartiré en redes sociales, comunidades y grupos, refleja de forma sencilla como hacer cosas sin ser un “ninja” del CSS, grande como siempre.

    Un saludo y gracias.

    • Me alegro de que te guste, Javi 🙂

      Desde luego te aseguro que es uno de los conocimiento más útiles que puedes tener si eres el autor de un sitio web.

      ¡Un saludo!
      Berto

  12. Muy buen aporte. Gracias por haberte molestado para que pueda tener una noción de lo que puedo aprender.
    Gracia.
    Un saludo.

  13. Excelente resumen de todo lo que hace falta para iniciarse en el CSS y retocar un poco las plantillas de WordPress. Lo guardo en favoritos que muchas veces se me olvida cómo escribir algunas, y eso que llevo tiempo jaja

    Un saludo

  14. Estoy muy contenta con vuestro trabajo Berto, porque me resulta muy útil. !Gracias y un saludo!
    Lic. Laura Palu Lopes.

  15. Igual es mi móvil que no vea bien el espaciado en él, pero la regla que correspondería al ejemplo del p con la clase, sería “p.text-izq” todo juntico. Seguro que ha sido un typo 🙂

    Buena guía para principiantes!! Seguro que a alguien dirijo hacia aquí 😀

Deja un comentario

Para ello, por favor, sigue estas pautas, por respeto a nuestra comunidad (y a nosotros):

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

*

 

Rellena el formulario y accede a nuestro training rápido de pro-blogging

Aprenderás paso a paso y desde cero cómo usar las mejores técnicas, trucos y secretos de los top bloggers para dar el salto al siguiente nivel

Y todo 100% gratis :)