HTML VI: CSS y estilos

Por primera vez vamos a utilizar el CSS en vez de escribir en el propio código de HTML los atributos visuales de los elementos como hacíamos hasta ahora. Primero veremos como utilizar el CSS en el propio archivo de HTML, pero por comodidad trabajremos de ahora en adelante en un archivo aparte, para facilitar su lectura. De esta forma, podremos cambiar el estilo de los párrafos (color de fondo, tipo de letra, color de letra...), de las tablas (bordes, ancho y alto...), de enlaces (al pulsarlo o poner el click encima de él) y de todo lo que tu quieras.

Un ejempolo de página html con css:

Se modifica el color de todos los párrafos y las etiquetas span:

Ahora solo la tipografía de los span:

También se puede usar el CSS dentro del documento HTML:

Para enlazar HTML y CSS hay que indicarlo como en se muestra en la línea 3:

Se cambia el color de los párrafos a verde:

La tipografía y el tamaño de la letra:

Ahora el color de los encabezados h3, la tipografía de los párrafos y el color de fondo de los span:

Se siguen modificando los encabezados y párrafos:

Para comentar se pone el código entre /*  */:

Ahora modificaremos encabezados y párrafos directamente desde HTML:

Ahora el color de los encabezados desde CSS:

Lo mismo:

Debemos conocer la medida en em, que mide la proporción entre los elementos y no dice su tamaño adecuado, útil para aplicaciones multiplataforma:

Se modifican los encabezados h1, h2 y h3:

Se pueden agregar dos tipografías por si la primera no está disponible en el pc:

Modificamos el color de fondo, ancho y alto de los div:

Se cambiar las celdas de las tablas y los bordes de la tabla:

El color y se suprime la línea de abajo de los enlaces:

Como repaso creamos nuestro propio documento HTML y CSS:

Se modifican encabezados h1 y párrafos:

Lo mismo:

Ahora el de imágenes:

El de enlaces: