Los navegadores modernos implementan dos tipos de reglas de estilo para una página web, las de usuario y las de autor. Son conjuntos de reglas de estilo que afectan a los elementos de la página, es decir, a cualquier documento HTML que se vea en el navegador.

Las reglas de estilo de usuario (user stylesheet rules) las define cada persona en su navegador, a modo de configuración global, para todas las páginas que visita.

Las reglas de estilo de autor (author stylesheet rules) son las que definen los autores de las páginas, es decir, los diseñadores o desarrolladores de cada una de las páginas que visitamos. Por decirlo de otra forma, las hojas de estilo de autor son las CSS que conocemos y que hemos aprendido a crear en el Manual de CSS.

Las reglas de estilo de usuario son menos importantes para el navegador, de cara al orden de precedencia o prioridad. Es decir, en caso que en las reglas de estilo de usuario y de autor se defina una misma propiedad de estilos CSS, la que se tiene en cuenta es la regla de estilo de autor, osea, lo que haya configurado el diseñador de la página. Sin embargo, esto se puede cambiar puntualmente si el usuario lo desea.

Como sabemos, cualquier elemento de la página tiene unas reglas de formato predeterminadas, que definen los navegadores. La hoja de estilo de usuario nos permite cambiar esas reglas de estilo predefinidas, de modo que si una página web no declara un estilo determinado para un elemento, se tengan en cuenta las reglas de estilo definidas por el usuario. Por ejemplo, generalmente las tablas no tienen borde, o al menos es la configuración predeterminada en los navegadores que conozco. Con las reglas de estilo de usuario yo podría definir que todas las tablas en el navegador a partir de ahora tuvieran un borde de 1 píxel y de color rojo. En ese caso, si el autor no define cómo debe ser el borde de una tabla en sus CSS, la tabla siempre tendría borde de 1 píxel y color rojo.

Las reglas de estilo de usuario son sobreescritas por las de autor, pero ello no quita importancia a las reglas de usuario, para determinado tipo de usuarios. Imaginemos que por cualquier razón deseamos que las fuentes de las páginas que visitamos sean de un tamaño mayor y de una familia tipográfica determinada, para poder leerse mejor. Entonces podríamos escribir unas reglas de estilo de usuario como estas:

body{
   font-size: 16pt;
   font-family: verdana, arial;
}

A partir de ahora, el cuerpo de la página de cualquier web, a no ser que el desarrollador haya definido otra cosa en su elemento body o en cualquiera de los otros elementos de la página, tendrá esas características.

Como se puede apreciar, las reglas de estilo de usuario tienen la misma sintaxis, atributos y valores que utilizamos también en las hojas de estilo normales.

Dónde se colocan las reglas de estilo de usuario

Cada navegador se configura de una manera distinta, luego las reglas de usuario, que aplicamos a cada cliente web que las soporte, se tienen que indicar de manera distinta dependiendo de los navegadores que estemos utilizando.

En principio, se trata de un archivo de texto que debe contener el código CSS que queremos que se utilice de manera predeterminada al ver una página web. Podremos alterar el estilo de cualquier elemento, igual que lo hacemos con las hojas de estilo de autor, con la diferencia que esos estilos se aplicarán a todas las páginas que visitemos.

En el navegador Firefox se pueden definir las reglas de estilo de usuario en un archivo llamado "userContent.css" que se encuentra en la carpeta "chrome", del perfil de usuario que estemos utilizando. El directorio donde están los perfiles de Firefox depende del sistema operativo que estemos trabajando, en el caso de Windows Vista, y para mi usuario en particular, está en:

C:\Users\Miguel\AppData\Roaming\Mozilla\Firefox\Profiles\j6bik046.default\

Así que simplemente podrás crear el archivo con los estilos que quieras, que deberías colocarlo en una ruta como esta.

C:\Users\Miguel\AppData\Roaming\Mozilla\Firefox\Profiles\j6bik046.default\chrome\userContent.css

El directorio "j6bik046.default" es el perfil de mi usuario concreto, que tendrá un nombre seguramente diferente en el tuyo, así como "Miguel", en el principio de la ruta (C:\Users\Miguel\...), que es mi nombre de usuario en el Windows.

En el directorio "chrome" verás probablemente unos archivos llamados "userContent-example.css", que pueden servirte de guía para crear tus propias reglas de estilo de usuario.

Alterar la precedencia para que las reglas de usuario dominen sobre las de autor

Como hemos dicho, en caso que una regla de estilo de usuario se defina también como regla de estilo de autor, se tiene en cuenta lo que se haya definido por el autor o diseñador de la web. Pero esto podemos cambiarlo en las reglas de estilo que queramos.

Imaginemos el caso del usuario que decidió que quería ver siempre las fuentes con un tamaño mayor, para leer mejor el contenido de las webs en su ordenador. Esta persona definió en su archivo de reglas de estilo de usuario un tamaño de letra mayor para determinados elementos de la página. Pero si un desarrollador luego ha definido un tamaño de letra distinto, el tamaño definido por el usuario se pierde y con ello quizás ahora no pueda leer la web tan cómodamente.

Podemos utilizar entonces la directriz de CSS !important, que cuando se coloca en las reglas de estilo de usuario, hace que siempre se tenga en cuenta lo que se haya definido allí.

Así pues, esta persona puede obligar a que en el cuerpo de la página siempre se utilice el tamaño de fuente que había determinado, de la siguiente manera.

body{
   font-size: 16pt !important; 
   font-family: verdana, arial;
}

Si vemos el anterior código de ejemplo, al atributo font-size le hemos aplicado la declaración !important, luego siempre se tendrá en cuenta antes que los estilos declarados en las reglas de estilo de autor y por tanto, aparecerán todos los textos del cuerpo de la página con tamaño de 16pt. Ahora bien, se había definido una tipografía como Verdana, Arial, pero no era !important, luego sólo se utilizará esta regla si el diseñador no llegó a especificar la familia tipográfica con sus CSS para el cuerpo de la página.