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 este vídeo, formado por tres partes, te voy a explicar cómo se usa CSS en HTML.

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.

CSS, Cascading Style Sheets, las hojas de estilo en cascada, es la tecnología que se emplea para definir la presentación visual de las páginas web. Antes de ver cómo se usa CSS en una página web, vamos a aprender un término muy importante en los sistemas informáticos, el acoplamiento, un factor que incide en la calidad de los sistemas informáticos.

Según la Wikipedia, “El acoplamiento informático indica el nivel de dependencia entre las unidades de software de un sistema informático, es decir, el grado en que una unidad puede funcionar sin recurrir a otras; dos funciones son absolutamente independientes entre sí (el nivel más bajo de acoplamiento) cuando una puede hacer su trabajo completamente sin recurrir a la otra. En este caso se dice que ambas están desacopladas”.

Evidentemente, lo mejor sería un desacoplamiento total, es decir que no hubiese ninguna dependencia entre las partes que constituyen un sistema informático. Pero esa situación es más bien imposible de lograr. Por lo tanto, al final lo que se intenta lograr es reducir el acoplamiento al mínimo posible: cuanto menos dependientes sean las partes que constituyen un sistema informático, mejor será el resultado final.

Cuando usamos CSS para definir la presentación de una página web escrita en HTML, se crea un acoplamiento entre HTML y CSS. Como acabamos de ver, debemos de intentar reducir este acoplamiento entre estas dos tecnologías.

En HTML se puede indicar que queremos aplicar unas reglas CSS de tres formas: mediante el atributo style, mediante la etiqueta y mediante la etiqueta . En este vídeo vamos a ver el uso del atributo style, que es la peor opción ya que lleva aparejado un acoplamiento máximo entre HTML y CSS, como veremos a continuación con un ejemplo.

El atributo style es uno de los pocos atributos de HTML que se puede aplicar a casi cualquier elemento de HTML. En HTML 4.01 y XHTML 1.0, el atributo style se puede aplicar a casi todos los elementos o etiquetas excepto BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE y TITLE. Sin embargo, en HTML5 se ha cambiado y ahora se indica que todos los elementos pueden tener el atributo style.

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. Y font-size para definir el tamaño del texto.

Esta es la página web que voy a usar como base para enseñarte a utilizar el atributo style. Vamos a ver primero cómo se visualiza esta página web en un navegador, en Google Chrome. Este es el aspecto que tiene la página cuando se visualiza sin CSS.

Ahora voy a empezar a añadirle propiedades visuales con el atributo style. En primer lugar me voy a la etiqueta body, ya que al cambiar el color del texto y el color del fondo de la etiqueta u elemento body voy a cambiar todo el color del fondo y todo el color de la página.

Así que, le añado el atributo style y primero voy a cambiar el color del texto, le voy a indicar este color #333. Y a continuación voy a cambiar el color del fondo y le voy a poner el color #CCC. La forma de indicar los colores la tienes explicada en otro video, donde se te explican las distintas formas que existen en CSS para indicar un color.

Fíjate que estas dos propiedades de CSS, color y background-color, las he separado con un punto y coma y al final de la última propiedad también he puesto un punto y coma. Este punto y coma no es obligatorio, pero es una buena costumbre ponerlo, ya que ahora, rápidamente podría añadir otra propiedad de CSS y no me tendría que preocupar en ver si tengo que poner o no poner el punto y coma. Si me acostumbro a ponerlo siempre, podré añadir una nueva propiedad rápidamente.

Bien, hemos cambiado el color del texto le hemos puesto #333, que es un gris muy oscuro cercano al negro. Y el color del fondo de la página le he puesto #CCC, que es un gris claro, no muy claro. Vamos a guardar la página y la visualizamos en Google Chrome.

Y podemos ver el resultado, vemos cómo el color del texto ahora no es un negro completo, sino un negro un poco apagado porque es un gris oscuro, y el color del fondo ha cambiado a gris.

Vamos a añadir más propiedades, ahora voy a cambiar los encabezados etiqueta y . Primero me voy a la etiqueta , le añado el atributo style y voy a cambiar lo siguiente. Primero voy a cambiar el tipo de letra o fuente y le voy a poner "Georgia". Y también le voy a cambiar el tamaño del texto y le voy a poner "3em", que indica que quiero que el tenga un tamaño del texto tres veces el tamaño base actual.

Voy a copiar esta propiedad, esta propiedad style, porque en el h2 la voy a reutilizar. Voy a usar el mismo tipo de letra "Georgia", pero ahora voy a indicar un tamaño del texto "2em", el doble. Y ahora copio esta propiedad y la aplico al otro . Lo guardo, lo ejecuto otra vez en Chrome y vemos el resultado.

Vemos que ha aumentado el tamaño de los encabezados, del , del , y además ha cambiado su tipo de letra, su fuente. Si lo comparo con la visualización anterior, podemos ver que el cambio es evidente.

Vuelvo al código HTML y ahora lo que voy a cambiar son los párrafos, y lo que voy a indicar es que en mis párrafos de texto quiero usar un tipo de letra "Arial". Y, por si no está disponible en tipo de letra "Arial", indico un segundo tipo de letra, "Helvética. Y finalmente, un tipo de letra "sans-serif", que es un tipo de letra genérico, indica la familia de tipos de letra "sans-serif".

Voy a copiar ahora este atributo style para aplicárselo 1a los otros párrafos de texto que hay en mi página web. Lo guardo, lo visualizo otra vez en Google Chrome y podemos ver el cambio, como ahora el tipo de letra de mis párrafos es "Arial".

Si lo comparo con la versión anterior vemos que hay un cambio significativo. Así de fácil es usar el atributo style para indicar las propiedades de un elemento o etiqueta de una página web.

Pero vemos que hay un problema importante. El problema importante sobre todo lo hemos visto aquí en el párrafo que me ha tocado copiar, una, dos, tres, cuatro veces la misma propiedad style porque quería aplicar las mismas propiedades visuales a mis cuatro párrafos de texto.

¿Qué ocurre si ahora añado más párrafos de texto? Tendré que volver a copiar esta propiedad style a cada uno de los párrafos de texto. ¿Y qué ocurre si yo ahora quiero cambiar y, por ejemplo, ponerle un tipo de letra distinto? Pues tendría que ir párrafo a párrafo, cambiándolo.

Vemos que hay un alto acoplamiento entre el CSS y el HTML. ¿Esto lo podemos resolver, podemos reducir el acoplamiento? Sí, eso lo veremos en el siguiente vídeo, donde te explicaré cómo usar la etiqueta para indicar los estilos de una página.

No te confundas, aquí estamos viendo el uso de un atributo style y en el siguiente video te voy a explicar el uso de la etiqueta . Atributo, etiqueta, son dos cosas distintas.

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.