Exercício e teoria para aplicar o CSS no Webdesign

1. CSS NA PRÁTICA
PARA WEBDESIGNERS
RENATO MELO - 2018

2. QUAL A FUNÇÃO
DO CSS NA
PROGRAMAÇÃO?

3. Programação
em Três Partes
Html: Conteúdo
CSS: Estilo
Javascript:
Inteligência

4. Nome = técnico
Define um estilo único para
um elemento: body, h1...

5. #nome = time
Define um estilo único
para um identificador

6. .nome = jogador
Define um estilo único para
uma classe, que pode ser
utilizada qualquer hora.

7. Exemplo
body{
background: #ccc;
font: 12pt Arial, Sans-Serif;
color: #000;
}
#topo{
width: 780px;
background: #ccc url(bgtopo.jpg) repeat-x;
font-size: 20pt;
color: #ff0000;
}
.produto{
float: right;
text-align: center;
font-size: 16pt;
color: #ff0000;
}

8. PADRÃO DE CORES = COR HEX
É a cor do #

9. Exemplos de fontes:
Arial, Calibri, Verdana
Trebuchet, Times New
Roman...

10. trabalho
2
05.06

11. renatomelo.com.br/esamc/heineken.zip

12. 1 – ALTERAR O TÍTULO PARA HEINEKEN UEFA CHAMPIONS
LEAGUE;
2 – ALTERAR CONTATO PARA FAQ;
3 – ALTERAR CHAMADA PARA: “VOCÊ NA FINAL DA
CHAMPIONS 2015”
4 – AUMENTAR A FONTE DE “RESPONDA, POR QUE...” PARA
20PX
5 – TROCAR A COR DA FONTE DOS TÍTULOS (FACEBOOK, SMS
E E-MAIL) PARA #dcddde
6 – ACRESCENTAR NO TEXTO DO RODAPÉ A FRASE: “BEBA
COM MODERAÇÃO”
7 – TROCAR A COR DO RODAPÉ DE PRETO PARA VERMELHO:
#ff0004

13. #PRÁTICA
Informações úteis

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

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

16. 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

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

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

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

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

21. renatomelo.com.br/esamc/aula5web.zip

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

23. #ALTERAR
2. NA CHAMADA, ALTERAR
PROMOÇÃO PARA
CONCURSO

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

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

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

27. #ALTERAR
6. ALTERAR A COR DO
RODAPÉ DE VERMELHO
PARA PRETO: #000000

28. SLIDE:
slideshare.net/renatomelo1

29. FACEBOOK.COM/
RENATOMELOMKT
renato@iskadigital.com.br