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.

En esta segunda parte del vídeo “CSS: cómo se usa en HTML” te voy a explicar cómo se usa la etiqueta para definir los estilos de una página web.

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.

En el vídeo anterior vimos el uso del atributo style para definir los estilos de los elementos de una página web. En este vídeo vamos a ver el uso de la etiqueta . Al usar la etiqueta reducimos un poco el acoplamiento que existe entre HTML y CSS, es mucho mejor que usar el atributo style, pero no es la mejor solución, porque el código CSS sigue estando en el mismo fichero que el código HTML.

La etiqueta la debemos escribimos en el de la página web. En las versiones antiguas de HTML era necesario incluir el atributo type en la etiqueta style para indicar el tipo de lenguaje de estilos que se usaba. La idea era permitir el uso de distintos lenguajes de estilo, pero al final sólo quedó uno, CSS. Por ello, en HTML5 se ha simplificado y podemos escribir la etiqueta style sin el atributo type, ya que tiene definido como valor por defecto CSS.

A continuación te voy a mostrar cómo utilizar este atributo, pero antes vamos a ver las propiedades de CSS que voy a utilizar. Voy a utilizar:

• color para definir el color del texto.
• background-color para definir el color de fondo del texto.
• font-family para definir el tipo de letra o fuente.
• font-size para definir el tamaño del texto.

Está la página web que voy a usar como base para mostrarte el uso de la etiqueta style. Vamos a ver primero cómo se visualiza en el navegador Google Chrome. Este es el aspecto que tiene esta página web.

Ahora volvemos al código fuente, al código HTML y voy a añadir en el head de la página la etiqueta o elemento style. Como estoy haciendo la página web con HTML5 no le pongo el atributo type, no es necesario aunque si quiero, se lo puedo indicar type “text/css”. Este es el tipo MIME que identifica los ficheros de tipo CSS.

La etiqueta style la tengo que escribir en el head pero la podría haber puesto detrás del title, como la he puesto o la podría poner delante. Siempre que esté en el head, puede estar en cualquier parte.

Y ahora voy a indicar mi primera regla de CSS. Mi primera regla es para modificar el color del fondo de la página y el color del texto, es decir, quiero modificar la etiqueta body. Así que tengo que indica body y entre llaves escribiré la regla de CSS, que voy a poner background-color, y voy a indicar este gris y el color del texto le pongo este otro gris que es un poco más oscuro.

Grabo la página y la visualizo en Google Chrome y compruebo que efectivamente me aparece con el color del fondo gris y con el color del texto un gris muy oscuro cercano al negro.

Vuelvo al código fuente y voy a añadir otra regla de CSS. En este caso lo que voy a cambiar es el tipo de letra de mis encabezados de h1 y h2 y voy a usar ésta sintaxis de CSS que me permite agrupar varios elementos y aplicarles la misma regla de CSS.

Cuando escribo h1, h2 significa que la regla CSS que voy a escribir a continuación se la quiero aplicar a estos dos tipos de elementos o etiquetas. Y lo que voy a indicar es el tipo de letra, la fuente, font-family y le pongo “Georgia”.

A continuación voy a cambiar el tamaño del texto de h1 y le pongo font-size 3em, tres veces el tamaño base y h2 le pongo el tamaño font-size 2em, dos veces el tamaño base. Lo comprobamos en Google Chrome y podemos ver como efectivamente ha cambiado el tipo de letra de los encabezados, es distinto y efectivamente también ha aumentado el tamaño de los encabezados del h1 y del h2, ha cambiado su tamaño.

Vuelvo a código fuente de mi página web y voy a realizar el último cambio: a los párrafos del texto le voy a aplicar otro tipo de letra font-family y le pongo una lista de tipos de letra: Arial, Helvética y por último el tipo genérico sans-serif.

Lo guardo, lo ejecuto, lo visualizo en Google Chrome y comprobamos, si comparamos con la versión anterior, aquí el tipo de letra que se usa por defecto es “Times New Roman”, y aquí vemos que ahora el texto aparece con el tipo de letra Arial.

Como vemos, hemos separado ahora el código CSS, lo hemos separado del código HTML. Antes con el atributo style, el código de CSS, las propiedades de CSS estaban escritas junto con el código HTML. Ahora, aunque esté en el mismo fichero, lo hemos podido separar, hemos reducido el acoplamiento entre el código HTML y el código CSS.

Y además, fijaros que hemos obtenido una ventaja adicional. Antes, para los distintos párrafos que tenía mi página web debía de copiar el atributo style en cada una de ellas. Ahora simplemente, escribo la regla una vez y ya se va a aplicar con este selector “p” se aplicará a todos los párrafos de mi página web.

Si ahora quiero cambiar el tipo de letra y que afecte a todos mis párrafos, no tengo que ir uno a uno como ocurría antes con el atributo style. Ahora simplemente vengo aquí a esta regla de CSS y al cambiar aquí el valor del tipo de letra se cambiará en todos los párrafos de mi página web.

En el próximo vídeo veremos cómo podemos usar la etiqueta link para reducir aún más el acoplamiento entre el código HTML y el código CSS. La etiqueta link es la solución que debes usar en todos tus páginas web.

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.