Quando um navegador lê uma folha de estilos, ele formata o documento HTML de acordo com as informações na folha de estilos.
Existem três maneiras de inserir uma folha de estilos:
CSS externo;
CSS interno;
CSS embutido;
Com uma folha de estilos externa, você pode alterar a aparência de um site inteiro alterando apenas um arquivo!
Cada página HTML deve incluir uma referência ao arquivo da folha de estilos externa dentro do elemento <link>, dentro da seção principal.
Exemplo
Os estilos externos são definidos no elemento <link>, dentro da seção <head> de uma página HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
Veja acima que foi referenciado o href=”mystyle.css”
Então o css é externo.
O arquivo style é assim
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Uma folha de estilo interna pode ser usada se uma única página HTML tiver um estilo exclusivo.
O estilo interno é definido dentro do elemento <style>, dentro da seção principal.
Exemplo
Os estilos internos são definidos dentro do elemento <style>, dentro da seção <head> de uma página HTML:
Exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS interno
Uma folha de estilo interna pode ser usada se uma única página HTML tiver um estilo exclusivo.
O estilo interno é definido dentro do elemento <style>, dentro da seção principal.
Exemplo
Os estilos internos são definidos dentro do elemento <style>, dentro da seção <head> de uma página HTML:
<!DOCTYPE html> <html> <body> <h1 style="color:blue;text-align:center;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> </body> </html>
Dica: Um estilo embutido perde muitas das vantagens de uma folha de estilos (misturando conteúdo com apresentação). Use este método com moderação.
Várias folhas de estilo
Se algumas propriedades foram definidas para o mesmo seletor (elemento) em diferentes folhas de estilo, o valor da última folha de estilo de leitura será usado.
Ordem em cascata
Que estilo será usado quando houver mais de um estilo especificado para um elemento HTML?
Todos os estilos em uma página serão “cascateados” em uma nova folha de estilos “virtual” pelas seguintes regras, onde o número um tem a maior prioridade:
. Estilo embutido (dentro de um elemento HTML)
. Folhas de estilo externas e internas (na seção principal)
. Padrão do navegador
. Portanto, um estilo embutido tem a maior prioridade e substituirá os estilos externos e internos e os padrões do navegador.
<< Anterior Seletores CSS
Deixe um comentário