Em CSS, a sintaxe consiste em um Seletor, Propriedade e Valor. Pode ser descrito da seguinte forma:
Explicação do código
Neste exemplo, o ‘p‘ é um seletor (tags do HTML), ‘color’ e ‘font-size‘ são propriedades e ‘blue’ e ‘20px‘ são valores das respectivas propriedades.
Nesse sentido, você pode escrever quantas propriedades em CSS quiser.
Tipos de seletores
Existem diversos tipos de seletores que podem ser usados em CSS. Abaixo estão listados todos os tipos conhecidos.
SELECIONE POR TAG
<html lang="pt-br">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>TecForest - CSS</title>
<style type="text/css">
p{color:blue;}
</style>
</head>
<body>
<p>Exemplo de parágrafo</p>
</body>
</html>Nesse exemplo, o CCS já está incluso no arquivo HTML, e todas as tags p que tiver incluso no arquivo HTML terão a cor blue.
SELETOR UNIVERSAL
Pode selecionar todas as tags na página da web e alterar a cor do texto para azul.
*{color:blue;}
SELECIONE POR CLASSE
Você pode definir regras de estilo com base no atributo de classe dos elementos. Todos os elementos com essa classe serão formatados de acordo com a regra definida.
.demo{color:blue;}Nesse exemplo, todas as tags que em HTML que tiver o código class=”demo” terão as letras em cor azul que foi definida no código acima.
SELECIONE POR ID
Você pode definir regras de estilo com base no atributo id dos elementos. Todos os elementos com essa ID (Identidicação) serão formatados de acordo com a regra definida.
#demo{color:blue;}Nesse exemplo, todas as tags que em HTML que tiver o código id=”demo” terão as letras em cor azul que foi definida no código acima.
SELETOR DESCENDENTE
Você pode definir um elemento específico de regras de estilo somente quando ele estiver dentro de um elemento específico.
p a{color:blue;}
para seletor de classe
p .demo{color:blue;}
para seletor de id
p #demo{color:blue;}
SELECIONE POR CHILD (FILIAÇÃO)
Esse tipo de seletor mudará a cor para azul de todos os parágrafos que são Child (filiação) direto da tag body.
body > p{color:blue;}
SELECIONE POR ATRIBUTO
Esse tipo de seletor mudará todos os campos de entrada <input/> com o valor do tipo e texto.
input[type="text"]{color:blue;}Nesse exemplo, a tag input em HTML que tiver o type=”text” definido em sua prioridade, terá a cor azul.
SELETOR DE AGRUPAMENTO
Isso mudará a cor para azul de todos os h1, p e a de uma vez só.
h1,p,a{color:blue;}
