A wide-ranging overview of important CSS concepts for people new to CSS. These are the things I wish somebody sat me down and explained to me when I was first starting out with CSS. Includes some material recycled from my other talks, including a little about selectors and typography. Lecture given to 3rd year students of interactive design at the Holon Institute of Technology (Israel).

1. CSS— a talk about —
frontend development for designers
Idan Gazit • @idangazit
HIT • 24th November 2010

2. http://flic.kr/p/7TYgHL

3. http://flic.kr/p/6TnQbA
I COME FROM AMERICA
My Hebrew sucks.

4. don’t be afraid.
deep but doable

5. Photo by adesigna - http://flic.kr/p/7eukcs

6. Photo by Yandle - http://flic.kr/p/4sfHWp
WIREFRAMES

7. Photo by xiaming - http://flic.kr/p/JP3Xs
SEMANTIC MARKUP

8. Photo by wwarby - http://flic.kr/p/3q3A3r
LOTS OF EFFORT

9. especially IE6

10. Tables
Flash
<img>

11. Tables
Flash
<img>
unsemantic
unsemantic
unreadableiOS

12. Tables
Flash
<img>
unsemantic
unsemantic
unreadableiOS
Future Proofing.

13. Block vs. Inline
The Box Model
Positioning
Selectors
Typography and CSS
break!

14. Markup
CSS

15. BLOCK VS. INLINE

16. Block Inline

17. div
p
h1…h6
ul, ol, li
span
a
img
strong, em
Block Inline

18. BLOCK
100% width
height according to content
can contain both inline and block content
can control positioning

19. BLOCK
Block 1
Block 2
Block 3
Block 4
Block 5

20. INLINE
height according to content
width according to content
can contain content (and other inlines)
automatic position in flow

21. INLINE
Block 1
Inline 1 2 3 4
5 6 7
7 8
Block 2
Inline 1 2 3 4
5 6 7
7 8
Block 3

22. width
height
margin
padding
width
height
margin
padding
Block Inline

23. width
height
margin
padding
width
height
margin
padding
Block Inline

24. div
p
h1…h6
ul, ol, li
span
a
img
strong, em
Block Inline

25. <div id=“article_header”>

26. section
header, footer
article
nav
Block
HTM
L 5

27. display: block
force an element to be block-level

28. THE BOX MODEL

29. WTF?
Doesn’t work the way you expect.

32. HOW BIG AM I?
div {
width: 400px;
height: 500px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}

33. HOW BIG AM I?
width: 400px +10 +10 +1 +1 = 422px
height: 500px +10 +10 +1 +1 = 522px
padding
left + right
border
left + right
padding
top + bottom
border
top + bottom

35. Math
size + padding + border = actual size

36. More Math
“width: auto;”
containing block width
- margin
- border
- padding
= content width.

37. especially IE6

38. POSITIONING

39. position : Static;
Relative;
Absolute;
Fixed;

40. STATIC
Block 1
Block 2
Block 3
Block 4
Block 5

41. RELATIVE
Block 1
Block 3
Block 4
Block 5
display: relative
left: 50px
top: 50px

42. RELATIVE
Block 1
Block 3
Block 4
Block 5
display: relative
left: -50px
top: -50px

43. RELATIVE
Block 1
Block 3
Block 4
Block 5
display: relative

44. ABSOLUTE
Block 1
Block 3
Block 4
Block 5
Block 2
position: absolute;
left: 0;

45. ABSOLUTE
Block 1
Block 3
Block 4
Block 5
Block 2
position: absolute;
right: 0; bottom:0;

46. position: relative
ABSOLUTE
Block 1
Block 3
Block 4
Block 2
position: absolute;
right: 0; top: 100px;

47. position: relative
ABSOLUTE
Block 1
Block 3
Block 4
Block 2
position: absolute;
right: 0; left: 0; bottom:0;

48. position: relative
FIXED
Block 1
Block 3
Block 4
Block 2
position: fixed;
right: 0; bottom:0;

49. position: relative
FIXED
Block 1
Block 3
Block 4
Block 2
position: fixed;
right: 0; left: 0; bottom:0;

50. z-index
control overlap

53. floats
remove elements from flow

54. position: relative
FLOATS
Block 1
Block 2
Block 3
Block 4

55. position: relative
FLOATS
Block 1Block 2
float: left;
width: 200px;
height: 300px;
Block 3
Block 4

56. Margin Collapsing
unintuitive

57. MARGIN COLLAPSING
Block 1
margin-bottom: 50px
Block 2
margin-top: 30px
??px

58. MARGIN COLLAPSING
Block 1
margin-bottom: 50px
Block 2
margin-top: 30px
50px

59. W3C
www.w3.org/TR/CSS2/box.html

60. Photo by Wahlander - http://flic.kr/p/6UgrwM
POPCORN TIME!

61. SELECTORS

62. h1 { color: red; font-size: 32px;}
selector declaration block

63. h1 { color: red; font-size: 32px;}
declaration
selector declaration block

64. h1 { color: red; font-size: 32px;}
declaration
selector declaration block
property value

65. h1 { color: red; font-size: 32px;}
selector declaration block

66. IN THE BEGINNING,
THERE WAS THE DOM

