Además de las hojas de estilos definidas por los diseñadores, los navegadores aplican a cada página otras dos hojas de estilos: la del navegador y la del usuario.
La hoja de estilos del navegador es la primera que se aplica y se utiliza para establecer el estilo inicial por defecto a todos los elementos HTML (tamaños de letra iniciales, decoración del texto, márgenes entre elementos, etc.)
Además de la hoja de estilos del navegador, cada usuario puede crear su propia hoja de estilos y aplicarla automáticamente a todas las páginas que visite con su navegador. Se trata de una opción muy útil para personas discapacitadas visualmente, ya que pueden aumentar el contraste y el tamaño del texto de todas las páginas para facilitar su lectura.
La forma en la que se indica la hoja de estilo del usuario es diferente en cada navegador. A continuación se muestra cómo se hace en los navegadores más populares:
Internet Explorer
- Pincha sobre el menú
Herramientasy después sobre la opciónOpciones de Internet - En la pestaña
Generalque se muestra, pulsa sobre el botónAccesibilidadque se encuentra dentro de la secciónApariencia - En la nueva ventana que aparece, activa la opción
Formatear los documentos con mi hoja de estilosy selecciónala pulsando sobre el botónExaminar... - Pulsa
Aceptarhasta volver al navegador
Firefox
- Guarda tu hoja de estilos en un archivo llamado
userContent.css - Entra en el directorio de tu perfil de usuario de Firefox. En los sistemas operativos Windows este directorio se encuentra normalmente en
C:\Documents and Settings\[tu_usuario_de_windows]\Datos de programa\Mozilla\Firefox\Profiles\[cadena_aleatoria_de_letras_y_numeros].default - Copia la hoja de estilos
userContent.cssen el directoriochromede tu perfil - Reinicia el navegador para que se apliquen los cambios
Safari
- Pincha sobre el menú
Editary después sobre la opciónPreferencias - Selecciona la sección
Avanzado - Pincha sobre la lista desplegable llamada
Hoja de estilosy selecciona la opciónOtra... - En la ventana que aparece, selecciona tu hoja de estilos
Opera
- Pincha sobre el menú
Herramientasy después sobre la opciónPreferencias - Selecciona la pestaña
Avanzadoy pulsa sobre el botónOpciones de estilo... - Pulsa sobre el botón
Seleccionar...para seleccionar la hoja de estilos - Pulsa
Aceptarhasta volver al navegador
El orden normal en el que se aplican las hojas de estilo es el siguiente:
Figura 13.3 Orden en el que se aplican las diferentes hojas de estilos
Por tanto, las reglas que menos prioridad tienen son las del CSS por defecto de los navegadores, ya que son las primeras que se aplican. A continuación se aplican las reglas definidas por los usuarios y por último se aplican las reglas CSS definidas por el diseñador, que por tanto son las que más prioridad tienen.
Además de estas hojas de estilos, CSS define la palabra reservada !important para controlar la prioridad de las declaraciones de las diferentes hojas de estilos.
Si a una declaración CSS se le añade la palabra reservada !important, se aumenta su prioridad. El siguiente ejemplo muestra el uso de !important:
p {
color: red !important;
color: blue;
}Si la primera declaración no tuviera añadido el valor !important, el color de los párrafos sería azul, ya que en el caso de declaraciones de la misma importancia, prevalece la indicada en último lugar.
Sin embargo, como la primera declaración se ha marcado como de alta prioridad (gracias al valor !important), el color de los párrafos será el rojo.
El valor !important no sólo afecta a las declaraciones simples, sino que varía la prioridad de las hojas de estilo. Cuando se indican declaraciones de alta prioridad, el orden en el que se aplican las hojas de estilo es el siguiente:
Figura 13.4 Orden en el que se aplican las diferentes hojas de estilos cuando se utiliza la palabra resevada important
Los estilos del usuario marcados como !important tienen más prioridad que los estilos marcados como !important en la hoja de estilos del diseñador. De esta forma, ninguna página web puede sobreescribir o redefinir ninguna propiedad de alta prioridad establecida por el usuario.
Si se aplica el valor !important a una propiedad de tipo "shorthand", se interpreta como si se hubiera aplicado el valor !important a cada una de las propiedades individuales.