CSS

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. SELECTORS

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

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

15. 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.

16. 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

17. 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

18. PSEUDO CLASSES
PatternMeaning 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:targetan E element being the target of the referring URI 3

19. 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:checkeda 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 s3

20. 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

21. 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-typean E element, first sibling of its type 3

22. PSEUDO CLASSES
(STRUCTURAL)
Pattern Meaning Level
E:last-of-
type
an E element, last sibling of its type 3
E:only-childan 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

23. PSEUDO ELEMENTS
Pattern Meaning Level
E::first-linethe first formatted line of an E element1
E::first-letterthe first formatted letter of an E element1
E::before generated content before an E element2
E::after generated content after an E element 2

24. COMBINATORS
PatternMeaning 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 element2
E ~ F an F element preceded by an E element 3

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

26. SELECTOR MATCHING

27. VALUE PROCESSING

28. 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.

29. 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.

30. 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.1px14px
width width: 80% 80% 80% 80% 354.2px354px
width width: auto auto auto auto 134px134px
height height: auto auto auto auto 176px176px
page-break-
after
(none) (none) auto (initial value)auto auto auto

31. DEFAULTING

32. 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.

33. INHERITANCE

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

35. STYLE SHEETS ORIGINS

36. STYLE SHEET ORIGINS
Author
User
User agent

37. USER AGENT STYLE SHEET
Browser apply style sheets to all web documents. These are
referred to as a “default” browser style sheet.

38. USER STYLE SHEETS
Most browsers allow user to apply their own style sheets
within the browser.

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

40. APPLYING CSS

41. THREE WAYS TO ATTACH
Inline style
Embedded
Linked

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

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

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

45. CSS RULE OVERLOAD
(CASCADING ORDER)

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

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

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

49. FROM LOWEST TO HIGHEST
PRIORITY
Browser styles.
Normal declarations in user style sheet.
Normal declarations in author style sheet.
!important declarations in author style sheet.
!important declaration in user style sheet.

50. 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”.

51. 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.

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

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

54. BOX MODEL

55. 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.

56. BOX DIMENSIONS

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

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

59. 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.

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

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

62. 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.

63. VISUAL FORMATTING
MODEL

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

65. 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

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

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

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

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

70. 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.

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

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

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

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

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

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

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

78. 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.

79. 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).

80. 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>

81. 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.

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

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

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

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

86. NORMAL FLOW
position
static
relative
float
none

87. 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.

88. 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.

89. FLOATS
position
static
relative
float
left
right

90. 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.

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

92. 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.

93. 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.

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

95. 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

96. 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.

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

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

99. '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.

100. 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".

101. 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.

102. 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.

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

104. CSS AT-RULES

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

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

107. CSS PROPERTIES

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

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

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

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

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

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

114. 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

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

116. USER INTERFACE PROPERTIES
cursor

117. 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;
    }

118. 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

119. 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;
    }

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

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

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

123. TRANSFORM
translate
scale
rotate
skew
perspective
matrix

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

125. 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;
}

126. 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;

127. 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;
    }

128. VENDOR-SPECIFIC PROPERTIES
'-' + vendor specific identifier + '-' + meaningful name
PrefixOrganisation
-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;
}

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

130. 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;
}

131. 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;
}

132. 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
}

133. 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;
}

134. 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;
}

135. CSS UNITS

136. UNITS
UnitDescription
% percentage
em1em is equal to the current font size. 2em means 2 times the size
of the current font.
exone ex is the x-height of a font (x-height is usually about half the
font-size)
pxpixels (a dot on the computer screen)

137. UNITS
UnitDescription
ptpoint (1 pt is the same as 1/72 inch)
pcpica (1 pc is the same as 12 points)
in inch
cmcentimeter
mmmillimeter

138. UNITS RECOMMENDATIONS
  Rec​om​mended Oc​ca​sional
use
Not rec​om​‐
mended
Screenem, px, % ex pt, cm, mm, in, pc
Printem, cm, mm, in, pt, pc,
%
px, ex

139. MORE UNITS IN CSS
UnitDescription
remis the font size of the root element of the document
vw1/100th of the window's width
vh1/100th of the window's height

140. 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