Slides for my in-house HTML & CSS trainning at SAPO. The basics of CSS: definition, brief history, benefits, syntax and how to insert on HTML.

1. HTML 3
& CSS
DINIS CORREIA 2011
cbn

2. CSS 1
DEFINIÇÃO
2
HISTÓRIA
(MUITO, MUITO BREVE)
3
BENEFÍCIOS

3. 3
4
ANATOMIA
CSS
5
SINTAXE
6
HTML + CSS

4. CSS

5. C ascading
S S
tyle heets

6. “ A simple mechanism for adding
style (for example, fonts, color,
spacing) to web documents.
http://www.w3.org/Style/CSS

7. Uma simples frase.

8. Uma simples frase.

9. Uma simples frase.

10. Uma simples frase.

11. Uma simples frase.

13. HISTÓRIA

14. 1998 2001
1996 2000 2002 2007

15. 1998 2001
1996
2000 2002 2007
CSS 1
Design
com tabelas

16. A NECESSIDADE É A MÃE
DE TODA A INVENÇÃO
FOTO DE JLA KLICHÉ c HTTP://FLIC.KR/P/5CDVVD

17. 2000

18. 2000

19. 1998 2001
1996
2000 2002 2007
CSS 1
Design
com tabelas

20. CSS 2: Recomendação
1998 2001
1996 2000 2002 2007

21. 1998 2001
2000
1996 2002 2007
Explorer 5 para Mac
com suporte para CSS 1

22. CSS:
INCONSISTENTE
ENTRE BROWSERS

23. 1998 2001
2002
1996 2000 2007
CSS 2.1

24. JEFFREY ZELDMAN
FOTO DE JOHN MORRISON c
HTTP://FLIC.KR/P/8MU2NM

25. 1998 2001
2007
1996 2000 2002
CSS 2.1
Candidate Recommendation

26. 1998 2001
2007
1996 2000 2002
CSS 2.1
Candidate Recommendation

27. Primeiros drafts CSS 3
1998 2001
1996 2000 2002 2007

28. BENEFÍCIOS

29. WEB

30. CONTEÚDO
HTML
APRESENTAÇÃO
CSS
COMPORTAMENTO
JavaScript

31. CONTEÚDO
HTML
APRESENTAÇÃO
CSS
COMPORTAMENTO
JavaScript

32. BENEFÍCIOS
Separação do conteúdo e apresentação
1. Acessibilidade
2. Flexibilidade
3. Largura de banda

33. BENEFÍCIOS
Separação do conteúdo e apresentação
1. Acessibilidade
2. Flexibilidade
3. Largura de banda

35. BENEFÍCIOS
Separação do conteúdo e apresentação
1. Acessibilidade
2. Flexibilidade
3. Largura de banda

36. BENEFÍCIOS
Separação do conteúdo e apresentação
1. Acessibilidade
2. Flexibilidade
3. Largura de banda

37. BENEFÍCIOS
Separação do conteúdo e apresentação
1. Acessibilidade
2. Flexibilidade
3. Largura de banda

38. TABELAS CSS
- 50KB
- 2TB/dia

39. BENEFÍCIOS
Separação do conteúdo e apresentação
1. Acessibilidade
2. Flexibilidade
3. Largura de banda

42. ANATOMIA
DE UMA REGRA DE CSS

43. selector
{
propriedade1:
valor;
}

44. p
{
color:
blue;
}

45. SELECTOR
DECLARAÇÃO
p
{
color:
blue;
}

46. SELECTOR
DECLARAÇÃO
p
{
color:
blue;
}
PROPRIEDADE
VALOR

47. SELECTOR
DECLARAÇÃO
p
{
color:
blue; REGRA
}
PROPRIEDADE
VALOR

48. SINTAXE

49. SINTAXE
selectores

50. SINTAXE 1. Elemento
selectores 2. Class
3. ID

51. SINTAXE 1. Elemento
selectores 2. Class
3. ID

52. p
{
...
}

53. h2
{
...
}

54. li
{
...
}

55. SINTAXE 1. Elemento
selectores 2. Class
3. ID

56. .lead
{
...
}

57. SINTAXE 1. Elemento
selectores 2. Class
3. ID

58. #logo
{
...
}

59. p
{
color:
blue;
}
h2
{
color:
blue;
}

60. p
{
color:
blue;
}
h2
{
color:
blue;
}
p,
h2
{
color:
blue;
}

61. SINTAXE
selectores
avançados

62. 1. Descendent
2. Child
3. Universal
SINTAXE 4. Adjacent sibling
selectores
avançados
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements

