📚 Introducción al desarrollo web: HTML y CSS (2/2)
🗂️ Cómo se define la presentación de una página web
📖 CSS: conceptos básicos
⭐ Aspectos clave
En el vídeo CSS: conceptos básicos se explica qué es CSS, las versiones que existen de CSS y el esquema de una regla de CSS.
📝 Transcripción
Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a ayudar con tus primeros pasos con CSS, las hojas de estilo en cascada.
Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.
Gracias a vídeos anteriores ya sabrás escribir y leer el código HTML que se emplea para crear las páginas web. Recuerda que con HTML sólo definimos la estructura y el contenido de las páginas web.
Ahora queremos lograr que las páginas web tengan la presentación visual que nosotros queramos, es decir, que las páginas web se muestren con los colores, los tamaños y tipos de letra, los bordes y los fondos que nosotros deseamos.
Para lograr que una página web, en vez de verse así, se vea de esta otra forma. O, que en vez de verse así, se vea con esta otra presentación, es necesario utilizar una tecnología adicional. Esa tecnología es CSS, Cascading Style Sheets, las hojas de estilo en cascada.
Existen diferentes versiones de CSS, que no se llaman versiones, sino niveles. Cada nivel de CSS se construye sobre el anterior, añadiendo funciones al nivel previo. Yo te aconsejo que te centres en aprender CSS 2.1, ya que es el que aceptan la mayoría de los navegadores actuales.
CSS 3 incorpora novedades muy interesantes, pero en la actualidad está en desarrollo y no todos los navegadores lo aceptan.
CSS es un lenguaje muy sencillo que se compone de reglas. Cada regla está formada por uno o más selectores y una declaración formada por un bloque de estilos que define los estilos a aplicar para los elementos del documento que cumplan con el selector.
En este ejemplo, el selector es el elemento de HTML, por lo que esta regla se aplicará a todos los encabezados de nivel 1 de la página web. Cada declaración de estilos se define entre llaves, y está formada por parejas propiedad-valor.
Desde que el lenguaje CSS se lanzó en el año 1996, el número de propiedades que posee ha ido aumentando y en la actualidad, en la versión CSS3, está formado por casi 200 propiedades.
Al igual que pasa con el lenguaje HTML, el lenguaje CSS también está desarrollado por el World Wide Web Consortium, el W3C, el organismo internacional que vela por el correcto desarrollo de la Web.
En la página del W3C puedes encontrar mucha información sobre CSS, pero para empezar no te lo recomiendo, porque te puede abrumar y asustar, ya que es un sitio web dirigido a profesionales y expertos, no para principiantes.
En el sitio web del W3C puedes consultar la especificación oficial de CSS, pero para empezar a aprender lo encontrarás muy difícil. Yo te aconsejo que utilices, como en otras ocasiones, el W3Schools.
Por un lado tienes el tutorial sobre CSS, y por otro lado tienes la guía de referencia, en la que encontrarás todas las propiedades de CSS agrupadas en diferentes grupos, como por ejemplo background, border and outline, color, font o margin.
Además, también te recomiendo que consultes el artículo dedicado al lenguaje CSS que puedes encontrar en la Wikipedia. Y también te recomiendo que leas el CSS Training, un curso de aprendizaje de CSS preparado por el W3C que organiza el aprendizaje en 4 semanas, empezando por los selectores en la semana 1 y acabando con temas avanzados en la semana 4.
Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.
Muchas gracias por tu atención.