CSS na Prática

1. CSS NA PRÁTICA
PARA
WEBDESIGNERSWEBDESIGN 2019 – 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. renatomelo.com.br/esamc/aula5web.zip

11. #ALTERAR
1. NO TÍTULO: ALTERAR
COCA COLA PARA
CONCURSO COCA COLA

12. #ALTERAR
2. NO MENU: ALTERAR
HOME PARA COCA COLA

13. #ALTERAR
3. NA CHAMADA,
ALTERAR PROMOÇÃO
PARA CONCURSO

14. #ALTERAR
4. NO TEXTO: CONCURSO
COCA COLA, TROCAR A
FONTE PARA A COR
PRETA: #000000;

15. #ALTERAR
5. NO TEXTO: AQUI VOCÊ
ENCONTRA... TROCAR A
COR DO TEXTO PARA
PRETO: #000000

16. #ALTERAR
6. ALTERAR A FONTE DO
MESMO TEXTO PARA 20px

17. #ALTERAR
7. TROCAR O LINK DO
FACEBOOK DA COCA
PARA /COCACOLA

18. #ALTERAR
8. ALTERAR A COR DOS
TÍTULOS: FACEBOOK, E-
MAIL E SMS DE BRANCO
PARA PRETO #000000

19. #ALTERAR
9. ALTERAR A COR DOS
ITENS ABAIXO DOS
TÍTULOS: FACEBOOK, E-
MAIL E SMS DE BRANCO
PARA PRETO #000000

20. #ALTERAR
10. ALTERAR A COR DO
RODAPÉ DE VERMELHO
PARA PRETO: #000000

21. slideshare.net/renatomelo1