CSS: Coisas que todo desenvolvedor, principalmente WEB, não pode esquecer:
Published: 2023-05-11 22:45:50

PSEUDOCLASS-
:hover- Usado normalmente em botões, ele tem a função de mudar a cor, fonte, tamanho ou qualquer outra coisa quando o usuário passar o ponteiro do mouse em cima.
::focus- Usado normalmente em inputs, o focus muda de visual quando CLICAMOS. Meio parecido com o hover, mas o focus só funciona quando clicamos em algum campo, botão... etc. Incrível.
(Obsevações: sempre que for usar o focus, retirar o outline do input ou outra tag que esteja sendo estilizada pelo focus. Só ssim para mostrar os resultados em tela.

CHILD-

Aqui você seleciona o que vai ser estilizado, exemplo:
  <ul>
 <li>texto 01</li>
 <li>texto 02</li>
 <li>texto 03</li>
 <li>texto 04</li>
  </ul>

Suponhamos que o texto 011 tenha que ser azul, o 2 tenha que ser roxo, o 3 tenha que ser ciano e o 4 tenha que ser vermelho.

No css, puxamos a ul, depois a li e adicionamos o :nth-child(posição do li) {
estilizações
}

Assim:
ul li:nth-child(1){
  color: blue;
} texto 1 azul

ul li:nth-child(4){
  color: red;
} texto 4 vermelho

ul li:nth-child(3) {
  color: aqua;
} texto 3 ciano

ul li:nth-child(2) {
  color: blueviolet;
} texto 2 roxo

FÁCIL.

DISPLAYS-

Display-block:
 Algumas tags já possuem, por padrão, a display-block. Eles são: div, section, p, h1, h2, ul, article. Essa display block, por padrão, ela joga os elementos pra debaixo dela. Ou seja, qualquer tag padronizada display-block ou tag estilizada com a display-block, ocupa 100% da linha que ela está e automaticamente joga a outra tag para baixo dela. (A menos que na estilização você defina o máximo de largura que tenha que ocupar).

Display-inline: 
Alinha as divs um ao lado do outro. Não é recomendável usar o display-inline em div´s, pois o display inline deixa somente um ao lado do outro mas fica "bloqueado", não é possível estilizar com margin, height... etc. Serve somente para alinhar as divs, mais nenhuma estilização.

Display: inline-block:
Como já diz o nome, a inline-block é a função de inline com block. Como assim? A display-block ocupa todo o espaço na linha e joga todas as outras div´s para baixo, porém, é possível estilizá-las com margin, height... etc, certo? Já o display inline alinha todas as div´s na mesma linha, porém não pode ser estilizada, ela fica limitada, certo? Com a fusão dos dois, com a inline block nós simplesmente conseguimos alinhar as div´s na mesma linha e estilizá-las com margin, height, e outras propriedades. Recomenda-se usar, pelo menos para div´s, sempre o inline-block.


POSITION-

Position-static: 
Essa propriedade é padrão do navegador. Se você aplicar um position-static em algo, ele ficará parado, seja com margin, bottom, left, right, top... etc. Não mudará nada. E, importante lembrar que o static é PADRAO, mesmo que seja só o Position sozinho, as outras propriedades não vão fazer diferença.

Position-fixed:
Com a fixed podemos estilizar a position e, o mais legal, é que com o fixed, quando você descer o scroll na página, aquela position fixed faz com que o elemento desça junto. Se não tivesse o fixed, ficaria lá em cima.

Position-sticky:
Muito parecido com o fixed, a diferença é que com o sticky aplicado, o elemento só fica fixo na sua viewport quando você descer o scroll até ele, então ele só começa a te seguir a partir daí. Já o fixed te segue desde o início. Aplicamos o sticky quando queremos deixar algo fixo a partir de uma determinada área do nosso site.