Este documento fornece uma introdução às Cascading Style Sheets (CSS), definindo-o como uma linguagem de estilo usada para definir a apresentação de documentos escritos em HTML ou XML. Explica os tipos básicos de CSS, seletores e propriedades comuns e encoraja o leitor a praticar criando folhas de estilo e desenvolvendo seus próprios sites.

1. CSS
Desenvolvimento de Aplicações para Web
Prof. MSc. André Costa - andre.costa@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 estilo para o layout criado com HTML.

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

25. Prof. MSc. André Costa
andre.costa@unifacs.br