All you need to know about CSS: Selectors Value Processing Cascading Box Model Visual Formatting Model Block Formatting Context Stacking Context At-Rules Units Presentation with examples: http://rawgit.com/vzhidal/HTML-CSS-Training-Presentations/master/css-basics.html

1. CSS
Created by Vladimir Zhydal

2. WHAT?
CSS is an acronym for Cascading Style Sheets.
CSS is a style language that defines visual styles of HTML
documents.

3. WHY?
Separation of presentation from markup.
Cleaner code.
Easier to manage style changes.

4. HISTORY
1994
CSS was first proposed by Håkon Wium Lie.
1996
CSS level 1 was published as a W3C Recommendation.
1998
CSS level 2 was published as a W3C Recommendation.
2011
CSS level 2.1 was published as a W3C
Recommendation.

5. CSS3
CSS 3 is divided into several separate documents called
"modules".
Each module adds functionality and/or replaces part of
the CSS2.1 specification.

6. CSS4
(THE GREAT RENAMING)
There is no such thing as CSS4.

7. SYNTAX

8. ANATOMY OF CSS RULE

9. GROUPING DECLARATIONS
p {
color: red;
}
p {
font­size: 12px;
}
p {
line­height: 15px;
}
p {
color: red;
font­size: 12px;
line­height: 15px;
}

10. GROUPING SELECTORS
h1 {
color: red;
font­weight: bold;
}
h2 {
color: red;
font­weight: bold;
}
h3 {
color: red;
font­weight: bold;
}
h1, h2, h3 {
color: red;
font­weight: bold;
}

11. COMMENTS
/* Comment here */​
p {​
margin: 1em; /* Comment here */​
padding: 2em; ​
/* color: white; */​
background­color: blue;​
}​​
/*multi­line​
comment here*/

12. APPLYING CSS

13. THREE WAYS TO ATTACH
Inline style
Embedded
Linked

14. INLINE
<h2 style="color: red;"></h2>

15. EMBEDDED
<style>
</style>
h2 {
color: red;
}

16. LINKED
<link rel="stylesheet" href="example.css" type="text/css">

17. SELECTORS

18. SELECTORS
A CSS selector is the part of a CSS rule set that actually
selects the content.

19. SIMPLE SELECTORS
Pattern Meaning Level
* any element 2
E an element of type E 1
E.warning an E element whose class is "warning" 1
E#myid an E element with ID equal to "myid" 1

20. CLASS
can be used several times
ID
can only be used once
Use CSS classes where it’s possible, to make your styles
reusable on the page.

21. ATTRIBUTE SELECTORS
Pattern Meaning Level
E[foo] an E element with a "foo" attribute 2
E[foo="bar"] an E element whose "foo" attribute value is
exactly equal to "bar"
2
E[foo~="bar"] an E element whose "foo" attribute value is a list
of whitespace-separated values, one of which is
exactly equal to "bar"
2
E[foo|="en"] an E element whose "foo" attribute has a hyphen-
separated list of values beginning (from the left)
with "en"
2

22. ATTRIBUTE SELECTORS
Pattern Meaning Level
E[foo^="bar"] an E element whose "foo" attribute value begins
exactly with the string "bar"
3
E[foo$="bar"] an E element whose "foo" attribute value ends
exactly with the string "bar"
3
E[foo*="bar"] an E element whose "foo" attribute value contains
the substring "bar"
3

23. PSEUDO CLASSES
Pattern Meaning Level
E:link
E:visited
an E element being the source anchor of a hyperlink of
which the target is not yet visited (:link) or already
visited (:visited)
1
E:active
E:hover
E:focus
an E element during certain user actions 1
and
2
E:target an E element being the target of the referring URI 3

24. PSEUDO CLASSES
Pattern Meaning Level
E:lang(fr) an element of type E in language "fr" (the document
language specifies how language is determined)
2
E:enabled
E:disabled
a user interface element E which is enabled or
disabled
3
E:checked a user interface element E which is checked (for
instance a radio-button or checkbox)
3
E:not(s) an E element that does not match simple selector s 3

