CSS com !important

Uma das diretrizes das CSS que decide qual a regra de
estilo que deve ser aplicada em caso de conflito entre
duas ou mais regras chama-se “efeito cascata”.
Se você, ao escrever sua folha de estilo declarar na
segunda linha do arquivo uma regra assim:

p {font-size:14px;}

a seguir continuar escrevendo outras regras e lá embaixo
na trigésima linha escrever:

p {font-size:12px;}

cria um conflito entre duas regras para o tamanho da fonte
nos parágrafos.
Aí eu pergunto:
Qual será o tamanho da fonte nos parágrafos do documento?

Resposta: 12px. Por que?

Porque uma (existem várias) das diretrizes do efeito
cascata estabelece que a regra de estilo escrita depois
no fluxo da folha de estilos, prevalece sobre aquelas
escritas anteriormente. É isto o que acontece no exemplo
acima, a regra escrita na trigésima linha prevalece sobre
a anterior, escrita na segunda linha. Quer saber mais sobre
efeito cascata? Leia: O efeito cascata e saiba também o que
é especificidade para o efeito cascata

Toda esta introdução e exemplificação mostrada acima
para dizer que uma declaração CSS com !important assume
a prioridade mais alta na ordem da cascata e só perde
para outra declaração com !important mais específica.

Suponha que no exemplo anterior tenha sido alterada a
regra escrita na linha 2 conforme mostrado a seguir:

p {font-size:14px !important;}

p {font-size:12px;}

Agora o tamanho da fonte nos parágrafos será 14px, pois
a declaração que contém !important assume a prioridade,
‘quebrando’ o efeito cascata.
Note que !important deve ser escrito logo após o valor
da propriedade na declaração CSS (propriedade: valor),
com ou sem espaço, (aconselho a deixar um espaço para
maior legibilidade) e antes do ponto e vígula que termina
a declaração.

Atenção: Ressalto que !important só perde para outra
!important mais específica.
Assim, uma regra de estilo contida em uma folha de estilos
externa e cuja declaração seja com !important, prevalece
inclusive sobre um estilo inline (aquele declarado dentro
da tag HTML com o atributo style)

Agora vem a pergunta natural: Mas afinal para que serve
!important.? Basta eu escrever minhas regras de estilo de
acordo com o efeito cascata e estarei tranqüilo.
Você cedo ou tarde, à medida que se aprofundar em projetos
CSS vai descobrir por si só ‘para que serve’, contudo desde
já adianto duas situações típicas:
É empregado por questões de acessibilidade, por usuários
que escrevem folhas de estilos para navegar de acordo com
suas necessidades especiais.
É empregado em folhas de estilo para mídias alternativas
com a finalidade de sobrescrever regras de estilo de grande
especificidade contidas em folhas de estilos gerais.

Eu costumo usar para “debugar” folhas de estilo muito longas
quando ao criar uma regra CSS simples ela não funciona.
Acresento !important, se funcionar é um indício que existe
uma regra de maior especificidade do que a que eu acabo de
escrever.

Agora é com você. Faça algumas experiências e comprove
na prática como funciona uma declaração de estilo com
!important.

Fonte: Blog do Maujor