Estilos HTML - CSS
Aprenda a adicionar CSS a elementos HTML de 3 formas, estilize-os com diferentes propriedades CSS e veja exemplos práticos.
CSS é usado para estilizar HTML. Ele determina como os elementos HTML aparecem na tela, no papel ou em outros meios.
CSS economiza muito trabalho. Ele pode controlar o layout de várias páginas ao mesmo tempo.
Você pode adicionar CSS a elementos HTML de 3 formas:
- Inline — o atributo
styleé adicionado diretamente a um elemento HTML. - Interno — um elemento
<style>é colocado na seção<head>da página. - Externo — um arquivo
.cssseparado é vinculado à página.
Por que três métodos? Cada um equilibra conveniência e abrangência. Estilos inline são rápidos, mas se aplicam a um único elemento. Estilos internos cobrem uma única página. Folhas de estilo externas são a abordagem recomendada para projetos reais, pois um único arquivo pode estilizar um site inteiro e é armazenado em cache pelo navegador.
Prioridade em cascata
Quando mais de uma regra visa o mesmo elemento, CSS resolve o conflito por especificidade e ordem de origem. Como regra geral, quanto mais próximo um estilo for declarado do elemento, maior a sua prioridade:
style inline > <style> interno > folha de estilo externa
Portanto, se uma folha externa define um parágrafo como azul e um style inline o define como vermelho, o parágrafo será vermelho. (O sinalizador !important pode substituir essa ordem, mas use-o com moderação.) Saiba mais na introdução ao CSS.
Vejamos cada forma.
CSS Inline
Um CSS inline aplica um estilo específico a um único elemento HTML. Para isso, usa-se o atributo style do elemento HTML.
No exemplo abaixo, a cor do texto do elemento <p> é vermelha:
Exemplo de CSS inline:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Usage of the inline CSS</h1>
<p style="color:red;">The paragraph is red.</p>
</body>
</html>CSS Interno
Um CSS interno especifica um estilo para uma única página HTML. Ele é definido no elemento <head> de uma página HTML, dentro de uma tag <style>:
Exemplo de CSS interno:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: yellow;
}
h1 {
font-size: 30px;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>CSS Externo
Uma folha de estilo externa especifica o estilo para várias páginas HTML. Ela pode mudar a aparência de um site inteiro alterando apenas um arquivo.
Para usar uma folha de estilo externa, adicione um <link> para ela dentro do elemento <head> da página HTML. O atributo href aponta para o caminho do arquivo .css:
Exemplo de folha de estilo CSS externa:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>O arquivo styles.css vinculado contém as regras. Ele não pode conter nenhum código HTML e deve ser salvo com extensão .css. Para a página acima, o styles.css poderia ter esta aparência:
body {
background-color: yellow;
}
h1 {
font-size: 30px;
}
p {
font-size: 18px;
}Fontes e Cores CSS
A propriedade CSS font-family define o tipo de letra do conteúdo de texto.
A propriedade CSS font-size define o tamanho do texto.
A propriedade CSS color define a cor do próprio texto. (Note que color não é uma propriedade de fonte — ela controla a cor do texto em primeiro plano.)
A propriedade CSS background-color define a cor atrás do elemento.
Exemplo de fontes e cores CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: #008000;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 200%;
}
p {
color: #666666;
font-family: 'New Roman', serif;
font-size: 150%;
}
</style>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Borda CSS
A propriedade CSS border define valores para os quatro lados de um elemento.
Exemplo da propriedade border do CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px dotted red;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Padding CSS
A propriedade CSS padding especifica o espaçamento interno (espaço) entre o texto e a borda.
Exemplo da propriedade padding do CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px dashed #008022;
padding: 50px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Margem CSS
A propriedade CSS margin cria espaço ao redor do elemento.
Exemplo da propriedade margin do CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px dashed #090fce;
margin: 50px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>O Atributo id
O atributo id seleciona um único elemento exclusivo. Um valor de id deve ser único na página — dois elementos não podem compartilhar o mesmo id. No CSS, você o seleciona com um cerquilha, por exemplo #large-text.
Exemplo do atributo id:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#large-text {
border: 8px groove powderblue;
font-size: 24px;
padding: 20px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p id="large-text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>O Atributo Class
O atributo class é reutilizável: a mesma classe pode ser aplicada a qualquer número de elementos, e um único elemento pode ter várias classes. Isso faz das classes a ferramenta ideal para estilizar um grupo de elementos da mesma forma. No CSS, você seleciona uma classe com um ponto, por exemplo .text.
Exemplo do atributo class:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
border: 8px inset powderblue;
font-size: 20px;
padding: 10px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p class="text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p class="text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>