25. PSEUDO CLASSES
(STRUCTURAL)
Pattern Meaning Level
E:root an E element, root of the document 3
E:nth-
child(n)
an E element, the n-th child of its parent 3
E:nth-last-
child(n)
an E element, the n-th child of its parent, counting
from the last one
3
E:nth-of-
type(n)
an E element, the n-th sibling of its type 3

26. PSEUDO CLASSES
(STRUCTURAL)
Pattern Meaning Level
E:nth-last-of-
type(n)
an E element, the n-th sibling of its type, counting
from the last one
3
E:first-child an E element, first child of its parent 2
E:last-child an E element, last child of its parent 3
E:first-of-type an E element, first sibling of its type 3

27. PSEUDO CLASSES
(STRUCTURAL)
Pattern Meaning Level
E:last-of-
type
an E element, last sibling of its type 3
E:only-child an E element, only child of its parent 3
E:only-of-
type
an E element, only sibling of its type 3
E:empty an E element that has no children (including text
nodes)
3

28. PSEUDO ELEMENTS
Pattern Meaning Level
E::first-line the first formatted line of an E element 1
E::first-letter the first formatted letter of an E element 1
E::before generated content before an E element 2
E::after generated content after an E element 2

29. COMBINATORS
Pattern Meaning Level
E F an F element descendant of an E element 1
E > F an F element child of an E element 2
E + F an F element immediately preceded by an E element 2
E ~ F an F element preceded by an E element 3

30. THE KEY SELECTOR
The key selector is the right-most part of a larger CSS
selector. This is what the user agent looks for first.

31. SELECTOR MATCHING

32. VALUE PROCESSING

33. VALUE PROCESSING
A user agent must assign a value to every property that
applies to the target media type to every box in the
formatting structure.

34. CALCULATION
Collecting all the declared values applied to an element.
Cascading yields the cascaded value.
Defaulting yields the specified value.
Resolving value dependencies yields the computed value.
Formatting the document yields the used value.
Transforming to the actual value based on constraints of
the display environment.

35. CALCULATION EXAMPLES
Property Winning
declaration
Cascaded
value
Specified value Computed
value
Used
value
Actual
value
font-size font-size:
1.2em
1.2em 1.2em 14.1px 14.1px 14px
width width: 80% 80% 80% 80% 354.2px 354px
width width: auto auto auto auto 134px 134px
height height: auto auto auto auto 176px 176px
page-break-
after
(none) (none) auto (initial value) auto auto auto

36. FILTERING

37. FILTERING
In order to find the declared values, user agents must first
identify all declarations that apply to each element.

38. FILTERING
A declaration applies to an element if:
It belongs to a style sheet that currently applies to this
document.
It is not qualified by a conditional rule with a false
condition.
It belongs to a style rule whose selector matches the
element.
It is syntactically valid: the declaration’s property is a
known property name, and the declaration’s value
matches the syntax for that property.

39. CASCADING

40. CASCADING
The cascade takes a unordered list of declared values for a
given property on a given element, sorts them by their
declaration’s precedence, and outputs a single cascaded
value.

41. CASCADING ORIGINS
Author
User
User agent

42. USER AGENT STYLE SHEET
User agent applies style sheets to all web documents. These
are referred to as a “default” user agent style sheet.

43. USER STYLE SHEETS
Most user agents allow user to apply their own style sheets
within the user agent.

44. AUTHOR STYLES SHEETS
Web authors can apply one or more style sheets to an HTML
document.

45. CASCADING ORDER
WHICH CSS RULES “WIN”?
There are four steps to determine which CSS rules will
“win”.

46. STEP 1
Gather all the declarations that apply to an element and
property from browser, author and user style sheets.

47. STEP 2
Sort the gathered declarations according to:
origin
user agent
author
user
importance
normal
!important

48. FROM LOWEST TO HIGHEST
PRIORITY
Normal declarations in user agent style sheet.
Normal declarations in user style sheet.
Normal declarations in author style sheet.
!important declarations in author style sheet.
!important declaration in user style sheet.
!important declaration in user agent style sheet.

49. STEP 3
If declarations have the same origin or importance then the
declaration’s selectors need to be scored, to see which
declaration will “win”.

