O documento introduz o CSS no webdesign, explicando como ele separa conteúdo, estilo e comportamento, tornando os sites mais acessíveis, consistentes visualmente e baratos de manter. O CSS define estilos para elementos, IDs e classes, usando propriedades como cores, fontes e layout. Exemplos demonstram sintaxe básica de CSS.

1. INTRODUÇÃO DO
CSS NO WEBDESIGN
RENATO MELO - 2015

2. Antigamente: Site
com emaranhado
de tags, estilos e
formatações

3. Se o cliente pedisse
alteração você tinha
que alterar página
por página.

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

6. SEM PADRÕES
✗ Extensão da Mídia Impressa
✗ Layout baseado em Tabelas
✗ Conteúdo, Apresentação e
Comportamento “aninhados”
✗ Código Incompreensível

7. COM PADRÕES
✔ Acessível de qualquer
dispositivo
✔ Layout baseado em CSS
✔ Separação entre
Conteúdo, Apresentação e
Comportamento
✔ Código Acessível

8. VANTAGENS
Carregamento mais rápido
Menores custos com hospedagem
Melhor Consistência Visual
Redesign mais barato e eficiente
Melhores resultados nos
Mecanismos de Buscas
Maior acessibilidade

9. Prazer CSS

10. nome
Define um estilo único para
um elemento: body, h1...
TÉCNICO
Parte mais
importante

11. #nome
Define um estilo único
para um identificador
#TIME
Seguem as
ordens do
técnico

12. .nome
Define um estilo único para
uma classe, que pode ser
utilizada qualquer hora.
.jogador
Joga para
o #time

13. 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;
}

14. PADRÃO
DE CORES

15. COR HEX
É a cor do #

16. As Fontes também
merecem atenção

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

18. Pode-se colocar mais de
uma fonte + opção de
“Sans-serif” ou “Serif”

19. NA PRÁTICA:
Letras minúsculas
Errado:
<DIV><P>Aqui um texto!</P></DIV>
Correto:
<div><p>Aqui um texto!</p></div>

20. NA PRÁTICA:
Abre e feche os comandos corretamente!
Errado:
<div><p>Aqui um <em>texto!</p></em></div>
Correto:
<div><p>Aqui um <em>texto! </em></p></div>

21. NA PRÁTICA:
Feche todos os comandos
Errado:
<p>Um parágrafo.
Correto:
<p>Um parágrafo.</p>

22. NO CSS E DO HTML:
Definido pelo # ou .
Exemplo:
-no CSS: #header {width:900px;}
- no HTML:
<div id=“header”>…</div>

23. ANOTE SUAS
OBSERVAÇÕES
/* Comentário */

24. DIVIDINDO
UM SITE

26. #topo

27. #bemvindo

28. #login

29. #cabecalho

30. #logo

31. #box-procura

32. #menu

33. #destaque

34. #slider

35. AGORA FAÇA
VOCÊ MESMO!

37. AULA QUE VEM!
COMEÇAR A
PRODUÇÃO DO SITE!
TRAZER SUA
IMAGINAÇÃO +
MATERIAL: Exemplo:
cartolina + tintas +
canetinhas + água +
giz de cera.

39. ESTA AULA ESTÁ
DISPONÍVEL EM:
renatomelo.com.br/slides
ou no grupo do Facebook:
bit.ly/gruporenato