CSS na prática

1. CSS NA PRÁTICA
PARA
WEBDESIGNERS
WEBDESIGN 2021 – RENATO MELO

2. INFORMAÇÕES
ÚTEIS

3. Textos
Links
Estilo:
Fonte
Cores
Alinhamhento
Etc...
PRINCIPAL DIFERENÇA DO HTML E DO CSS

4. 3. ABRA O HTML E O
CSS NO BLOCO DE
NOTAS
1. DESCOMPACTE
SEMPRE TUDO NA
MESMA PASTA
2. ABRA O HTML NO
NAVEGADOR

5. 1. ABRA O BLOCO DE NOTAS
2. VÁ EM ABRIR
3. VÁ NA PASTA DOS SEUS ARQUIVOS
4. SELECIONE PARA ABRIR TODOS OS
ARQUIVOS PARA APARECER O HTML E
CSS
PARA ABRIR OS ARQUIVOS NO BLOCO DE NOTAS

6. SALVE O HTML OU
CSS NO BLOCO DE
NOTAS
QUER VER COMO ESTÁ
INDO AS ALTERAÇÕES?
PRESSIONE A TECLA
F5 NO NAVEGADOR

7. QUER ACHAR ALGO NO
SEU CÓDIGO?
Editar - Localizar

8. ATENÇÃO:
Na Direção, cuidado com
Acima e Abaixo

9. DIV:
O nome da DIV sempre será o
correspondente no css

10. NA PRÁTICA
8 Alterações

11. OS TEMPLATES TRAZEM AS
DIVISÕES EM INGLÊS

12. NO HEAD, VAMOS ALTERAR
APENAS O TÍTULO!

13. VAMOS PRECISAR USAR:
Editar - Localizar

14. #ALTERAR - HTML
1. NO TÍTULO: ALTERAR
REXONA PARA
CONCURSO REXONA

15. #ALTERAR - HTML
2. NO MENU: ALTERAR
HOME PARA REXONA

16. #ALTERAR - HTML
3. NA CHAMADA,
ALTERAR PROMOÇÃO
PARA CONCURSO

17. #ALTERAR - HTML
4. NOS TÓPICOS,
ACRESCENTAR “(TODA
LINHA)” DEPOIS DE
MASCULINO E DEPOIS DE
FEMININO.

18. #ALTERAR - CSS
5. ALTERAR A COR DO
TEXTO “QUANTO MAIS
VOCÊ SE MOVE...” PARA
#137293

19. #ALTERAR - CSS

20. #ALTERAR - CSS
Arquivo-css: styles.css

21. #ALTERAR - CSS
6. ALTERAR O TAMANHO
DA FONTE DE
DESODORANTES,
SABONETES, ETC “DE
22PX PARA 20PX”

22. #ALTERAR - CSS
7. ALTERAR A COR DO
“PARTICIPAR” DA FRASE
VEJA COMO PARTICIPAR
PARA: “#137293”

23. #ALTERAR - CSS
Existem dois “h1”, repare no
html qual será a diferença!

24. #ALTERAR - CSS
8. ALTERAR O TAMANHO DA
FONTE DOS TEXTOS
DESCRITIVOS “CONTE SUA
HISTORIA, ENVIE SEU
RELATO, AS 10 MELHORES
HISTÓRIAS” PARA “15PX”

25. CSS NA PRÁTICA
PARA
WEBDESIGNERS
WEBDESIGN 2021 – RENATO MELO