CSS

VladimirZhidal 2,247 views 140 slides Jul 11, 2015
Slide 1
Slide 1 of 140
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27
Slide 28
28
Slide 29
29
Slide 30
30
Slide 31
31
Slide 32
32
Slide 33
33
Slide 34
34
Slide 35
35
Slide 36
36
Slide 37
37
Slide 38
38
Slide 39
39
Slide 40
40
Slide 41
41
Slide 42
42
Slide 43
43
Slide 44
44
Slide 45
45
Slide 46
46
Slide 47
47
Slide 48
48
Slide 49
49
Slide 50
50
Slide 51
51
Slide 52
52
Slide 53
53
Slide 54
54
Slide 55
55
Slide 56
56
Slide 57
57
Slide 58
58
Slide 59
59
Slide 60
60
Slide 61
61
Slide 62
62
Slide 63
63
Slide 64
64
Slide 65
65
Slide 66
66
Slide 67
67
Slide 68
68
Slide 69
69
Slide 70
70
Slide 71
71
Slide 72
72
Slide 73
73
Slide 74
74
Slide 75
75
Slide 76
76
Slide 77
77
Slide 78
78
Slide 79
79
Slide 80
80
Slide 81
81
Slide 82
82
Slide 83
83
Slide 84
84
Slide 85
85
Slide 86
86
Slide 87
87
Slide 88
88
Slide 89
89
Slide 90
90
Slide 91
91
Slide 92
92
Slide 93
93
Slide 94
94
Slide 95
95
Slide 96
96
Slide 97
97
Slide 98
98
Slide 99
99
Slide 100
100
Slide 101
101
Slide 102
102
Slide 103
103
Slide 104
104
Slide 105
105
Slide 106
106
Slide 107
107
Slide 108
108
Slide 109
109
Slide 110
110
Slide 111
111
Slide 112
112
Slide 113
113
Slide 114
114
Slide 115
115
Slide 116
116
Slide 117
117
Slide 118
118
Slide 119
119
Slide 120
120
Slide 121
121
Slide 122
122
Slide 123
123
Slide 124
124
Slide 125
125
Slide 126
126
Slide 127
127
Slide 128
128
Slide 129
129
Slide 130
130
Slide 131
131
Slide 132
132
Slide 133
133
Slide 134
134
Slide 135
135
Slide 136
136
Slide 137
137
Slide 138
138
Slide 139
139
Slide 140
140

About This Presentation

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


Slide Content

CSS
Created by Vladimir Zhydal

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

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

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.

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

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

SYNTAX

ANATOMY OF CSS RULE

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

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

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

SELECTORS

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

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

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.

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

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

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

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

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

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

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

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

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

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

SELECTOR MATCHING

VALUE PROCESSING

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.

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.

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

DEFAULTING

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.

INHERITANCE

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

STYLE SHEETS ORIGINS

STYLE SHEET ORIGINS
Author
User
User agent

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

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

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

APPLYING CSS

THREE WAYS TO ATTACH
Inline style
Embedded
Linked

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

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

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

CSS RULE OVERLOAD
(CASCADING ORDER)

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

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

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

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.

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

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.

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

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

BOX MODEL

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.

BOX DIMENSIONS

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

BOX-SIZING
content-box
padding-box
border-box

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.

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

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

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.

VISUAL FORMATTING
MODEL

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

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

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

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

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

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

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.

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

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

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

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

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

INLINE-LEVEL ELEMENTS
Generate inline-level boxes.

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

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.

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

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>

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.

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

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

POSITIONING SCHEMES
Normal flow.
Floats.
Absolute positioning.

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

NORMAL FLOW
position
static
relative
float
none

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.

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.

FLOATS
position
static
relative
float
left
right

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.

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

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.

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.

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

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

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.

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

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

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

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

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.

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.

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

CSS AT-RULES

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

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

CSS PROPERTIES

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

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

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

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

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

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

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

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

USER INTERFACE PROPERTIES
cursor

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

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

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

GRADIENT
Displays smooth transitions between two or more specified
colors.

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

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

TRANSFORM
translate
scale
rotate
skew
perspective
matrix

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

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

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;

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

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

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

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

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

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
}

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

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

CSS UNITS

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)

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

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

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

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