This document provides an overview of key CSS concepts including the box model, selectors, the document tree, specificity, shorthand properties, pseudo-classes, and CSS tricks. It explains how CSS rules are structured with selectors and declaration blocks. It covers different types of selectors like type, class, ID, descendant and child selectors. It also discusses the document tree, ancestors, descendants, siblings and parents. Properties like font, margin, and padding are demonstrated using shorthand. Pseudo-classes like :hover, :first-child and :before/:after are shown. The document concludes with recommendations for clean stylesheets and links to additional CSS resources.

1. 1

2. 2

3. 3

4. 4

5. 5

6. 6

7. 6 1
+ = holy crap
7

8. 8

9. 9

10. 10

11. 11

12. 12

13. 13

14. 14

15. 15

16. I hope you know HTML
16

17. The most important
thing you need to
know...
17

18. 18

19. The Box Model
Margin 10
Border 5
Padding 10
10 5 10 200 x 80 10 5 10
10
5
10
19

20. width
padding-left
padding-right
border-left
+ border-right
Calculated Width
20

21. Width = 250px
Margin 10
Border 5
Padding 10
10 5 10 200 x 80 10 5 10
10
5
10
21

22. height
padding-top
padding-bottom
border-top
+ border-bottom
Calculated Height
22

23. Height = 130px
Margin 10
Border 5
Padding 10
10 5 10 200 x 80 10 5 10
10
5
10
23

24. Block Level Elements
Parent Element
width:auto
If no width declared all block
level elements within the parent
element will be set to 100%.
24

25. Block Level Elements
Parent Element
width:200px
If you declare a width...well
your block level element will
have that width, regardless of
the parent element
25

26. Absolute Elements
Parent Element
well hello there
well hello there...the box expands
If you don’t specify a width, the
box will expand with the
content. It will expand until
100% of the parent, then wrap.
26

27. Floated Elements
Parent Element
well hello there
well hello there...the box expands
Mimics the behavior of
positioned elements.
Doesn’t depend on
relative positioning
27

28. Rule of Thumb
Specify the width on:
• floated elements
• positioned elements either
fixed or absolute
28

29. Inline Elements
Parent Element
well hello there
well hello there...the box expands
well hello there
well hello there...the box expands
Just really long, skinny boxes
29

30. CSS Rule Set
30

31. CSS Rule Set
Tells a browser how to render HTML boxes
Selector Declaration Block
Declaration Declaration
Property Value Property Value
body { color :black ; padding:1em ; }
31

32. CSS Rule Set
Tells a browser how to render HTML elements
Selector Declaration Block
Declaration Declaration
Property Value Property Value
body { color :black ; padding:1em ; }
32

33. Selector Declaration Block
Declaration Declaration
Property Value Property Value
body { color :black ; padding:1em ; }
Selector: “selects” an HTML
element that should be affected
by a rule set
33

34. Selector Declaration Block
Declaration Declaration
Property Value Property Value
body { color :black ; padding:1em ; }
Declaration Block: anything
between the curly brackets
34

35. Selector Declaration Block
Declaration Declaration
Property Value Property Value
body { color :black ; padding:1em ; }
Declaration: Tells the browser
how to draw any element on a
page that is selected
35

36. Selector Declaration Block
Declaration Declaration
Property Value Property Value
body { color :black ; padding:1em ; }
Property: The aspects of the
HTML element that you are
choosing to style.
36

37. Selector Declaration Block
Declaration Declaration
Property Value Property Value
body { color :black ; padding:1em ; }
Value: The exact style you want
to set for the property
37

38. All together now
Declarations can be grouped.
p{
margin: 10px;
padding: 20px;
}
38

39. All together now
Selectors can be grouped.
h1, h2, h3 {
padding:10px;
}
39

40. CSS Shorthand
40

41. Font
h1{
font-family: Arial;
font-size: 100%;
font-style: normal;
font-variant: small-caps;
font-weight: bold;
line-height:120%;
}
41

42. Font
h1{
font: bold small-caps 100%/120% Arial;
}
42

43. Font
style variant size line-height font-family
font: bold small-caps 100% 120% Arial ;
43

44. Margin/Padding
p{
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;
}
44

45. Margin/Padding
T
L R
B
margin: 1px 2px 3px 4px;
padding: 1px 2px 3px 4px;
45

46. Margin/Padding
T R B L
margin: 1px 2px 3px 4px;
padding: 1px 2px 3px 4px;
46

47. Margin/Padding
T R/L B
margin: 1px 2px 3px 2px;
padding: 1px 2px 3px 2px;
T/B R/L
margin: 1px 2px 1px 2px;
padding: 1px 2px 1px 2px;
47

48. Margin/Padding
T/R/B/L
margin: 1px 1px 1px 1px;
padding: 1px 1px 1px 1px;
48

49. Comments
/* Comment */
margin: 1px 2px 3px 4px;
/*padding: 1px 2px 3px 4px;*/
49

50. Document Tree
50

51. <body>
<div id="container">
<h1>This is the document tree</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum <strong>dolor</strong>
sit amet</p>
</div>
<div id="nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
51

52. body
div div
h1 p p ul
em li li li
52

