Tutorial HTML

HTML HOME Introdução HTML Editores de HTML HTML básico Elementos HTML Atributos HTML Títulos HTML Parágrafos HTML Estilos HTML Formatação HTML Cotações HTML Comentários HTML Cores HTML HTML CSS Links HTML Imagens HTML HTML Favicon Tabelas HTML Listas HTML Bloco HTML e Inline Classes HTML Código HTML Iframes HTML JavaScript HTML Caminhos de arquivo HTML Cabeçalho HTML Esquema HTML HTML Responsivo Código de computador HTML Semântica HTML Guia de estilo HTML Entidades HTML Símbolos HTML Emojis HTML Conjunto de caracteres HTML Codificação de URL HTML HTML vs. XHTML

Formulários HTML

Formulários HTML Atributos de formulário HTML Elementos de formulário HTML Tipos de entrada HTML Atributos de entrada HTML Atributos do formulário de entrada HTML

Gráficos HTML

Tela HTML HTML SVG

Mídia HTML

Mídia HTML Vídeo HTML Áudio HTML Plug-ins HTML HTML YouTube

APIs HTML

Geolocalização HTML Arrastar/Soltar HTML Armazenamento Web HTML Trabalhadores da Web HTML HTML SSE

Exemplos HTML

Exemplos HTML Questionário HTML Exercícios HTML Certificado HTML Resumo HTML Acessibilidade HTML

Referências HTML

Lista de tags HTML Atributos HTML Atributos Globais HTML Suporte ao navegador HTML Eventos HTML Cores HTML Tela HTML Áudio/vídeo HTML Tipos de documento HTML Conjuntos de caracteres HTML Codificação de URL HTML Códigos HTML Lang Mensagens HTTP Métodos HTTP PX to EM Converter Atalhos do teclado

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

Manipular texto
cores,  caixas


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 styleatributo 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 styleatributo 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 colordefine a cor do texto a ser usado.

A propriedade CSS font-familydefine a fonte a ser usada.

A propriedade CSS font-sizedefine 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 borderdefine 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 paddingdefine 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 margindefine 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 stylepara 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 colorpara cores de texto
  • Use a propriedade CSS font-familypara fontes de texto
  • Use a propriedade CSS font-sizepara tamanhos de texto
  • Use a propriedade CSS borderpara bordas
  • Use a propriedade CSS paddingpara espaço dentro da borda
  • Use a propriedade CSS marginpara espaço fora da borda

Dica: Você pode aprender muito mais sobre CSS em nosso Tutorial de CSS .


Exercícios HTML

Teste-se com exercícios

Exercício:

Use CSS para definir a cor de fundo do documento (corpo) para amarelo.

<!DOCTYPE html>
<html>
<head>
<style>

  :amarelo;

</style>
</head>
<body>

<h1>Minha página inicial</h1>

</body>
</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 .