50. SELECTORS SPECIFICITY
1. Inline style.
2. Count the number of IDs.
3. Count the number of
classes, attributes and
pseudo-classes.
4. Count the number of
element names or pseudo-
elements.

51. A NOTE ON CONCATENATION
“A” will always beat “B”, which will always beat “C”, which
will always beat “D”.

52. STEP 4
If two declarations have the same importance, origin and
specify, the later specified declaration wins.

53. DEFAULTING

54. DEFAULTING
When the cascade does not result in a value, the specified
value must be found some other way:
Inherited properties draw their defaults from their
parent element through inheritance.
Other properties take their initial value.

55. INHERITANCE
Inheritance propagates property values from parent
elements to their children.

56. EXPLICIT DEFAULTING
Resetting a Property: the initial keyword.
Explicit Inheritance: the inherit keyword.
Erasing All Declarations: the unset keyword.

57. BOX MODEL

58. BOX MODEL
The CSS box model describes the rectangular boxes that are
generated for elements in the document tree and laid out
according to the visual formatting model.

59. BOX DIMENSIONS

60. BOX EDGES
content edge or inner edge
padding edge
border edge
margin edge or outer edge

61. BOX-SIZING
content-box
padding-box
border-box

62. COLLAPSING MARGINS
In CSS, the adjoining margins of two or more boxes can
combine to form a single margin.
Margins that combine this way are said to collapse, and
the resulting combined margin is called a collapsed
margin.

63. VERTICAL MARGINS COLLAPSE
(BASIC CASES)
Adjacent siblings.
Parent and first/last child.
Empty blocks.

64. HORIZONTAL MARGINS COLLAPSE
Do not collapse in most cases...

65. COLLAPSING RESTRICTIONS
Only margins of block-level boxes can collapse.
Margins of a floated box do not collapse with any other
margins.
Margins of a box with ‘overflow’ other than ‘visible’ do not
collapse with its children's margins.
Margins of an absolutely positioned box do not collapse
with any other margins.
Margins of the root element's box do not collapse.

66. VISUAL FORMATTING
MODEL

67. VISUAL FORMATTING MODEL
The CSS visual formatting model is the algorithm used to
process a document and display it on a visual media.

68. DEFINING BOXES
box dimensions
box type
the positioning scheme
the other elements in the tree
the viewport size and position
intrinsic dimensions of contained images
other external information

69. BOX GENERATION
The part of the CSS visual formatting model.
Creates boxes from the document's elements.

70. BOX TYPES
Affect how the visual formatting is done.
Depend of the value of the display CSS property.

71. BLOCK-LEVEL ELEMENTS AND
BLOCK BOXES
Visually formatted as a block.
Intended to be vertically stacked.
display: block, list-item, table.

72. BLOCK-LEVEL ELEMENTS
Participates in a block formatting context.
Generates at least one block-level box (principal block-
level box).

73. BLOCK CONTAINER BOX
Is a box that contains only other block-level boxes, or
creates an inline formatting context.
A block-level box may also be a block container box.

74. BLOCK-LEVEL BOX
how the box will behave with
its parents and sibling
BLOCK CONTAINER
how the box will interact with
its descendants

75. BLOCK BOXES
Block-level boxes that also are block container boxes are
called block boxes.

76. ANONYMOUS BLOCK BOXES
Supplementary boxes.
Cannot be styled using CSS selectors.
Use the inherit value or the initial value of css properties.

77. ANONYMOUS BLOCK BOXES
<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div

78. INLINE-LEVEL ELEMENTS AND
INLINE BOXES
Distributed in lines with other inline-level content.
display: inline, inline-block, inline-table.

79. INLINE-LEVEL ELEMENTS
Generate inline-level boxes.

80. INLINE BOXES
Inline boxes are both inline-level boxes and boxes that
participate in their container's inline formatting context.

81. INLINE BOXES
DIMENSIONS CALCULATION
width
doesn't apply.
height
doesn't apply, but the height of the box is given by the
‘line-height’ property.
padding
only left and right padding will have an effect.
margin
only left and right margin will have an effect.

82. ATOMIC INLINE-LEVEL BOXES
Inline-level boxes that do not participate in an inline
formatting context.
Are never split in several boxes.
Generated by: replaced inline-level elements, by
elements with a calculated display value (inline-
block or inline-table).

