Hay tres modos distintos de aplicar estilos CSS a los elementos de una página:
- Declaración en línea: se declara el estilo en la misma línea en que se va a aplicar. Esta opción está desaconsejada.
- Declaración interna: se declaran los estilos a emplear en la página, en el encabezado de dicha página, mediante la etiqueta
<style>. - Declaración externa: se declara la hoja de estilo que se va a emplear en la página, en el encabezado de dicha página, mediante la etiqueta
<link>.
1.- Declaración en línea
Dentro de la propia etiqueta mediante el atributo style. Deben evitarse para preservar el principio de separación de contenidos y formato.
<p style=“color: red;”> …. </p>2.- Declaración interna
En el encabezado del documento dentro de las etiquetas <style>
<style type=“text/css”> …. </style>Ejemplo
El texto de los elementos <p> se mostrará en verde.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>CSS interna</title>
<style>
p {color:green}
</style>
</head>
<body>
<p>Hola</p>
</body>
</html>2.3. Declaración en archivo externo
En el encabezado mediante la etiqueta <link> dentro del elemento <head>:
<link rel=“stylesheet” type=“text/css” href=“rutaArchivo.css”>El archivo de estilos tendrá extensión .css. El código del archivo de estilos no tendrá etiqueta de declaración de estilo, por ejemplo:
h1 {background-color: #blue}Otra forma de usar hojas de estilo externas es mediante la etiqueta @import. Es una directiva CSS no HTML.
<style type=“text/css”>
@import url(“formato1.css”);
</style>Ejemplo
El siguiente documento HTML utiliza un archivo CSS externo:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>CSS externo</title>
<link rel="stylesheet" href="parrafo_verde.css">
</head>
<body>
<p>Hola</p>
</body>
</html>
El contenido del fichero CSS es:
p {
color: green;
}El texto de los elementos <p> se mostrará en verde.
Almacena los dos ficheros en la misma carpeta para probar el ejemplo. El fichero CSS se tiene que llamar "parrafo_verde.css".