¡Genial! Ya sabes crear reglas CSS, pero...¿cómo las aplicas ahora a la web que has montado den HTML?, ¿cómo se aplican a una página web? Pues simplemente tendrás que decidir entre una de estas 3 opciones:¡Genial! Ya sabes crear reglas CSS, pero...¿cómo las aplicas ahora a la web que has montado den HTML?, ¿cómo se aplican a una página web? Pues simplemente tendrás que decidir entre una de estas 3 opciones:
La primera opción consiste en usar el atributo “style” dentro de una etiqueta (un elemento) HTML tal como se puede ver aquí:
<h1 style=”font-family:Verdana; color:red”>Título de nivel 1</h1>En este caso, no hay selector puesto que no hay elemento que seleccionar, es el que es. Por tanto, se especifican simplemente las propiedades a aplicar al elemento en cuestión.
Ventaja
Este tipo de reglas tienen mayor prioridad de todas las reglas.
Desventaja
Se recomienda evitar esta manera de vincular estilos CSS puesto que al tener que aplicarse a cada elemento individualmente, implican un esfuerzo y mantenimiento disparatado.
La segunda opción es escribir las reglas dentro de un elemento <style>:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mi primera página con estilo</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
...
</body>
</hmtl>
Ventaja
Puedes ver sobre el propio código, o al consultar el código fuente de la página, las reglas de estilo que se están utilizando.
Desventaja
En este caso las reglas sólo son visibles para esa página concreta en las que se han declarado y no se pueden usar para otras páginas.
*Nota: Como has visto en el código superior, hay varios tipos de letras separados por comas. ¿Qué significa?:
En la Web, nunca puedes estar seguro de los tipos de letra que los usuarios tienen en sus ordenadores, por lo que añadiremos algunas alternativas: si Georgia no está disponible, Times New Roman o Times también pueden valer, y si ninguna de esas está presente, el navegador puede utilizar cualquier otro tipo de letra con serifs. Si Helvetica no está, Geneva, Arial y SunSans-Regular son bastante similares, y si ninguna de estas funciona, el navegador puede escoge cualquier otro tipo de letra que no sea serif.
La última opción es la más usada y consiste en crear uno o varios ficheros con extensión .css en los cuales se declaran las reglas CSS. La manera de vincular estas reglas a una página HTML consiste en referencia el fichero .css desde esa página. De este modo se puede crear un fichero global para una web entera y usarlo en todas las páginas que se quiera.
La declaración se incluye dentro del elemento y tiene el siguiente aspecto:
A tener en cuenta: en el caso de usar varios ficheros el orden de inclusión marca precedencia en el orden inverso. En el caso de existir un conflicto por haber diferentes reglas con igual selector en varios ficheros, las reglas de los ficheros siguientes sobreescriben los anteriores. Por ejemplo:
Si en hoja_estilo_1.css tenemos la regla:
p a {
text-decoration: underline;
}Y en hoja_estilos_2.css otra que dice:
p a {
text-decoration: none;
color: blue;
}