O documento apresenta os principais conceitos e elementos da linguagem CSS para estilização de páginas web, incluindo tipos de folhas de estilo, seletores, propriedades e uma introdução sobre como aplicar CSS para modificar a apresentação de elementos HTML.

1. DESENVOLVIMENTO DE APLICAÇÕES PARA WEB
PROF. ANDRÉ COSTA
CSS
andre.costa@pro.unifacs.br

2. CSS
• CSS - Cascading Style Sheets
• É uma linguagem de estilo utilizada para
definir a apresentação de documentos
escritos em uma linguagem de marcação,
como HTML ou XML. Seu principal benefício
é prover a separação entre o formato e o
conteúdo de um documento.

3. CSS
• “Folha de estilo em cascata é um
mecanismo simples para adicionar estilos
(p.ex., fontes, cores, espaçamentos) aos
documentos Web.”
Maujor (o dinossauro da CSS)
http://www.maujor.com/

4. CSS
• Tipos de CSS
• Linkadas ou Importadas
• Incorporadas
• Inline

5. CSS
• Linkadas ou Importadas

6. CSS
• Linkadas ou Importadas

7. CSS
• Incorporadas

8. CSS
• Inline

9. CSS
• Exemplo

10. CSS
• Sintaxe
seletor { propriedade: valor; }
seletor_2
{
propriedade_1: valor;
propriedade_2: valor;
}

11. CSS
• Seletores (principais)
tag {}
• Ex.:
table
{
background-color: #cdcdcd;
text-align: center;
}

12. CSS
• Seletores (principais)
#id {}
• Ex.:
#id_tabela
{
background-color: #cdcdcd;
text-align: center;
}
• <table id=“id_tabela”></table>

13. CSS
• Seletores (principais)
.classe {}
• Ex.:
.classe_tabela
{
background-color: #cdcdcd;
text-align: center;
}
• <table class=“classe_tabela”></table>

14. CSS
• Seletores (principais)
tag_pai tag_filho {}
• Ex.:
table tr td { color: #FF0000; }
• <table>
<tr>
<td>Texto modificado</td>
</tr>
<tr>
<td>Texto modificado</td>
</tr>
</table>

15. CSS
• Seletores (principais)
tag_pai tag_filho.classe {}
• Ex.:
table tr td.textoVermelho { color: #FF0000; }
• <table>
<tr>
<td>Texto</td>
</tr>
<tr>
<td class=“textoVermelho”>Texto modificado</td>
</tr>
</table>

16. CSS
• Propriedades
• Font

17. CSS
• Propriedades
• Text

18. CSS
• Propriedades
• Margin

19. CSS
• Propriedades
• Border

20. CSS
• Propriedades
• Padding

21. CSS
• Propriedades
• Background

22. CSS
• Propriedades
• List

23. CSS
Mão
na
massa!
Crie
uma
folha
de
es/lo
para
o
layout
criado
com
HTML.

24. CSS
Mão
na
massa!
Pra/que!!
Agora
que
tem
o
conhecimento
de
HTML
e
CSS,
desenvola
o
seu
próprio
site.