Três maneiras de incorporar CSS numa página
CSS => Cascade Style Sheets (folhas de estilo em cascata)
1) (menos recomendada) é o CSS inline => embutido na tag HTML; efeito limitado, que não é em cascata
HTML base
A declaração text-align: center; só tem efeito no atributo style desse H1 específico
Como ele está "colado" na tag, a ordem de precedência é ALTÍSSIMA, então isso não consegue ser modificado com o CSS em cascata, porque o que foi escrito no inline sempre vai ser lido por último e valer
2) é o CSS dentro da tag
3) CSS em arquivo externo
Todo o CSS fica escrito em um arquivo .css separado, que pode ser aplicado a várias páginas
No HTML (dentro do HEAD), inserir:
Ordem de precedência: "d-esempate" de regras, ou seja, vc tem duas regras que afetam o mesmo elemento do mesmo jeito (por exemplo, mudar a cor do h1)
Quando isso acontece, a "última" é que vale (última = a escrita mais no final do arquivo ou no CSS inline)
Sintaxe do CSS: (ver imagem)
----------------------------
18/09/2024
Seletores
Seletores identificam os elementos que serão transformados com CSS
(como vamos focar em seletores, só vou usar as propriedades color e background-color)
Seletores simples (seletores de elemento) => só usar os nomes das tags que vcs já conhecem
body => afeto todo o corpo da página
Você pode usar qualquer elemento no seletor de elementos: h1, h2 etc, p, li, ol, ul, table form etc
Em alguns casos, precisaremos mudar um elemento em específico sem afetar os outros elementos que compartilham as mesmas características (por exemplo, mexer em um parágrafo sem mudar todos os parágrafos)
Os atributos class e ID => são atributos que agrupam ou diferenciam os elementos
class => agrupa elementos (pode ter mais de um)
ID => precisa ser único, porque o ID diferencia (ID tem que ser único na página inteira)
Seletor de classe é o . (ponto)
Se eu quiser elementos da classe c1, o seletor tem que ser .c1
Seletor de ID é o # (hashtag)
Se eu quiser o elemento de ID id1, o seletor deve ser #id1
Quando um seletor afeta um elemento que tem filhos, de modo geral algumas características são herdadas para os filhos desse elemento também
Quando eu dei a cor da fonte vermelha para o elemento de id #col2 (que é uma div), isso afetou também todos os elementos que eram filhos dessa div.