CSS Intermediário: Layout e Regras Reais

Você já sabe o que é CSS, sabe incluir numa página, sabe selecionar elementos, sabe colorir, sabe tipografia, box model, display, unidades, pseudo-classes e DevTools. Daqui pra frente, o nível sobe.

Este nível cobre o que separa quem "brinca" de CSS de quem "constrói" com CSS:

• Especificidade e cascata: por que uma regra "ganha" da outra
• Combinadores de seletores: descendente, filho, irmão
• Pseudo-elementos: ::before, ::after, ::placeholder
• position: relative, absolute, fixed, sticky
• Flexbox: o sistema de layout que destravou a web
• Backgrounds: imagens, gradientes, múltiplos backgrounds
• Sombras: box-shadow e text-shadow
• Transições: feedback suave entre estados
• Responsividade: media queries e mobile-first

São mais 10 nós. Este é o nível onde a maioria das pessoas "se encontra" com CSS - é aqui que o trabalho de verdade começa. Você vai sair entendendo por que as coisas funcionam (e por que às vezes misteriosamente não funcionam).

Se você já usou Flexbox antes e está confortável, pode dar uma olhada mais rápida nos nós de especificidade, cascata e combinadores (são fundamento, mas muita gente que programa já tem a intuição). Mas o position (especialmente sticky) e as transições merecem atenção - são cheios de detalhes que fazem diferença em produção.

Quando você terminar este nível, vai estar pronto para construir layouts de verdade - páginas completas que funcionam em celular, tablet e desktop. É a base para o próximo nível (CSS Avançado).