CSS (Cascading Style Sheets) é a linguagem usada para estilizar páginas HTML, ou seja, definir como os elementos devem aparecer visualmente no navegador.
Com o CSS, é possível controlar cores, tamanhos, margens, espaçamentos, fontes, posicionamentos, e até criar animações e efeitos visuais.
Enquanto o HTML estrutura o conteúdo, o CSS se preocupa com a aparência. O nome "cascading" (cascata) se refere à forma como os estilos são aplicados:
regras mais específicas substituem regras mais genéricas, e existe uma hierarquia de prioridade que determina qual estilo prevalecerá em caso de conflito.
O CSS pode ser aplicado de três formas: inline (diretamente dentro do elemento HTML com o atributo style), interno (usando a tag <style> dentro do <head> do HTML),
ou externo (através de arquivos .css vinculados ao HTML com a tag <link>). A melhor prática é usar arquivos externos, pois facilita a manutenção e a reutilização
do estilo em várias páginas. O CSS utiliza seletores para identificar quais elementos serão estilizados. Por exemplo, h1 { color: blue; } define que todos os títulos
h1 terão a cor azul. Além disso, o CSS permite a criação de layouts responsivos, ou seja, que se adaptam a diferentes tamanhos de tela, o que é essencial no
desenvolvimento moderno de sites.
Propriedades de Aparência / Cor
Propriedade
Função
color
Cor do texto.
background-color
Cor de fundo do elemento.
background-image
Imagem de fundo.
background-size
Tamanho da imagem de fundo.
background-repeat
Define se a imagem de fundo se repete.
background-position
Posição da imagem de fundo.
opacity
Transparência do elemento.
box-shadow
Sombra ao redor do elemento.
text-shadow
Sombra no texto.
border
Borda do elemento.
border-radius
Arredondamento dos cantos da borda.
outline
Contorno externo ao elemento.
filter
Efeitos visuais como blur, brilho etc.
mix-blend-mode
Define como camadas se misturam.
visibility
Controla se o elemento está visível ou não.
Propriedades de Tamanho e Espaçamento (Box Model)
Propriedade
Função
width
Largura do elemento.
height
Altura do elemento.
max-width
Largura máxima.
min-width
Largura mínima.
max-height
Altura máxima.
min-height
Altura mínima.
padding
Espaço interno entre conteúdo e borda.
padding-top
Espaço interno superior.
padding-right
Espaço interno à direita.
padding-bottom
Espaço interno inferior.
padding-left
Espaço interno à esquerda.
margin
Espaço externo ao redor do elemento.
margin-top
Margem superior.
margin-bottom
Margem inferior.
box-sizing
Define como width/height são calculados.
Propriedades de Tipografia (Texto e Fonte)
Propriedade
Função
font-family
Fonte utilizada no texto.
font-size
Tamanho da fonte.
font-weight
Espessura da fonte.
font-style
Estilo (normal, itálico, etc).
line-height
Altura entre linhas de texto.
letter-spacing
Espaço entre letras.
word-spacing
Espaço entre palavras.
text-align
Alinhamento do texto.
text-decoration
Decoração como sublinhado ou linha.
text-transform
Transformação de caixa (maiúsculas, etc).
white-space
Tratamento de espaços e quebras.
direction
Direção do texto (esquerda para direita, etc).
quotes
Define estilo de aspas.
vertical-align
Alinhamento vertical do texto.
overflow-wrap
Quebra automática de palavras.
Propriedades de Layout / Posicionamento
Propriedade
Função
display
Tipo de exibição do elemento (block, flex...)
position
Tipo de posicionamento.
top
Distância do topo.
right
Distância da borda direita.
bottom
Distância inferior.
left
Distância da borda esquerda.
z-index
Ordem de sobreposição dos elementos.
float
Define se o elemento flutua à esquerda ou direita.
