1. Sintaxe Básica do CSS
O CSS é escrito através de regras de estilo. Cada regra é composta por um seletor e um bloco de declarações. O seletor indica qual elemento HTML será estilizado, enquanto as declarações definem como esse elemento irá aparecer.
Estrutura básica de uma regra CSS:
seletor {
propriedade: valor;
}
Exemplos do que compõe a sintaxe do CSS:
• Seletor – escolhe o elemento HTML;
• Propriedade – define o que será alterado;
• Valor – indica como será a alteração;
• Cada declaração termina com ponto e vírgula (;).
2. Seletores Simples em CSS
Os seletores são usados para indicar quais elementos HTML receberão estilo.
Os principais seletores simples são:
• Seletor de elemento (tag): seleciona elementos pelo nome da tag;
• Seletor de classe: seleciona elementos que possuem uma classe específica;
• Seletor de ID: seleciona um elemento com identificador único;
• Seletor universal: seleciona todos os elementos da página.
3. Tipos de Seletores Simples
3.1 Seletor de Elemento
O seletor de elemento utiliza o nome da tag HTML
e aplica o estilo a todos os elementos desse tipo.
Exemplo:
p {
color: blue;
}
Características:
• Aplica o estilo a todas as tags iguais;
• É simples e muito utilizado;
• Possui baixa prioridade em relação a classes e IDs.
3.2 Seletor de Classe
O seletor de classe é identificado por um ponto (.)
e permite aplicar estilos a vários elementos diferentes.
Exemplo:
.texto {
font-size: 18px;
}
Características:
• Pode ser reutilizado em vários elementos;
• Usa o ponto (.) antes do nome;
• É muito comum no desenvolvimento web.
3.3 Seletor de ID
O seletor de ID utiliza o símbolo # e identifica
um único elemento na página HTML.
Exemplo:
#principal {
background-color: lightgray;
}
Características:
• Deve ser único na página;
• Usa o símbolo #;
• Possui maior prioridade que classes e elementos.