67. <!DOCTYPE HTML>
<html>
<head>
<title>Show off the DOM!</title>
</head>
<body>
<div id="content">
<p>
Picture yourself on a boat in a river,
with tangerine trees and marmalade skies.
</p>
</div>
</body>
</html>

68. HTML
head body
title div
p

69. RELATIONSHIPS
Ancestor/Descendant
Parent/Child
Sibling

70. HTML
head body
title div
p
ancestor
descendant
descendant
descendant

71. HTML
head body
title div
p
ancestor
descendant
descendant
child
parent

72. HTML
head body
title div
p
siblingsibling

73. http://flic.kr/p/C3C52

74. SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS

75. p.large
p of class “large”
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
p
type
#nav
any element with id “nav”
.intro.large
multiple classes
IE6

76. div > p
child
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS div p
descendant
h1 + p
adjacent sibling
IE6
IE6
*universal

77. img[alt=“foo”]
<img alt=“foo” … >
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
img[alt]
<img alt=“…anything…” … >
img[alt~=“foo”]
<img alt=“blah foo bar” … >
img[alt|=“foo”]
<img alt=“blah-foo-bar” … >
IE6
IE6
IE6
IE6

78. img[alt^=“foo”]
<img alt=“foobar” … >
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
img[alt$=“foo”]
<img alt=“barfoo” … >
img[alt*=“foo”]
<img alt=“barfoobar” … >
IE6
IE6
IE6
CSS 3

79. PSEUDO-CLASSES
:first-child
:link
:visited
:hover
:active
:focus
:lang(foo)
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
IE6 - links only
IE7 - links only
IE8
IE8 - still not 100%

80. SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
div>p:first-child
<div>
<p>yes!</p>
<p>no</p>
</div>
IE8

81. SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
:nth-child(formula)
An+B:
“Every A’th element starting from B”
3n: 0, 3, 6, 9…
3n+1: 1, 4, 7, 10…
even (== 2n+1)
odd (== 2n)
CSS 3None of this works in IE < 9.

82. PSEUDO-ELEMENTS
:first-line, :first-letter
:before, :after
SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
IE8
webkit, opera

83. SPECIFIC
HIERARCHICAL
ATTRIBUTE
PSEUDO-CLASSES
PSEUDO-ELEMENTS
li.optional:before
li.optional:before {
font-color: red;
content: “optional - ”
}
<h1>Bring for hike:</h1>
<ul>
<li>hat</li>
<li>water</li>
<li class=“optional”>camera</li>
</ul>
Bring for hike:
• hat
• water
• optional - camera
IE8

84. SPECIFICITY
style=“…” attribute in an element
IDs
attributes, classes, pseudo-classes
elements, pseudo-elements
Later rules of same specificity trump earlier rules
http://www.w3.org/TR/CSS2/cascade.html#specificity

85. OMG WTF PPK
quirksmode.org/css/contents.html

86. TYPOGRAPHY

87. Hamburgefonstiv
Hamburgefonstiv
Hamburgefonstiv

88. — the art and science of —
presenting textual information

89. Web Design is 95% Typography
http://informationarchitects.jp/the-web-is-all-about-typography-period/

90. http://flic.kr/p/6KcBR4
Gutenberg: 1436
574 years of tradition and best-practices.

91. The clothes in which
you dress your words.

92. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet
doming id quod mazim placerat facer possim assum.
Typi non habent claritatem insitam; est usus legentis
in iis qui facit eorum claritatem. Investigationes
demonstraverunt lectores legere me lius quod ii
legunt saepius.
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis
dolore te feugait nulla facilisi. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet
doming id quod mazim placerat facer possim assum.
Set “Solid” 1.3em

93. Lorem ipsum dolor sit M
nibh euismod tincidunt
1 em
1.5 em
Line height of 1.3-2.0 ems
RULE
THUMB
of

94. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus
legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera
gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et
quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Nam liber tempor cum soluta nobis eleifend option congue
nihil imperdiet doming id quod mazim placerat facer possim assum.

95. Measure: 2 alphabets
RULE
THUMB
of
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.

96. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Nam liber tempor cum soluta nobis eleifend option congue
nihil imperdiet doming id quod mazim placerat facer possim assum.
Typi non habent claritatem insitam; est usus legentis in iis qui facit
eorum claritatem. Investigationes demonstraverunt lectores legere
me lius quod ii legunt saepius.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore
te feugait nulla facilisi. Nam liber tempor cum
soluta nobis eleifend option congue nihil
imperdiet doming id quod mazim placerat facer
possim assum.
12px 16px/1.3em

97. http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

98. Body Text: 16px
RULE
THUMB
of
16px = 100% in most browsers
http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

99. Dolphins Are Just Gay Sharks
Jan 28th 2010 • 7:45 PM
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
Tagged fake, news
OMG PONIES BLOG

100. http://flic.kr/p/4Pdz2D
My eyes, ze goggles do NOTHING!

101. 2-3 Typefaces, Maximum
RULE
THUMB
of
Sans-serif (ex. Helvetica) for titles
Serif (ex. Georgia) for body text

102. typographyforlawyers.com
webtypography.net
read and obey.

103. Questions?

104. Thank you!
@idangazit
slides: http://db.tt/GfcttW0