O que é CSS e para que serve?

O CSS (Cascading Style Sheets ou Folha de Estilo em Cascatas) é um fragmento do código HTML(ou documento separado) responsável por estilizar as páginas, ou seja, colocar uma cor, deixar a borda mais arredondada, mudar a fonte do texto, posicionar algum elemento mais para a esquerda ou para direita, existe uma infinidade de estilos que podemos construir com CSS.

Sintaxe

Atributo style dentro de uma tag html(inline)

Tag <style></style>

Arquivo CSS separado

estilo.css:

Seletor é a parte onde definimos quais elementos serão aplicados os estilos criados.

● Seleção por elemento 

Qual elemento HTML queremos aplicar a regra de estilo definida 

● Seleção por classe 

Seleção de elementos por meio do nome da classe que foi definida como atributo e que tem  como sintaxe o caractere . (ponto) seguido do nome da classe. 

● Seleção por ID 

Consiste na seleção de elementos por meio do nome de um id que foi definido como atributo.

Combinadores

Um elemento de combinação é algo que explica a relação entre os seletores.  Há quatro combinadores diferentes em CSS:  

• Seletor descendente se trata de todos os elementos que têm a filiação a uma elemento especificado. Exemplo:

div p {background-color: blue;}

• Seletor filho corresponde a todos os elementos que são os filhos imediatos de um elemento especificado. Exemplo:

div > p {background-color: blue;}

• Seletor irmão adjacente seleciona os elementos que são os irmão adjacentes de um elemento. Exemplo:

div + p {background-color: blue;}

• Seletor irmão em geral seleciona os elementos que são imrãos (mesmo pai) de um elementos especificado. Exemplo:

div ~ p {background-color: blue;}

3 Bases do CSS

Herança

Herança assim como na vida real é algo que é passado de pai para filho, na programação, não é diferente!

Existem estilos, que ao serem atribuídos para um elemento, todos os seus elementos filhos, ou seja elementos que estão dentro desse, recebem essa estilização automaticamente.

Especificidade

A especificidade é a ordem de prioridade em que as propriedades definidas em CSS são utilizadas. Caso essa prioridade seja igual, vale a última declaração no código.

Esta prioridade está na seguinte ordem, da menor para a maior:

Seletores Universais -> Classes seletoras -> Seletores ID -> Estilo Inline.

Cascata

A cascata é basicamente o algoritmo que o navegador decide qual estilo de CSS aplicar a cada elemento.

Temos 4 níveis:

• A Origem
• A importância
• A Especificidade
• A Posição

Origem

Na camada de Origem, existem 3 principais estilizações

• A feita pelo navegador que já vem com ele;
• A que o usuário define;
• A da página web, que é a que o programador define;

Importância

A Camada de importância se refere basicamente a propriedade !important, que podemos passar para uma estilização dentro dos arquivos CSS, essa propriedade permite dizer que aquela estilização específica, é mais importante que outra e ela será priorizada

Cascata | Especificidade

No terceiro nível da cascata, temos a especificidade, onde é levado em consideração a especificidade dos seletores e combinadores que foram explicadas e exemplificadas anteriormente, usando todo o que foi explicado, você consegue estilizar a maioria das páginas, sem necessitar do !important./t

Cascata | Posição

E na última camada, temos a posição, basicamente nessa camada a posição de declaração de cada estilo importa, estilos declarados posteriormente, sobrescrever os estilos já escritos, assim como a declaração de uma folha externa após a outra sobrescreve a anterior!

Exercício

Copie o código do exemplo, salve os arquivos numa mesma pasta e mude as cores dos textos.

Opcional: mude os valores das demais propriedades das tags dentro do arquivo “estilo.css”. Adicionar classes e IDs nas tags e utilizar seu seletores.

Obs.: o site www.w3schools.com/css possui mais informações sobre o uso de CSS

Arquivo da aula 1: https://drive.google.com/drive/folders/1qg1aTSfgUwh94Jepc4DMJIjuIOoI0iPM?usp=sharing