83. ATOMIC INLINE-LEVEL BOXES
The text in the span can be
split in several lines as it is an
inline box.
The text in the span
cannot be split in several lines
as it
is an inline-block box.
<style>
span {
display: inline; /* default value*/
color: green;
}
</style>
<div>
The text in the span <span>can be split
in several lines as it</span> is an inline box.
</div>
<style>
span {
display: inline­block;
color: green;
}
</style>
<div>
The text in the span <span>cannot be split
in several lines as it</span> is an inline­block box.
</div>

84. ANONYMOUS INLINE BOXES
Any text that is directly contained inside a block container
element (not inside an inline element).
Use the inherit value or the initial value of css properties.

85. ANONYMOUS INLINE BOXES
<p>Some <em>emphasized</em> text</p>

86. OTHER TYPES OF BOXES
Line boxes.
Run-in boxes.
Model-induced boxes.

87. POSITIONING SCHEMES
Normal flow.
Floats.
Absolute positioning.

88. NORMAL FLOW
Boxes are laid out one after the other
(vertically or horizontally).

89. NORMAL FLOW
position
static
relative
float
none

90. NORMAL FLOW
STATIC POSITIONING
The boxes are drawn at the
exact position defined by the
normal flow layout.
RELATIVE POSITIONING
The boxes are drawn with an
offset defined by
the top, bottom, left and right CSS
properties.

91. FLOATS
Floating boxes are positioned at the beginning or end of
the current line.
Anything within the normal flow flows along the edge of
the floating boxes.

92. FLOATS
position
static
relative
float
left
right

93. THE CLEAR CSS PROPERTY
Specifies whether an element can be next
to floating elements that precede it or must be moved
down (cleared) below them.
Applies to both floating and non-floating elements.

94. BLOCK FORMATTING CONTEXT
The region in which:
the layout of block boxes occurs;
floats interact with each other.

95. BLOCK FORMATTING CONTEXT
Created by:
the root element;
floats;
absolutely positioned elements;
inline-blocks;
table cells and table captions;
elements where overflow has a value other
than visible;
flex boxes.

96. ABSOLUTE POSITIONING
Boxes are entirely removed from the flow.
Boxes don't interact with the flow at all.
Boxes positioned relative to their containing block.

97. CONTAINING BLOCK
Element boxes are positioned within a formatting context,
which, by default, is provided by the box generated by a
parent element.

98. CONTAINING BLOCK
POSITION: STATIC OR RELATIVE
The containing block is formed by the edge of the content
box of the nearest ancestor element
whose display property value is one of:
block
inline-block
list-item
run-in
table
table-cell

99. CONTAINING BLOCK
POSITION: ABSOLUTE
The containing block is the nearest positioned ancestor
(the nearest ancestor whose position property has one of
the values absolute, fixed, or relative).
The containing block is formed by the padding edge of
that ancestor.

100. CONTAINING BLOCK
POSITION: FIXED
The containing block is the viewport (for continuous
media) or the page box (for paged media).

101. THE STACKING CONTEXT
Boxes are positioned in three dimensions.
The third dimension is the z axis, which is perpendicular
to the screen.

102. 'Z-INDEX' PROPERTY
For a positioned box, the 'z-index' property specifies:
The stack level of the box in the current stacking
context.
Whether the box establishes a local stacking context.

103. FORMING OF A STACKING CONTEXT
The root element (HTML).
Positioned (absolutely or relatively) with a z-index value
other than "auto".
A flex item with a z-index value other than "auto".
Elements with an opacity value less than 1.
Elements with a transform value other than "none".
Elements with a mix-blend-mode value other than
"normal".
Elements with a filter value other than "none".
Elements with isolation set to "isolate".

104. STACKING CONTEXT LAYERS
The background and borders of the element that
establishes the stacking context.
The stacking contexts of descendants with negative stack
levels.
Block-level descendants in the normal flow.
Floated descendants and their contents.
Inline-level descendants in the normal flow.
Positioned descendants whose z-index is auto or 0.
The stacking contexts of descendants with positive stack
levels.