63. 1. Descendent
2. Child
3. Universal
SINTAXE 4. Adjacent sibling
selectores
avançados
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements

64. CSS
div
strong
{
color:
blue;
}
HTML
<div><strong>Alerta!</strong></div>
<div><h2><strong>Alerta!</strong></h2></div>

65. 1. Descendent
2. Child
3. Universal
SINTAXE 4. Adjacent sibling
selectores
avançados
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements

66. CSS
div
>
strong
{
color:
blue;
}
HTML
<div><strong>Alerta!</strong></div>
<div><h2><strong>Alerta!</strong></h2></div>

67. 1. Descendent
2. Child
3. Universal
SINTAXE 4. Adjacent sibling
selectores
avançados
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements

68. *
{
...
}

69. 1. Descendent
2. Child
3. Universal
SINTAXE 4. Adjacent sibling
selectores
avançados
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements

70. CSS
h2
+
p
{
color:
blue;
}
HTML
<h2>Título</h2>
<p>Lorem
ipsum
dolor....</p>
<p>Lorem
ipsum
dolor....</p>

71. 1. Descendent
2. Child
3. Universal
SINTAXE 4. Adjacent sibling
selectores
avançados
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements

72. CSS
img[alt]
{
margin:
5px;
}
HTML
<img
src="foto.jpg"
alt="Um
rio">

73. CSS
img[src=foto.jpg]
{
margin:
5px;
}
HTML
<img
src="foto.jpg"
alt="Um
rio">

74. 1. Descendent
2. Child
3. Universal
SINTAXE 4. Adjacent sibling
selectores
avançados
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements

75. CSS
.lead.destaque
{
color:
blue;
}
HTML
<p
class="lead">Lorem
ipsum
dolor....</p>
<p
class="destaque">Lorem
ipsum
dolor....</p>
<p
class="lead
destaque">Lorem
ipsum
dolor....</p>

76. CSS
.destaque
{
color:
blue;
}
.lead
{
margin:
2px;
}
HTML
<p
class="lead">Lorem
ipsum
dolor....</p>
<p
class="destaque">Lorem
ipsum
dolor....</p>
<p
class="lead
destaque">Lorem
ipsum
dolor....</p>

77. 1. Descendent
2. Child
3. Universal
SINTAXE 4. Adjacent sibling
selectores
avançados
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements

78. a:link
{
...
}
a:visited
{
...
}
a:focus
{
...
}
a:hover
{
...
}
a:active
{
...
}

79. CSS
li:first-­‐child
{
color:
blue;
}
HTML
<ul>
<li>Lorem
ipsum
dolor</li>
<li>Situm
amer
ipsum</li>
</ul>

80. 1. Descendent
2. Child
3. Universal
SINTAXE 4. Adjacent sibling
selectores
avançados
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements

81. p:first-­‐letter
{
...
}
p:first-­‐line
{
...
}
:before
{
...
}
:after
{
...
}

82. SINTAXE
declaração

83. color
border
margin
font
...

84. color:
red;
color:
#ff0000;
color:
rgb(255,0,0);

86. p
{
font-­‐family:
Arial;
font-­‐size:
12px;
}

87. p
{
font:
12px
Arial;
}

88. p
{
margin:
5px;
}

89. p
{
margin-­‐top:
5px;
margin-­‐right:
10px;
margin-­‐bottom:
15px;
margin-­‐left:
20px;
}

90. p
{
margin-­‐top:
5px;
margin-­‐right:
10px;
margin-­‐bottom:
15px;
margin-­‐left:
20px;
}
=
p
{
margin:
5px
10px
15px
20px;
}

91. p
{
margin:
5px
10px;
}

92. p
{
margin:
5px
10px
15px;
}

93. HTML + CSS

94. HTML + CSS 1. Inline
2. Embed
3. External

95. HTML + CSS 1. Inline
2. Embed
3. External

96. <p
style="color:
blue;">Lorem
ipsum
dolor.</p>

97. HTML + CSS 1. Inline
2. Embed
3. External

98. <head>
<title>Um
título</title>
<meta
name="description"
content="A
descrição
da
página">
<meta
name="keywords"
content="vídeos,fotos,pesquisa">
<style>
p
{
color:
blue;
}
</style>
</head>

99. HTML + CSS 1. Inline
2. Embed
3. External

100. <head>
<title>Um
título</title>
<meta
name="description"
content="A
descrição
da
página">
<meta
name="keywords"
content="vídeos,fotos,pesquisa">
<link
type="text/css"
rel="stylesheet"
media="screen"
href="style.css">
</head>