Quando escrevemos o css seja na linha do html, ou no head ou então em um arquivo externo, qual nível de prioridade tem para o navegador? O que ele considera primeiro, em segundo e em terceiro lugar?
Quando escrevemos o css seja na linha do html, ou no head ou então em um arquivo externo, qual nível de prioridade tem para o navegador? O que ele considera primeiro, em segundo e em terceiro lugar?
Primeiro ele considera o que está na linha, depois no head, e por último no arquivo externo. Porém existe uma "palavra-chave" que da para colocar no arquivo css externo, onde ele vai ter prioridade sobre tudo, que é o !important, por exemplo: p { color: red !important; }. Mas não é recomendado fazer isso, já que nunca será sobrescrito, e pode causar problemas no futuro, quando você quiser fazer alguma alteração.
Oi Vania, considerando q os estilos são iguais o último declarado terá prioridade
O '!important' declarado no estilo supera todas as prioridades
<html>
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1> TEXTO RED </h1>
<!-- dentro do elemento (inline) tem prioridade e peso 1000 -->
<h1 style="color:yellow"> TEXTO YELLOW </h1>
<link rel="stylesheet" href="style.css"> <!-- h1 {color: red} -->
</body>
</html>
Tem também a Especificidade (peso). Maior peso tem prioridade
| Inline | ID | Classe | Elemento | Especificidade | |
| <p style ...> | 1 | 0 | 0 | 0 | 1000 |
| h1, h2 | 0 | 0 | 0 | 2 | 2 |
| h1.primeiro | 0 | 0 | 1 | 1 | 11 |
| #contentor | 0 | 1 | 0 | 0 | 100 |
| #contentor h2 | 0 | 1 | 0 | 1 | 101 |
| #contentor #lateral p | 0 | 2 | 0 | 1 | 201 |
| h1 p | 0 | 0 | 0 | 2 | 2 |
| .imagem | 0 | 0 | 1 | 0 | 10 |
| div | 0 | 0 | 0 | 1 | 1 |