O estilo inline é utilizado para modificar o estilo de elementos específicos diretamente no HTML. Esse estilo é usado em casos raros onde você precisa de uma modificação muito pontual, como destacar um trecho específico de um texto.
Exemplo de uso de estilo inline:
<p style="color: blue; font-size: 20px;">Este é um texto com estilo inline.</p>Resultado:
Este é um texto com estilo inline.
O estilo CSS3 interno é definido dentro da tag <style> no cabeçalho da página. Esse estilo é aplicado a toda a página, permitindo que você defina estilos para múltiplos elementos de uma só vez.
Exemplo de uso de estilo interno:
<style>
p {
color: green;
font-size: 18px;
}
</style>Resultado:
Este é um texto com estilo interno.
O estilo CSS3 externo é definido em um arquivo separado com extensão .css. Esse arquivo é então vinculado ao HTML através da tag <link> no cabeçalho da página.
Exemplo de uso de estilo externo:
<link rel="stylesheet" href="style.css">Arquivo style.css:
p {
color: blue;
font-size: 16px;
}Resultado:
Este é um texto com estilo externo.
No cabeçalho da página, adicione a seguinte linha de código:
<link rel="stylesheet" href="style.css">Para criar um arquivo CSS no VS Code, navegue até a pasta de destino, clique com o botão direito e selecione "Novo Arquivo". Nomeie o arquivo com a extensão .css.
Abra o arquivo CSS e adicione a seguinte linha no início:
@charset "UTF-8";Em seguida, defina os estilos desejados. Exemplo:
body {
background-color: rgba(0, 255, 135, 0.03);
font-size: large;
margin: 5% 5% 10% 5%;
}
h1 {
background-color: rgba(0, 255, 255, 0.2);
font-size: 25px;
text-align: center;
}
h2 {
background-color: rgba(0, 235, 255, 0.1);
font-size: 20px;
}Como vimos acima, existem três formas de aplicar estilos na página: inline, interno e externo. É possível usar os três simultaneamente, e por isso existe uma hierarquia entre eles. O HTML prioriza do mais específico para o mais generalizado.
Ordem de prioridade:
OBSERVAÇÃO: Se houver estilos concorrentes na mesma folha de estilo e de mesma hierarquia, o CSS aplicará o que for definido por último.