Como adicionar CSS
Quando um navegador lê uma folha de estilo, ele formata o documento HTML de acordo com as informações da folha de estilo.
Três maneiras de inserir CSS
Existem três maneiras de inserir uma folha de estilo:
- CSS externo
- CSS interno
- CSS embutido
CSS externo
Com uma folha de estilo 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 de folha de estilo externo dentro do elemento <link>, dentro da seção head.
Exemplo
Estilos externos são definidos dentro do elemento <link>, dentro da seção <head> de uma página HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Uma folha de estilo externa pode ser escrita em qualquer editor de texto e deve ser salva com uma extensão .css.
O arquivo .css externo não deve conter tags HTML.
Aqui está a aparência do arquivo "mystyle.css":
"meuestilo.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Nota: Não adicione um espaço entre o valor da propriedade e a unidade:
Incorreto (espaço): margin-left: 20 px;
Correto (sem espaço):margin-left: 20px;
CSS interno
Uma folha de estilo interna pode ser usada se uma única página HTML tiver um estilo único.
O estilo interno é definido dentro do elemento <style>, dentro da seção head.
Exemplo
Estilos internos são definidos dentro do elemento <style>, dentro da seção <head> de uma página HTML:
<!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 embutido
Um estilo embutido pode ser usado para aplicar um estilo único para um único elemento.
Para usar estilos embutidos, adicione o atributo style ao elemento relevante. O atributo style pode conter qualquer propriedade CSS.
Exemplo
Os estilos embutidos são definidos no atributo "estilo" do elemento relevante:
<!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 estilo (ao misturar conteúdo com apresentação). Use este método com moderação.
Várias folhas de estilo
Se algumas propriedades tiverem sido definidas para o mesmo seletor (elemento) em folhas de estilo diferentes, será usado o valor da folha de estilo da última leitura.
Suponha que uma folha de estilo externa tenha o seguinte estilo para o elemento <h1>:
h1
{
color: navy;
}Então, suponha que uma folha de estilo interna também tenha o seguinte estilo para o elemento <h1>:
h1
{
color: orange;
}Exemplo
Se o estilo interno for definido após o link para a folha de estilo externa, os elementos <h1> serão "laranja":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Exemplo
No entanto, se o estilo interno for definido antes do link para a folha de estilo externa, os elementos <h1> serão "navy":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Ordem em cascata
Qual estilo será usado quando houver mais de um estilo especificado para um elemento HTML?
Todos os estilos em uma página serão "cascata" em uma nova folha de estilo "virtual" de acordo com as seguintes regras, onde o número um tem a prioridade mais alta:
- 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 prioridade mais alta e substituirá os estilos externos e internos e os padrões do navegador.
Já ouviu falar dos Espaços W3Schools ? Aqui você pode criar seu próprio site ou salvar trechos de código para uso posterior, gratuitamente.
Comece gratuitamente ❯* não é necessário cartão de crédito