Sobrescribir estilos inline con CSS

Por lo general, cuando hablamos de estilos CSS nos referimos a clases y definiciones colocadas en un etiqueta <style> </style> o, en Blogger, a lo que está entre las etiquetas <b:skin> </b:skin> pero claro, esa no es la única manera de agregar estilo a algo. También es común hacerlo directamente en la etiqueta que queremos modificar:

<p style="color: white"; font-size: 20px;> ....... </p>

Esto es conocido como un método inline, es decir, usamos style no como etiqueta sino como atributo de una etiqueta. En ambos casos, el contenido (las propiedades) son las mismas.

¿Por qué hacemos esto? A veces, por simple comodidad, otras veces, para sobrescribir alguna propiedad definida con anterioridad. Por ejemplo, casi cualquier sitio posee alguna clase de definición genérica para los enlaces; algo así:

a, a:visited, a:link  {color: #BCD; text-decoration: none;}
a:hover {color: #DEF; text-decoration: none;}

Asi que si escribimos <a href="#">un enlace</a> se verá de este modo.

Eso es perfecto, nos evita escribir las definiciones una y otra vez pero, si por alguna razón queremos que un enlace específico se vea diferente, deberemos agregarle el atributo style para sobrescribir esa propiedad así que si ponemos <a style="color: red" href="#">otro enlace</a> el enlace se verá de otro modo. Incluso, dependiendo de la situación, deberrmos reforzar ese cambio agregándole la palabra !important:

<a style="color: red !important" href="#">otro enlace</a>

Resumiento, usamos el atributo style para cambiar una propiedad definida con antelación pero ¿y si queremos hacer lo contario?

Muchas veces, usamos scripts o gadgets que no podemos editar y que colocan ciertas propiedades de manera más o menos automática y por lo tanto, no tenemos acceso al código para cambiarlo. Sabemos cuál es (lo podemos ver leyendo el código fuente) pero, simplemente, estamos atados de pies y manos.

No todo está perdido.

En una entrada anterior se mostraban los llamados pseudo-elementos y atributos especiales. Entre esas cosas, estaba la posibilidad de definir propiedades en función de los atributos de una etiqueta:

a.enlaceA {color:yellow;}
a.enlaceA[title] {color:red;}

<p>
Este enlace no tiene title y es <a class="enlaceA" href="#">amarillo</a>
Como este otro enlace tiene title es <a class="enlaceA" href="#" title="El enlace rojo">rojo</a>
</p>

Lo que hacía la primera definición era poner los enlaces de color amarillo y la segunda, los ponía de color rojo si el enlace tenía un atributo title.

Este enlace no tiene title y es amarillo
Como este otro enlace tiene title es rojo

Así que, usando el mismo criterio, podríamos buscar el atributo style:

a.enlaceB {color:yellow;}
a.enlaceB[style] {color: lightblue;}

<p>
Este enlace no tiene style y es <a class="enlaceB" href="#">amarillo</a>
Como este otro enlace tiene style no será rojo <a class="enlaceB" style="color: red;" href="#">sino azul claro</a>
</p>

Este enlace no tiene style y es amarillo
Como este otro enlace tiene style no será rojo sino azul claro

¿Funcionará en todos los navegadores? No me hagan reir. Lo hará en todos los "modernos" incluyendo Internet Explorer 8 pero, no lo hará en IE6 y, aunque aseguran que también lo hace en IE7, no he podido comprobarlo.

REFERENCIAS:Natalie Jost