53. body
div div
h1 p p ul
em li li li
Ancestor
Any element that’s connected but further
up the document tree, no matter how
many level higher.
53

54. body
div div
h1 p p ul
em li li li
Descendant
Any element that’s connected but lower
down the document tree, no matter how
many levels lower.
54

55. body
div div Parent
h1 p p ul Child
em li li li
Parent
Element that is directly above and connected
to an element in the document tree
55

56. body
div div Parent
h1 p p ul Child
em li li li
Child
Element that is directly below and connected
to an element in the document tree
56

57. body
div div
h1 p p ul
em li li li
Siblings
An element that shares the same parent with
another element
57

58. Specificity
Determines which CSS rule is applied to an
element by a browser
58

59. Basic Specificity
Inline Style > #ID > .Class > Element
59

60. Selectors
60

61. Type Selectors
li{color: red;}
body
div div
h1 p p ul
em li li li
61

62. Class Selectors
.red{color: red;}
body
div div
h1 p p.red ul
em li li li.red
62

63. Class + Type Selectors
p.red{color: red;}
body
div div
h1 p p.red ul
em li li li.red
63

64. Rule of Thumb
Don’t use classes to style HTML elements to
look like other elements
<div class="heading">Main Heading</div>
.heading{
font-weight: bold;
font-size: 140%;
}
64

65. Rule of Thumb
Do HTML elements that already exist
<h1>Main Heading</h1>
h1{
font-size: 140%;
}
65

66. Think before you class
1. Is there an existing HTML element that I
can use instead?
2. Is there a class or ID further up the
document tree that can be used?
66

67. ID Selectors
#nav{color: red;}
body
div div
h1 p p.red ul nav
#
em li li li.red
67

68. ID vs .class
ID’s
• They are unique
• Each element can only have one ID
• Each page can only have one element
with the same ID
• ID’s have special browser functionality
• Javascript loves ID’s
<div id="nav header"></div>
68

69. ID vs .class
Classes
• They aren’t unique
• The same class can be used
on multiple elements
• You can use multiple classes on the
same element
<div class="nav header"></div>
69

70. Descendant Selectors
p em{color: red;}
body
div div
h1 p p.red ul nav
#
em li li li.red
70

71. Universal Selectors
* {color: red;}
body
div div
h1 p p.red ul nav
#
em li li li.red
71

72. Child Selectors
div > em {color: red;}
body
div div
h1 p p.red ul nav em
#
em li li li.red
72

73. Adjacent Sibling
Selectors
h1 + p {color: red;}
body
div div
h1 p p.red ul nav em
#
em li li li.red
73

74. Attribute Selectors
4 Types
74

75. Attribute Selectors
Select based on the attribute
<img src="image.png" width="100"
height="100" title="Main Image"
alt="Main Image"/>
img[title] { border: 1px solid #000; }
img[width] { border: 1px solid #000; }
img[alt] { border: 1px solid #000; }
75

76. Attribute Selectors
Select based on the attribute’s value
<img src="image.png" width="100"
height="100" title="Main Image"
alt="Main Image"/>
img[src="image.png"] {
border: 1px solid #000;
}
76

77. Attribute Selectors
Select based on the space separated
instances of a value
<img src="image.png" width="100"
height="100" title="Main Image"
alt="Main Image"/>
img[alt~="Main"] {
border: 1px solid #000;
}
77

78. Attribute Selectors
Select based on the hyphen separated
instances of a value
<img src="image.png" width="100"
height="100" title="Main Image"
alt="Main Image"/>
img[alt|="Main"] {
border: 1px solid #000;
}
78

79. :Pseudo Classes
79

80. Most Common
:link
:visited
:hover
:active
80

81. :first-child
li:first-child {color: red;}
body
div div
h1 p p.red ul nav em
#
em li li li.red
81

82. :first-line
p:first-line {color: red;}
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum rutrum purus
non risus porttitor convallis. In vitae nulla
id felis.
82

83. :before and :after
p:before {content: “ extra stuff”}
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum rutrum purus
non risus porttitor convallis. In vitae nulla
id felis. extra stuff
83

84. CSS3 Selectors
84

85. Most Common
:link
:visited
:hover
:active
85

86. :first-child
li:first-child {color: red;}
body
div div
h1 p p.red ul nav em
#
em li li li.red
86

87. :first-line
p:first-line {color: red;}
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum rutrum purus
non risus porttitor convallis. In vitae nulla
id felis.
87

88. :before and :after
p:before {content: “ extra stuff”}
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum rutrum purus
non risus porttitor convallis. In vitae nulla
id felis. extra stuff
88

89. CSS 3
I shall now cheat...I’m also lazy
http://www.css3.info/
89

90. CSS Tricks
90

91. • Absolute Positioning (z-index)
• Multi-Column Layouts with floats
• .clearfix
• Image Sprites
• Image Replacement
• Center align elements
• display:none vs visibility:hidden
• Multiple background images
91

92. A Clean Stylesheet
92

93. ?
http://twitter.com/killermoo
http://bermonpainter.com
http://facebook.com/bermon
93

94. Books
Designing with Transcending CSS CSS Mastery
Web Standards Andy Clarke Andy Budd
Jeffry Zeldman
94