Los estilos CSS son usados para configurar una página web definiendo la apariencia y colocación de sus diferentes elementos, ofreciendo la ventaja de que si modificamos un estilo se actualizarán automáticamente todos los elementos a los que se haya aplicado.
Podemos incluir estilos CSS en nuestras páginas web de dos formas: usando la etiqueta HTML <style> dentro de <head> , o bien creando un archivo de Hoja de Estilos CSS (normalmente con extensión .css ) y enlazándolo a la página web con la etiqueta <link>.
Lo recomendable es tenerlos en un archivo externo, puesto que con ello separamos el contenido (el archivo .html ) de la presentación (el archivo .css ): de este modo podremos usar la misma Hoja de Estilos CSS desde varias páginas web sin tener que repetir código en cada una de ellas.
12.1. Incluir estilos CSS usando la etiqueta HTML <style>.
Con la etiqueta HTML <style> podremos definir estilos CSS en la misma página.
En el ejemplo siguiente, definimos un estilo que mostrará en color azul el texto que haya en etiquetas <p> :
El código sería:
y el resultado:
En el siguiente ejemplo, cambiaremos el color del fondo. Pondremos el atributo style en la etiqueta <body>.
El código sería:
y el resultado:
12.2. Incluir estilos CSS creando un archivo de Hoja de Estilos CSS.
En lugar de poner el código CSS en la misma página web es recomendable crear un archivo de Hojas de Estilos CSS externa y enlazarlo con la etiqueta <link> , que veremos a continuación. Una hoja de estilo externa es sencillamente un fichero de texto con la extensión .css . Como cualquier otro fichero, puedes colocar la hoja de estilo en el servidor web o en el disco duro. Sería recomendable crear una carpeta llamada css para meter dicho archivo.
La etiqueta <link> nos permite enlazar archivos externos con nuestra página web, usándose comúnmente con archivos de Hojas de Estilos CSS .
Vamos a cambiar el fondo al igual que en el último ejemplo, pero usando un archivo .css externo. Lo primero es hacer un código .html , por ejemplo css4.html . En el atributo href indicamos el nombre del archivo. Observa también los atributos rel (indica el tipo de relación entre la página y el archivo enlazado) y type (informa de que el tipo de archivo enlazado es una Hoja de Estilos CSS ). El código quedaría así:
Y a continuación el archivo .css al que va asociado. Lo hemos llamado style.css :
quedando el resultado:
