CSS overerving, relative font-sizing, cascade

1. CSS
Belangrijke begrippen

2. CSS inheritance
(overerving)

3. Foto: http://www.flickr.com/photos/suzijane/231432195/

4. Relaties in HTML
<article>
<h1>
Relaties in <abbr>HTML</abbr>
</h1>
<p>
Elk element is <em>een kind van
zijn ouder</em>.
Een element kan ook <a>voorouders
of nakomelingen</a> hebben.
</p>
</article>

5. Bepaalde CSS properties
zullen automatisch overgeërfd
worden door de nakomelingen

7. Welke CSS properties?

8. “de properties waarvan
overerving logisch is”
color
font (face, size, weight...)
line-height
text-align
letter-spacing, word-spacing
text-transform…

9. background-image?

10. background-image

11. Zeker weten?
Check properties lijst W3C

12. Maak er gebruik van. Zet alle
typografische eigenschappen op het
html-element. De rest erft ze over.

13. html {
font-family: helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
color: rgb(50,50,50);
}
Maak gebruik van overerving.
Zo schrijf je minder code.

14. html {
/* standaard typografie */
}
!
h2 {
font-family: Georgia, serif;
line-height: 1.2;
}
De elementen die afwijken,
geef je aparte opmaak.

15. Minder code = win!

16. Overerving forceren

17. p {
background-image: inherit;
}
Overerving kan je forceren
via de inherit value

18. Relative font-sizing

19. px is absolute waarde

20. Een font-size in pixels gedefinieerd,
staat altijd vast

21. Je wil font-size toch iets groter?
Overal aanpassen!

22. (r)em is relatieve waarde

23. 1 rem = de font-size van
het html-element

24. Hoe groot is de tekst van h1?
html { font-size: 18px; }
h1 { font-size: 1rem; }

25. Hoe groot is de tekst van p?
html { font-size: 18px; }
p { font-size: 0.5rem; }

26. Hoe groot is de tekst van li?
html { font-size: 16px; }
nav li { font-size: 2rem; }

27. Voordeel: pas de font-size van het
html-element aan en alles schaalt
proportioneel mee.

28. font-size met rem gedefinieerd

29. Je wil alles toch iets groter?
Pas font-size van html-element aan!

30. Definieer font-size altijd in (r)em.
Je werkt flexibeler. Zeker als we later
responsive webpagina’s gaan maken.

31. Het kan nog flexibeler!
html { font-size: 100%; }
nav li { font-size: 2rem; }

32. Definieer font-size altijd in (r)em.
Definieer de font-size van het html
element altijd relatief (em of %).

33. De CSS cascade
(de voorrangsregels)

34. Conflictsituaties

35. p {
color: gray;
}
!
body p {
color: black;
}
CSS conflictsituatie

37. De CSS cascade
1
2
3
importance
(belangrijkheid)
specificity
(specificiteit)
source order
(bronvolgorde)

38. 11
Importance
(belangrijkheid)

39. “Wat belangrijker is, krijgt voorrang”
—W3C CSS specification

40. De plaats waar een declaratie
voorkomt, bepaalt de belangrijkheid:
5. Declaraties in de user agent stylesheet
4. Declaraties in de user stylesheet
3. Declaraties in de author stylesheet
2. Important declaraties in de author stylesheet
1. Important declaraties in de user stylesheet
(1 = meest belangrijk)

41. 5. de user agent stylesheet

42. 4. de user stylesheet

43. 3. de author stylesheet

44. 2. !important in author stylesheet

45. 1. !important in user stylesheet

47. 21
Specificity
(de specificiteit van de selector)

48. Conflict! Welke kleur wordt het?
p a { color:red; }
a { color:yellow; }

50. Specifiekere selectors hebben
voorrang in conflictsituaties

51. Conflict! Welke kleur wordt het?
#titel { color:yellow; }
body h1 { color:red; }

53. Specifiekere selectors hebben
voorrang in conflictsituaties

54. Hoe wordt de specificiteit van een
selector berekend?

55. 0,0,0,0

56. class selectors
inline style
0,0,0,0
element selectors
id selectors

57. p { color: red; }
0,0,0,1
1 element selector (p)

58. div p { color: red; }
0,0,0,2
2 element selectors (p, div)

59. .melding { color: red; }
0,0,1,0
1 attribute (class) selector (.melding)

60. .melding .fout { color: red; }
0,0,2,0
2 attribute (class) selectors (.melding, .fout)

61. #zijkolom { color: red; }
0,1,0,0
1 id selector (#zijkolom)

62. #zijkolom .adv { color: red; }
0,1,1,0
1 id selector (#zijkolom), 1 class selector (.adv)

63. a:hover { color: red; }
0,0,1,1
1 pseudo-class selector (:hover), 1 element selector (a)

64. <div style=“color:red;”>
1,0,0,0
1 inline style

65. 0,0,0,1
<
0,0,1,0
<
0,1,0,0
<
1,0,0,0

66. 0,0,0,999
<
0,1,23,8
<
0,2,0,0
<
1,0,0,0

67. Bereken de specificiteit
p { color: red; }

68. Bereken de specificiteit
p { color: red; }
0,0,0,1

69. Bereken de specificiteit
p a { color: red; }

70. Bereken de specificiteit
p a { color: red; }
0,0,0,2

71. Bereken de specificiteit
h3 + p { color: red; }

72. Bereken de specificiteit
h3 + p { color: red; }
0,0,0,2

73. Bereken de specificiteit
.top a { color: red; }

74. Bereken de specificiteit
.top a { color: red; }
0,0,1,1

75. Bereken de specificiteit
a:link { color: red; }

76. Bereken de specificiteit
a:link { color: red; }
0,0,1,1

77. Bereken de specificiteit
a.new:link { color: red; }

78. Bereken de specificiteit
a.new:link { color: red; }
0,0,2,1

79. Bereken de specificiteit
p#inl .vandaag { color: red; }

80. Bereken de specificiteit
p#inl .vandaag { color: red; }
0,1,1,1

81. Bereken de specificiteit
div p.rood em:hover { }

82. Bereken de specificiteit
div p.rood em:hover { }
0,0,2,3

83. main h1 { color:red; }
#titel { color:yellow; }

85. 31
Source order
(bronvolgorde)

86. Twee selectors met exact dezelfde
importance en specificiteit?
De laatste krijgt voorrang!

87. h1 { color:red; }
h1 { color:yellow; }

88. <!DOCTYPE html>
<html lang="nl">
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/layout.css" />
<style>
p { color:red; }
</style>
<link rel="stylesheet" href="css/layout2.css" />
<script src="js/js.js"></script>
</head>
<body>
<!-- Jouw webpagina code -->
</body>
</html>
Hoger = eerder

89. Enkele CSS-tips
• Gebruik !important om
cascadeproblemen te vinden
• Laat !important nooit in
je CSS staan
• Hou de specificiteit van je selectors
zo laag mogelijk