CSS = Estilos e Cores
Styling HTML com CSS
CSS significa Cascading Style Sheets
Styling pode ser adicionado a elementos HTML de 3 formas:
- Em linha - usando um atributo de estilo em elementos HTML
- Interno - usando um <style> elemento no HTML <head> seção
- Externa - utilizando um ou mais arquivos CSS externos
A forma mais comum de adicionar um estilo, é manter os estilos em arquivos CSS separados. Mas, neste tutorial, utilizamos styling interna, porque é mais fácil de demonstrar, e mais fácil para você experimentar por si mesmo.
Você pode aprender muito mais sobre CSS no nosso Tutorial CSS .
Em linha Styling (Inline CSS)
Styling em linha é usado para aplicar um estilo único para um único elemento HTML:
Styling em linha usa o style atributo.
Este exemplo altera a cor do texto do <h1> elemento para o azul:
Styling Interno (Internal CSS)
styling interno é usado para definir um estilo para uma página HTML.
Styling interno é definido no <head> seção de uma página HTML, dentro de um <style> elemento:
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Tente você mesmo " Styling externa (External CSS)
Uma folha de estilo externa é usada para definir o estilo para muitas páginas.
Com uma folha de estilo externa, você pode mudar o olhar de um web site inteiro mudando um arquivo!
Para usar uma folha de estilo externa, adicione um link para ele no <head> seção da página HTML:
Exemplo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Tente você mesmo " Uma folha de estilo externa pode ser escrito em qualquer editor de texto. O arquivo não deve conter quaisquer tags HTML. O arquivo de folha de estilo deve ser salvo com um .css extensão.
Aqui é como o " styles.css " parece:
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}CSS Fontes
O CSS color propriedade define a cor do texto a ser usado para o elemento HTML.
O CSS font-family propriedade define a fonte a ser usada para o elemento HTML.
O CSS font-size propriedade define o tamanho do texto a ser usado para o elemento HTML.
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Tente você mesmo " O modelo CSS Box
Cada elemento HTML tem uma caixa em torno dele, mesmo se você não pode vê-lo.
O CSS border propriedade define uma borda visível ao redor de um elemento HTML:
O CSS padding propriedade define um padding (space) dentro da fronteira:
O CSS margin propriedade define uma margem (space) fora da fronteira:
Os exemplos CSS acima utilização px para definir os tamanhos em pixels.
O id Atributo
Todos os exemplos acima usam CSS para estilizar elementos HTML de uma forma geral.
Para definir um estilo especial para um elemento especial, primeiro adicionar um atributo id para o elemento:
<p id="p01">I am different</p>em seguida, definir um estilo para o elemento com o específico id :
A class Atributo
Para definir um estilo para um tipo especial ( class ) de elementos, adicionar uma class atributo para o elemento:
<p class="error">I am different</p>Agora você pode definir um estilo diferente para elementos com a classe específica:
Use id para tratar de um single elemento. Use class para lidar com groups de elementos.
Resumo do capítulo
- Use o HTML style atributo para styling em linha
- Use o HTML <style> elemento para definir CSS interna
- Use o HTML <link> elemento para se referir a um arquivo CSS externo
- Use o HTML <head> elemento para armazenar <style> e <link> elementos
- Use o CSS color propriedade para cores de texto
- Use o CSS font-family propriedade para fontes de texto
- Use o CSS font-size propriedade para tamanhos de texto
- Use o CSS border propriedade para fronteiras elemento visível
- Use o CSS padding propriedade para espaço dentro da fronteira
- Use o CSS margin propriedade para fora do espaço da fronteira
Teste-se com exercícios!
Exercício 1 » exercício 2» exercício 3 » exercício 4» exercício 5 » exercício 6»
HTML estilo Tags
| etiqueta | Descrição |
|---|---|
| <style> | Define informações de estilo para um documento HTML |
| <link> | Define uma ligação entre um documento e um recurso externo |