Este documento apresenta os principais conceitos de CSS, incluindo sintaxe, seletores, box model, unidades de medida, boas práticas de nomenclatura e debugagem. Dois exercícios práticos são fornecidos para aplicar os conceitos aprendidos.

1. CSS
Carlos Schallenberger e Tatiane Nogueira
Aceleradora Ágil

2. TÓPICOS
1. O que é CSS?
2. Sintaxe
3. Seletores
4. Box Model
5. Valores e unidades
6. Boas práticas
7. Nomenclatura BEM
8. Debugando CSS
9. Atividades

3. HTML CSS

4. index.html style.css

5. SINTAXE

6. SELETORES SIMPLES: TAG, CLASS & ID

7. SELETORES: PSEUDO-CLASSES
https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-classes

8. BOX MODEL

9. PIXELS x PORCENTAGEM %
40%400px

10. PIXELS x REM
"Pixel é uma medida fixa"
.exemplo-pixels {
font-size: 18px;
}
"Rem é uma medida dinâmica"
body {
font-size: 12px;
}
.exemplo-rem {
font-size: 1.5rem;
}

11. View Width (VW) x View Height (VH)
VH = 1/100 da altura do navegador.
exemplo: para um navegador de 900px, 1vh = 9px
VW = 1/100 da largura do navegador.
exemplo: para um navegador de 900px, 1vw = 9px

12. RGBA x HEX
rgba(255, 255, 255, 0.5)
red green blue alpha
#FF0000
red green blue{
{
{

13. BOAS PRÁTICAS
● Usar nomes semânticos
● Sempre prefira classes
● Não use !important
● Não usar o nome da cor por extenso, sempre prefira RGBA
● Z-index: somente valores entre 0 e 20
● Floats: não use!

14. NOMENCLATURA DO BEM
Elemento que faz parte do
bloco
Usado para sinalizar um
Estado ou comportamento
Bloco independente

15. NOMENCLATURA DO BEM

16. DEBUGANDO CSS

17. DÚVIDAS?

18. OBRIGADO
Dúvidas ou sugestões:
Carlos Schallenberger e Tatiane Nogueira
cschallen@thoughtworks.com e
tnogueir@thoughtworks.com

19. ATIVIDADES

20. ATIVIDADE 1
https://eliasnogueira.github.io/css-dinner/

21. ATIVIDADE 2
https://materializecss.com/