1. Tag <style>
Se um elemento HTML tiver muitos estilos, eles podem ser movidos para um elemento especial — tag style. Geralmente é colocado dentro da tag <head> e fica assim:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exemplo de CSS</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>Este é um exemplo de uso de estilos na tag <style>.</p>
</body>
</html>
Agora não é necessário escrever uma longa linha de estilos para a tag <body> no atributo style, você pode movê-los para a tag style. Isso é muito prático.
O mesmo se aplica à tag <p> (parágrafo). Além disso, o estilo definido na tag <style> no <head>, será aplicado a todos os parágrafos no documento, mesmo se houver milhares deles. Isso porque na tag <style> os estilos são descritos dentro de seletores.
5.2 Seletores
Os seletores são uma forma de escolher os elementos HTML aos quais as propriedades CSS serão aplicadas. Existem diferentes tipos de seletores:
Seletor de tag
Aplica estilo a todos os elementos de um determinado tipo. Você só precisa especificar o nome da tag e as chaves depois dela.
tagname {
// estilos
}
tagname pode ser qualquer coisa: body, image, a, p, … qualquer coisa
Seletor de classe
Também é possível vincular propriedades CSS a um grupo de elementos sem especificar uma tag, apenas dando um nome a esse grupo. Esse grupo em CSS é chamado de classe. Esse estilo é aplicado a todos os elementos com uma classe específica. Classes são definidas no atributo class no HTML.
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p.important {
font-weight: bold;
}
</style>
</head>
<body>
<p class="important">Este é um texto importante.</p>
<p>Este é um texto comum.</p>
</body>
</html>
No exemplo acima, apenas o texto do primeiro parágrafo será destacado em negrito, pois aplicamos o estilo/classe «important». Pelo contrário, o segundo parágrafo não tem esse estilo.
Ao descrever estilos na tag <style>, você pode definir de 3 maneiras:
- tagname { …}
- tagname.classname { …}
- .classname { …}
Vamos explorar o tema de seletores em detalhes quando estudarmos CSS. No momento, estou te explicando isso porque os exemplos de HTML incluirão CSS frequentemente, e muitas vezes usarei a tag style para atribuir estilos a elementos HTML específicos utilizando seletores.
GO TO FULL VERSION