Estilos HTML - CSS
CSS significa Cascading Style Sheets.
CSS economiza muito trabalho. Ele pode controlar o layout de várias páginas da web de uma só vez.
CSS = Estilos e Cores
O que é CSS?
Cascading Style Sheets (CSS) é usado para formatar o layout de uma página da web.
Com CSS, você pode controlar a cor, a fonte, o tamanho do texto, o espaçamento entre os elementos, como os elementos são posicionados e dispostos, quais imagens de fundo ou cores de fundo devem ser usadas, exibições diferentes para diferentes dispositivos e tamanhos de tela e muito mais!
Dica: A palavra cascata significa que um estilo aplicado a um elemento pai também se aplicará a todos os elementos filhos dentro do pai. Portanto, se você definir a cor do corpo do texto como "azul", todos os títulos, parágrafos e outros elementos de texto dentro do corpo também terão a mesma cor (a menos que você especifique outra coisa)!
Usando CSS
CSS pode ser adicionado a documentos HTML de 3 maneiras:
- Inline - usando o
style
atributo dentro de elementos HTML - Interno - usando um
<style>
elemento na<head>
seção - Externo - usando um
<link>
elemento para vincular a um arquivo CSS externo
A maneira mais comum de adicionar CSS é manter os estilos em arquivos CSS externos. No entanto, neste tutorial, usaremos estilos internos e internos, porque isso é mais fácil de demonstrar e mais fácil para você tentar por conta própria.
CSS embutido
Um CSS embutido é usado para aplicar um estilo único a um único elemento HTML.
Um CSS embutido usa o style
atributo de um elemento HTML.
O exemplo a seguir define a cor do texto do <h1>
elemento como azul e a cor do texto do <p>
elemento como vermelho:
Exemplo
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</p>
CSS interno
Um CSS interno é usado para definir um estilo para uma única página HTML.
Um CSS interno é definido na <head>
seção de uma página HTML, dentro de um <style>
elemento.
O exemplo a seguir define a cor do texto de TODOS os <h1>
elementos (nessa página) para azul e a cor do texto de TODOS os <p>
elementos para vermelho. Além disso, a página será exibida com uma cor de fundo "powderblue":
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS externo
Uma folha de estilo externa é usada para definir o estilo de muitas páginas HTML.
Para usar uma folha de estilo externa, adicione um link a ela na <head>
seção de cada 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>
A folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo não deve conter nenhum código HTML e deve ser salvo com uma extensão .css.
Aqui está a aparência do arquivo "styles.css":
"estilos.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Dica: Com uma folha de estilo externa, você pode alterar a aparência de um site inteiro, alterando um arquivo!
Cores, fontes e tamanhos CSS
Aqui, vamos demonstrar algumas propriedades CSS comumente usadas. Você aprenderá mais sobre eles mais tarde.
A propriedade CSS color
define a cor do texto a ser usado.
A propriedade CSS font-family
define a fonte a ser usada.
A propriedade CSS font-size
define o tamanho do texto a ser usado.
Exemplo
Uso de propriedades CSS color, font-family e font-size:
<!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>
Borda CSS
A propriedade CSS border
define uma borda em torno de um elemento HTML.
Dica: Você pode definir uma borda para quase todos os elementos HTML.
Exemplo
Uso da propriedade de borda CSS:
p {
border: 2px
solid powderblue;
}
Preenchimento CSS
A propriedade CSS padding
define um preenchimento (espaço) entre o texto e a borda.
Exemplo
Uso de propriedades de borda e preenchimento CSS:
p {
border: 2px
solid powderblue;
padding: 30px;
}
Margem CSS
A propriedade CSS margin
define uma margem (espaço) fora da borda.
Exemplo
Uso de propriedades de borda e margem CSS:
p {
border: 2px
solid powderblue;
margin: 50px;
}
Link para CSS externo
As folhas de estilo externas podem ser referenciadas com um URL completo ou com um caminho relativo à página da Web atual.
Exemplo
Este exemplo usa um URL completo para vincular a uma folha de estilo:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Exemplo
Este exemplo vincula a uma folha de estilo localizada na pasta html no site atual:
<link rel="stylesheet" href="/html/styles.css">
Exemplo
Este exemplo vincula a uma folha de estilo localizada na mesma pasta da página atual:
<link rel="stylesheet" href="styles.css">
Você pode ler mais sobre caminhos de arquivo no capítulo Caminhos de arquivo HTML .
Resumo do capítulo
- Use o atributo HTML
style
para estilo inline - Use o elemento HTML
<style>
para definir CSS interno - Use o elemento HTML
<link>
para fazer referência a um arquivo CSS externo - Use o elemento HTML
<head>
para armazenar os elementos <style> e <link> - Use a propriedade CSS
color
para cores de texto - Use a propriedade CSS
font-family
para fontes de texto - Use a propriedade CSS
font-size
para tamanhos de texto - Use a propriedade CSS
border
para bordas - Use a propriedade CSS
padding
para espaço dentro da borda - Use a propriedade CSS
margin
para espaço fora da borda
Dica: Você pode aprender muito mais sobre CSS em nosso Tutorial de CSS .
Exercícios HTML
Tags de estilo HTML
Tag | Description |
---|---|
<style> | Defines style information for an HTML document |
<link> | Defines a link between a document and an external resource |
Para obter uma lista completa de todas as tags HTML disponíveis, visite nossa Referência de tags HTML .