SELETORES DE CSS
Um seletor css seleciona um elemento do html para utilizar.
O seletor de elemento css.
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color:blue;
}
</style>
</head>
<body>
<p>Primeiro pragráfo</p>
<p id="para1">para todos</p>
<p>mim ame!</p>
</body>
</html>
O seletor <p> vai colocar todos os parágrafos no center com cor
azul.
O SELETOR DE ID CSS
O seletor do id
é usado para selecionar um elemento especifico.
Para selecionar um elemento com um id específico,
escreva um caractere hash (#), seguido do id do elemento.
<!DOCTYPE
html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p
id="para1">Bem vindo html5</p>
<p>Esse
parágrafo não está usando css.</p>
</body>
</html>
O SELETOR DE CLASSE CSS
Para selecionar elementos
com uma classe específica, escreva um caractere de ponto (.), seguido do nome
da classe.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color:blue;
}
</style>
</head>
<body>
<h1 class="center">Título da página está
centralizado com acor azul.</h1>
<p class="center">O parágrafo está
centralizado com a cor azul</p>
</body>
</html>
apenas os elementos
<p> com class="center" serão vermelhos e alinhados ao centro:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Título não está usando
css</h1>
<p class="center">O parágrafo está
centralizado e vermelho.</p>
</body>
</html>
o elemento <p> será estilizado de acordo com
class="center" e class="large":
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 250%;
}
</style>
</head>
<body>
<h1 class="center">Título não está usando css</h1>
<p class="center">O parágrafo está centralizado e vermelho.
</p>
<p class="center large">O parágrafo está centralizado e
vermelho com fonte 250%. </p>
</body>
</html>
O seletor universal de CSS
O seletor universal (*) seleciona todos os elementos HTML na
página.
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Título</h1>
<p>primriro parágrafo.</p>
<p id="para1">Tudo bem!</p>
<p>Ande alegre.</p>
</body>
</html>
O seletor de agrupamento de CSS
seleciona todos os elementos
HTML com as mesmas definições de estilo.
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Para agrupar seletores,
separe cada seletor com uma vírgula.
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Título 1</h1>
<h2>Título2</h2>
<p>primeiro parágrafo.</p>
</body>
</html>