Esta clase sirve para comenzar a entender qué son las CSS y el motivo de su existencia, así como dar una primera zambullida técnica y práctica en el lenguaje. La impartió Sandra Guerrero @esandracom en el Curso Gratuito de Introducción al Desarrollo Web.

Encontrarás explicaciones claras sobre cuáles son los objetivos perseguidos por este lenguaje, básico para las personas que desarrollan sitios web. Nuestro deseo es que puedas entender por qué es tan importante en el marco de la web. En el presente texto te resumimos el contenido de esta charla y en el vídeo que encontrarás al pie del artículo tienes las explicaciones completas y una bonita parte práctica para comenzar a entender cómo se aplican las CSS y cómo se escribe su código.

Comenzamos con una charla básica sobre qué es CSS, el lenguaje que nos sirve para aplicar el formato en las páginas web y lo más importante, para separar el contenido de la presentación. Forma parte de las buenas prácticas del diseño web, hasta tal punto que hoy éste no se entiende sin la existencia de las hojas de estilo en cascada.

Por qué usar CSS

Insistimos que CSS es un lenguaje fundamental en el medio Internet. Todas las páginas web usan CSS para definir los estilos, o deberían. Los motivos por los que es así, entre otros son:

• Genera un código más fácil de mantener
  
  
• La cascada nos permite sobreescribir reglas

• Evitamos escribir mucho código, porque la parte de los estilos se escribe una única vez en el CSS, lo que nos descarga el HTML de mucho código fuente repetitivo.
  
  
• Vamos a poder crear efectos que antes solo era posible con trucos poco recomendables o la edición de imágenes mediante programas como Photoshop.

Cómo es la sintaxis de CSS y el modo de trabajo con CSS

Si estás empezando con CSS lo importante es entender el concepto cuanto antes, para qué sirve el lenguaje y cuáles son las recomendaciones para el diseño web. No obstante, en el vídeo también nos dedicamos a introducir aspectos sobre el uso de CSS,

Sintaxis:
Se explica cómo se aplica estilo a las etiquetas de un documento HTML y qué son elementos como la propiedad, declaraciones, valores, selectores, etc.

Usos:
Hay varias maneras de aplicar estilos en CSS y que se explican en el vídeo, como el "inline", "embedded" o "externo". Cada uno de ellos tiene sus características y pueden venir bien en variadas circunstancias. Sin embargo, la recomendación es siempre que sea posible recurrir a la declaración de estilos de modo externo.

Herencia:
En CSS existen diversos elementos anidados, padres e hijos. Cuando colocamos un estilo en un elemento padre, éste aplica también a los hijos. Osea, si aplicamos un estilo al BODY, todos estos estilos se verán representados en todas las etiquetas que haya dentro del cuerpo de la página web, ya sean párrafos, divisiones, etc.

Unidades:
Qué son las unidades y cómo hacer uso de ellas, haciendo hincapié en la diferencia de unidades absolutas y relativas.

Qué son los Selectores

Los selectores son elementos básicos del lenguaje que nos sirven para identificar elementos o grupos de elementos, a los que luego aplicaremos estilos mediantes propiedades CSS y sus valores.

En CSS se usan intensivamente los selectores y debemos entenderlos para poder comenzar y evolucionar con CSS a gran nivel. En el vídeo nos comentan qué son los selectores y cuáles son los más básicos y más comúnmente usados. Además se explican diferencias importantísimas de entender como el uso de clases o identificadores (class o id).

Parte práctica de CSS

La parte teórica de presentación del lenguaje, sus usos y sus características nos lleva aproximadamente 20 minutos. A partir de ahí en el vídeo encontrarás otros 40 minutos muy prácticos en los que se explican muchos otros temas interesantes, donde se aprecia la potencia de las CSS y donde vemos cómo empezar, desde cero con el lenguaje. Se ven asuntos como enlazar un HTML con una declaración de archivos externa en un archivo CSS, diferencias entre uso de id y class, aplicación de fondos de imágen, trabajo con tipografías, etc.

El vídeo además no se queda en los aspectos más básicos, sino que también se introducen otros asuntos importante de CSS y más avanzados como los "sprites".

En resumen, si te interesa CSS y quieres ver una introducción general muy interesante que nos ofrezca una vista de pájaro sobre todo lo que puedes hacer con CSS y cómo hacerlo, no tienes más que ver el vídeo que tienes a continuación.