O documento introduz os conceitos básicos de CSS, incluindo o que é uma folha de estilos, como separar a estrutura do conteúdo da página, e como aplicar regras CSS usando seletores.

1. @omadson

2. Introdução
CSS - @omadson 2

3. • Uma folha de estilos é um conjunto de regras que
informa a um programa, responsável pela formatação
de um documento, como organizar a página, como
posicionar e expor o texto e, dependendo de onde é
aplicada, como organizar uma coleção de documentos.
CSS - @omadson 3

4. • Separar apresentação da estrutura
• Controle absoluto da aparência da página
• Páginas mais leves
• Manutenção de um grande site
CSS - @omadson 4

5. • Lista de regras
• Seletor
• Folha de estilos
seletores { declarações; }
CSS - @omadson 5

6. • As regras podem estar dentro de um arquivo de texto
com extensão “.css” ou embutidas em um arquivo
HTML.
propriedade: valor;
CSS - @omadson 6

7. • As regras podem estar dentro de um arquivo de texto
com extensão “.css” ou embutidas em um arquivo
HTML.
h1 { font-size: 24pt; }
h1 { color: blue; }
h1 { font-size: 18pt; }
CSS - @omadson 7

8. • As regras podem estar dentro de um arquivo de texto
com extensão “.css” ou embutidas em um arquivo
HTML.
h1 {
font-size: 24pt;
color: blue;
font-size: 18pt;
}
CSS - @omadson 8

9. • Inline
• Tag style
• Tag link
CSS - @omadson 9

10. • Inline
• Tag style
• Tag link
<p style=“color: red;”>...</p>
CSS - @omadson 10

11. • Inline
• Tag style
• Tag link
<style>
p{
color: red;
}
</style>
CSS - @omadson 11

12. • Inline
• Tag style
• Tag link
<link
rel=stylesheet
type=text/css
href=local/arquivo.css
>
CSS - @omadson 12

13. • O atributo media.
o all
o print
o screen
o aural
o handheld
CSS - @omadson 13

14. • Os comentários em CSS podem ser da seguinte forma:
/*
comentários
*/
CSS - @omadson 14

15. • Os estilos “herdam” propriedades de várias maneiras.
Uma das formas é através da própria hierarquia do
HTML.
body {
color: red;
background-color: blue;
}
CSS - @omadson 15

16. class id
• Você também pode definir seus próprios seletores
utilizando os atributos class e id.
CSS - @omadson 16

17. class id
• Você também pode definir seus próprios seletores
utilizando os atributos class e id.
HTML
<p class=p1>...</p>
CSS - @omadson 17

18. class id
• Você também pode definir seus próprios seletores
utilizando os atributos class e id.
CSS
.p1 { color: #000; }
CSS - @omadson 18

19. class id
• Você também pode definir seus próprios seletores
utilizando os atributos class e id.
CSS - @omadson 19

20. class id
• Você também pode definir seus próprios seletores
utilizando os atributos class e id.
HTML
<p id=p1>...</p>
CSS - @omadson 20

21. class id
• Você também pode definir seus próprios seletores
utilizando os atributos class e id.
CSS
#p1 { color: #000; }
CSS - @omadson 21

22. • http://goo.gl/Av799
• http://goo.gl/KKCSA
• http://goo.gl/bIpa7
• http://goo.gl/tMu8P
• http://goo.gl/Pw1h
• http://goo.gl/kqIf
• http://goo.gl/5aVWN
• http://goo.gl/QvWMN
CSS - @omadson 22

23. • http://omadson.wordpress.com @omadson
• http://yagoacp.wordpress.com @Yago_A
• http://jedersonsecundino.wordpress.com @JedersonS
CSS - @omadson 23

24. Obrigado!
CSS - @omadson 24