105. STACKING CONTEXT
(SUMMARY)
Positioning and a z-index value creates a stacking
context.
Stacking contexts are hierarchical.
Each stacking context is completely independent from its
siblings.

106. THE GOLDEN RULE OF Z-INDEX
“If you are using 3 digits z-index values, you are doing it
wrong.”

107. CSS AT-RULES

108. CSS AT-RULES
At-rules are instructions or directives to the CSS parser.

109. CSS AT-RULES
@charset
@import
@media
@page
@font-face

110. @CHARSET
The @charset CSS at-rule specifies the character
encoding used in the style sheet.
This at-rule is useful when using non-ASCII characters in
some CSS properties, like content.
@charset "UTF­8";
@charset 'iso­8859­15';

111. @CHARSET
Several ways to define the character encoding of a style
sheet:
The value of the Unicode byte-order character.
The value given by the charset attribute of the
Content-Type: HTTP header.
The @charset CSS at-rule.
The charset attribute of the <link> element. (obsoleted)
The value of the <meta charset> in the document.

112. @IMPORT
Allows to import style rules from other style sheets.
@import 'custom.css';
@import url('landscape.css') screen and (orientation:landscape);

113. @MEDIA
Associates a set of nested statements, in a CSS block that
is delimited by curly braces, with a condition defined by a
media query.
@media <media­query> {
/* media­specific rules */
}

114. @PAGE
Is used to modify some CSS properties when printing a
document.
@page :first {
margin: 1cm;
}
@page :left {
margin: 1cm 3cm 1cm 1.5cm;
}
@page :right {
margin: 1cm 3cm 1cm 1.5cm;
}

115. @FONT-FACE
Allows authors to specify online fonts to display text on
their web pages.
@font­face {
font­family: "Bitstream Vera Serif Bold";
src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf"
}

116. CSS PROPERTIES

117. CSS PROPERTIES
Box Properties
Layout Properties​
List Properties
Table Properties
Color and Backgrounds​
Typographical Properties​
Generated Content​
User Interface Properties​
Paged Media Properties

118. BOX PROPERTIES
width (min/max), height (min/max), margin, padding,
border, outline

119. LAYOUT PROPERTIES
display, position, float, clear, visibility, top, right, bottom,
left, z-index, overflow, clip

120. LIST PROPERTIES
list-style-type, list-style-position, list-style-image

121. TABLE PROPERTIES
table-layout, border-collapse, border-spacing, empty-cells,
caption-side

122. COLOR AND BACKGROUND
PROPERTIES
color, background-color, background-image, background-
repeat, background-position, background-attachment

123. TYPOGRAPHICAL PROPERTIES
font-family, font-size, font-weight, font-style, font-variant,
letter-spacing, word-spacing, line-height, text-align, text-
decoration, text-indent, text-transform, text-shadow,
vertical-align, white-space, direction

124. GENERATED CONTENT PROPERTIES
content, counter-increment, counter-reset, quotes

125. USER INTERFACE PROPERTIES
cursor

126. FONT
font: [font­style||font­variant||font­weight] font­size [/line­height] font­family | inherit
FONT
<style>
</style>
<p class="font">Font</p>
.font {
font: italic small­caps bold 50px/140% Helvetica, sans­serif;
}

127. BACKGROUND
CSS 2.1
background-color
background-image
background-repeat
background-attachment
background-position
CSS 3
extends existing properties
adds new properties:
background-origin
background-clip
background-size
multiple-backgrounds

