1. Desenvolvimento Front End
Por: Anderson de Castro

2. Cronograma
• O que é CSS
• Tableless
• Referenciando!
• Seletores
– Intervalo :: 10 minutos
• Elementos e Atributos
• Classes
– Intervalo :: 10 minutos
• Posicionamento
• Encerramento 1º Dia

3. O que é CSS
Cascading Style Sheets
-Folha de Estilos em Cascata
Objetivo: Separar CONTEÚDO(HTML) do
LAYOUT(formatação)

4. TableLess
“Sem Tabela!” CERTO???
Não utilizar tabelas <table>
para estruturar o layout do
site. NÃO é BANIR
o uso de <table>

5. Referenciando CSS
• Inline
– <p style=“color: green;”> Aqui paragráfo </p>
• No próprio arquivo
– <style> p { color: green; } </style>
• Arquivo Externo
– <link rel=“stylesheet” href=“estilos.css” />

6. Seletores

7. Elementos e Atributos
Vamos à PRÁTICA!

8. Classes
Usadas para formatar um ou vários
elementos, atribuindo-lhes mesma
características.
p.cor_azu { color: #09F; }
<p class=“cor_azul”>Parágrafo com cor azul </p>

9. Posicionamento
Positions, Floats, Z-indexes , etc ....

10. Por HOJE é só!
... No próxima semana :
O tão esperado 960 Grid System
E mais dicas e técnicas para agilizar o
desenvolvimento Front-End