128. BACKGROUND
<style>
</style>
<div class="background"></div>
.background {
width: 500px;
height: 250px;
background­image: url('images/workshop/sheep.png'
url('images/workshop/betweengrassandsky.png');
background­position: center bottom, left top;
background­repeat: no­repeat;
}

129. GRADIENT
Displays smooth transitions between two or more specified
colors.

130. TRANSITION
Allows you to change property values smoothly over a given
duration.

131. ANIMATION
Allows animation of most HTML elements without using
JavaScript or Flash

132. TRANSFORM
translate
scale
rotate
skew
perspective
matrix

133. BOX-SHADOW
box­shadow: none|h­shadow v­shadow blur spread color |inset|initial|inherit;

134. TEXT-SHADOW
.neon {
text­shadow:
0 0 10px #fff, 0 0 20px #fff,
0 0 30px #fff, 0 0 40px #ff00de,
0 0 70px #ff00de, 0 0 80px #ff00de,
0 0 100px #ff00de, 0 0 150px #ff00de;
}
.fire {
text­shadow:
0 0 20px #fefcc9, 10px ­10px 30px #feec85,
­20px ­20px 40px #ffae34, 20px ­40px 50px #ec760c,
­20px ­60px 60px #cd4606, 0 ­80px 70px #973716,
10px ­90px 80px #451b0e;
}

135. BORDER-RADIUS
border-radius: 50px 0 0 50px;
border-radius: 40px 10px;
border-radius: 13em/3em;
border-radius: 13em 0.5em/1em 0.5em;
border-radius: 8px;

136. TEXT-OVERFLOW
One line text that should be…<style>
</style>
<p class="ellipsis">One line text
that should be cut</p>
.ellipses {
overflow: hidden;
white­space: nowrap;
text­overflow: ellipsis;
}

137. COLUMNS
<style>
.columns {
column­count: 3;
column­gap: 40px;
}
</style>
<p class="columns">Some long text
here...</p>

138. VENDOR-SPECIFIC PROPERTIES
'-' + vendor specific identifier + '-' + meaningful name
Prefix Organisation
-ms- Microsoft
-moz- Mozilla Foundation
(Gecko-based browsers)
-o- Opera Software
-webkit- Safari (and other WebKit-
based browsers)
div {
­webkit­border­radius: 3px;
­moz­border­radius: 3px;
border­radius: 3px;
}

139. SHORTHAND PROPERTIES
CSS properties that let you set the values of several other
CSS properties simultaneously.

140. SHORTHAND PROPERTIES
(EDGE CASES)
A value which is not specified is set to its initial value. (it
overrides previously set values).
div {
background­color: red;
background: url(images/bg.gif) no­repeat top right;
}

141. SHORTHAND PROPERTIES
(EDGE CASES)
Only the individual properties values can inherit.
The keyword inherit can be applied to a property, but only
as a whole, not as a keyword for one value or another.
.parent {
background: red;
}
.child {
background: inherit;
}

142. SHORTHAND PROPERTIES
(EDGE CASES)
Shorthand properties try not to force a specific order for the
values of the properties they replace.
font: [font­style||font­variant||font­weight] font­size [/line­height] font­family | inherit
div {
font: italic bold 12pt/10pt serif
}

143. SHORTHAND PROPERTIES
(PROPERTIES RELATED TO EDGES OF A BOX)
div {
padding: 10px;
}
div {
padding: 10px 20px;
}
div {
padding: 10px 20px 30px;
}
div {
padding: 10px 20px 30px 40px;
}

144. SHORTHAND PROPERTIES
(PROPERTIES RELATED TO CORNERS OF A BOX)
div {
border­radius: 10px;
}
div {
border­radius: 10px 20px;
}
div {
border­radius: 10px 20px 30px;
}
div {
border­radius: 10px 20px 30px 40px
}

145. CSS UNITS

146. UNITS
Unit Description
% percentage
em 1em is equal to the current font size. 2em means 2 times the size of
the current font.
ex one ex is the x-height of a font (x-height is usually about half the
font-size)
px pixels (a dot on the computer screen)

147. UNITS
Unit Description
pt point (1 pt is the same as 1/72 inch)
pc pica (1 pc is the same as 12 points)
in inch
cm centimeter
mm millimeter

148. UNITS RECOMMENDATIONS
Rec​om​mended Oc​ca​sional use Not rec​om​mended
Screen em, px, % ex pt, cm, mm, in, pc
Print em, cm, mm, in, pt, pc, % px, ex

149. MORE UNITS IN CSS
Unit Description
rem is the font size of the root element of the
document
vw 1/100th of the window's width
vh 1/100th of the window's height

150. RESOURCES
http://www.w3.org/TR/CSS2/
http://www.w3.org/Style/CSS/current-work
https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS
https://css-tricks.com/almanac/
http://reference.sitepoint.com/css