CSS
Notes for ProfessionalsCSS
Notes for Professionals
200+ pages
of professional hints and tricks
GoalKicker.com
Free Programming Books
Disclaimer
This is an unocial free book created for educational purposes and is
not aliated with ocial CSS group(s) or company(s).
All trademarks and registered trademarks are
the property of their respective owners
Contents
About
...................................................................................................................................................................................
1
Chapter 1: Getting started with CSS
....................................................................................................................
2
Section 1.1: External Stylesheet
Section 1.2: Internal Styles
Section 1.3: CSS @import rule (one of CSS at-rule)
Section 1.4: Inline Styles
Section 1.5: Changing CSS with JavaScript
Section 1.6: Styling Lists with CSS
.....................................................................................................................................
............................................................................................................................................
...................................................................................................
4
.................................................................................................................................................
.................................................................................................................
.................................................................................................................................
Chapter 2: Structure and Formatting of a CSS Rule
..................................................................................
7
Section 2.1: Property Lists
Section 2.2: Multiple Selectors
Section 2.3: Rules, Selectors, and Declaration Blocks
.............................................................................................................................................
......................................................................................................................................
...............................................................................................
7
Chapter 3: Comments
Section 3.1: Single Line
Section 3.2: Multiple Line
.................................................................................................................................................
...................................................................................................................................................
...............................................................................................................................................
8
Chapter 4: Selectors
...................................................................................................................................................
9
.................................................................................................................................
............................................................................................................................
...........................................................................................................................................
....................................................................................................................................
............................................................................................................................................
.......................................................................................................................................
Section 4.1: Basic selectors
Section 4.2: Attribute Selectors
Section 4.3: Combinators
Section 4.4: Pseudo-classes
Section 4.5: Child Pseudo Class
Section 4.6: Class Name Selectors
Section 4.7: Select element using its ID without the high specificity of the ID selector
Section 4.8: The :last-of-type selector
Section 4.9: CSS3 :in-range selector example
Section 4.10: A. The :not pseudo-class example & B. :focus-within CSS pseudo-class
Section 4.11: Global boolean with checkbox:checked and ~ (general sibling combinator)
Section 4.12: ID selectors
Section 4.13: How to style a Range input
Section 4.14: The :only-child pseudo-class selector example
......................................................................................................................
..........................................................................................................
............................................................................................................................................
..................................................................................................................
.................................................................................
.........................................
..................................
19
.......................................
Chapter 5: Backgrounds
.........................................................................................................................................
22
Section 5.1: Background Color
Section 5.2: Background Gradients
Section 5.3: Background Image
Section 5.4: Background Shorthand
Section 5.5: Background Size
Section 5.6: Background Position
Section 5.7: The background-origin property
Section 5.8: Multiple Background Image
Section 5.9: Background Attachment
Section 5.10: Background Clip
Section 5.11: Background Repeat
Section 5.12: background-blend-mode Property
Section 5.13: Background Color with Opacity
...................................................................................................................................
...........................................................................................................................
.................................................................................................................................
..........................................................................................................................
.....................................................................................................................................
..............................................................................................................................
..........................................................................................................
..................................................................................................................
.......................................................................................................................
....................................................................................................................................
...............................................................................................................................
.....................................................................................................
37
...........................................................................................................
38
Chapter 6: Centering
.................................................................................................................................................
39
Section 6.1: Using Flexbox
Section 6.2: Using CSS transform
...........................................................................................................................................
39
..............................................................................................................................
40
2
3
4
4
5
7
7
8
8
9
Publicité
9
12
13
15
16
17
17
17
18
20
21
21
22
24
25
26
27
31
32
34
35
36
37
.............................................................................................................................................
.....................................................................................................................................
.............................................................................................................................
.......................................................................................................................................
.........................................................................................................................
Section 6.3: Using margin: 0 auto;
Section 6.4: Using text-align
Section 6.5: Using position: absolute
Section 6.6: Using calc()
Section 6.7: Using line-height
Section 6.8: Vertical align anything with 3 lines of code
Section 6.9: Centering in relation to another item
Section 6.10: Ghost element technique (Michał Czernow's hack)
Section 6.11: Centering vertically and horizontally without worrying about height or width
Section 6.12: Vertically align an image inside div
Section 6.13: Centering with fixed size
Section 6.14: Vertically align dynamic height elements
Section 6.15: Horizontal and Vertical centering using table layout
.........................................................................................
...................................................................................................
...........................................................................
.....................................................................................................
.......................................................................................................................
..........................................................................................
........................................................................
...............................
46
Chapter 7: The Box Model
......................................................................................................................................
51
Section 7.1: What is the Box Model?
Section 7.2: box-sizing
..........................................................................................................................
51
.................................................................................................................................................
52
Chapter 8: Margins
....................................................................................................................................................
55
Section 8.1: Margin Collapsing
Section 8.2: Apply Margin on a Given Side
Section 8.3: Margin property simplification
Section 8.4: Horizontally center elements on a page using margin
Section 8.5: Example 1:
Section 8.6: Negative margins
....................................................................................................................................
...............................................................................................................
..............................................................................................................
......................................................................
58
................................................................................................................................................
...................................................................................................................................
Chapter 9: Padding
....................................................................................................................................................
61
Section 9.1: Padding Shorthand
Section 9.2: Padding on a given side
.................................................................................................................................
61
........................................................................................................................
62
Chapter 10: Border
.....................................................................................................................................................
63
.........................................................................................................................................
...........................................................................................................................................
Section 10.1: border-radius
Section 10.2: border-style
Section 10.3: Multiple Borders
Section 10.4: border (shorthands)
Section 10.5: border-collapse
Section 10.6: border-image
Section 10.7: Creating a multi-colored border using border-image
Section 10.8: border-[left|right|top|bottom]
....................................................................................................................................
.............................................................................................................................
.....................................................................................................................................
........................................................................................................................................
..............................................................................................................
......................................................................
67
Chapter 11: Outlines
Section 11.1: Overview
Section 11.2: outline-style
...................................................................................................................................................
..................................................................................................................................................
............................................................................................................................................
69
Chapter 12: Overflow
................................................................................................................................................
71
........................................................................................................................................
Section 12.1: overflow-wrap
Section 12.2: overflow-x and overflow-y
Section 12.3: overflow: scroll
Section 12.4: overflow: visible
Section 12.5: Block Formatting Context Created with Overflow
...................................................................................................................
.......................................................................................................................................
.....................................................................................................................................
.............................................................................
74
Chapter 13: Media Queries
......................................................................................................................................
76
Section 13.1: Terminology and Structure
Section 13.2: Basic Example
Section 13.3: mediatype
Publicité
Section 13.4: Media Queries for Retina and Non Retina Screens
........................................................................................................................................
..............................................................................................................................................
...................................................................................................................
...........................................................................
78
41
42
42
43
43
44
44
45
47
47
49
49
55
57
58
59
59
63
64
65
66
66
67
68
69
69
71
72
73
73
76
77
77
Section 13.5: Width vs Viewport
Section 13.6: Using Media Queries to Target Dierent Screen Sizes
Section 13.7: Use on link tag
Section 13.8: Media queries and IE8
.......................................................................................................................................
...........................................................................................................................
.................................................................................................................................
79
.....................................................................
79
Chapter 14: Floats
......................................................................................................................................................
81
...................................................................................................................
........................................................................................................................................
....................................................................................................................................................
............................................................................................................................
Section 14.1: Float an Image Within Text
Section 14.2: clear property
Section 14.3: Clearfix
Section 14.4: In-line DIV using float
Section 14.5: Use of overflow property to clear floats
Section 14.6: Simple Two Fixed-Width Column Layout
Section 14.7: Simple Three Fixed-Width Column Layout
Section 14.8: Two-Column Lazy/Greedy Layout
............................................................................................
............................................................................................
.........................................................................................
87
......................................................................................................
88
Chapter 15: Typography
.........................................................................................................................................
89
Section 15.1: The Font Shorthand
Section 15.2: Quotes
Section 15.3: Font Size
Section 15.4: Text Direction
Section 15.5: Font Stacks
Section 15.6: Text Overflow
Section 15.7: Text Shadow
Section 15.8: Text Transform
Section 15.9: Letter Spacing
Section 15.10: Text Indent
Section 15.11: Text Decoration
Section 15.12: Word Spacing
Section 15.13: Font Variant
...............................................................................................................................
89
....................................................................................................................................................
.................................................................................................................................................
.........................................................................................................................................
............................................................................................................................................
.........................................................................................................................................
..........................................................................................................................................
......................................................................................................................................
........................................................................................................................................
............................................................................................................................................
.....................................................................................................................................
.......................................................................................................................................
..........................................................................................................................................
Chapter 16: Flexible Box Layout (Flexbox)
.....................................................................................................
96
Section 16.1: Dynamic Vertical and Horizontal Centering (align-items, justify-content)
Section 16.2: Sticky Variable-Height Footer
Section 16.3: Optimally fit elements to their container
Section 16.4: Holy Grail Layout using Flexbox
Section 16.5: Perfectly aligned buttons inside cards with flexbox
Section 16.6: Same height on nested containers
..........................................................................................
........................................................................................................
...........................................................................................................
....................................................................................................
........................................................................
......................................
96
Chapter 17: Cascading and Specificity
Section 17.1: Calculating Selector Specificity
Section 17.2: The !important declaration
Section 17.3: Cascading
Section 17.4: More complex specificity example
..........................................................................................................
...........................................................................................................
.................................................................................................................
.............................................................................................................................................
....................................................................................................
113
Chapter 18: Colors
....................................................................................................................................................
115
Section 18.1: currentColor
Publicité
Section 18.2: Color Keywords
Section 18.3: Hexadecimal Value
Section 18.4: rgb() Notation
Section 18.5: rgba() Notation
Section 18.6: hsl() Notation
Section 18.7: hsla() Notation
..........................................................................................................................................
...................................................................................................................................
.............................................................................................................................
122
......................................................................................................................................
...................................................................................................................................
.......................................................................................................................................
.....................................................................................................................................
Chapter 19: Opacity
.................................................................................................................................................
126
Section 19.1: Opacity Property
Section 19.2: IE Compatibility for opacity
..................................................................................................................................
126
..............................................................................................................
126
80
80
81
82
83
84
86
86
90
90
90
91
91
91
92
92
93
93
94
94
102
103
104
105
107
109
109
111
112
115
116
122
123
123
124
Chapter 20: Length Units
......................................................................................................................................
127
...........................................................................
127
Section 20.1: Creating scalable elements using rems and ems
Section 20.2: Font size with rem
Section 20.3: vmin and vmax
Section 20.4: vh and vw
Section 20.5: using percent %
Chapter 21: Pseudo-Elements
Section 21.1: Pseudo-Elements
Section 21.2: Pseudo-Elements in Lists
..............................................................................................................................
...................................................................................................................................
............................................................................................................................................
..................................................................................................................................
.............................................................................................................................
.................................................................................................................................
....................................................................................................................
Chapter 22: Positioning
..........................................................................................................................................
133
...................................................................................................
133
Section 22.1: Overlapping Elements with z-index
Section 22.2: Absolute Position
Section 22.3: Fixed position
Section 22.4: Relative Position
Section 22.5: Static positioning
Chapter 23: Layout Control
Section 23.1: The display property
Section 23.2: To get old table structure using div
................................................................................................................................
......................................................................................................................................
.................................................................................................................................
................................................................................................................................
.................................................................................................................................
...........................................................................................................................
.................................................................................................
139
Chapter 24: Grid
........................................................................................................................................................
141
Section 24.1: Basic Example
.....................................................................................................................................
141
Chapter 25: Tables
...................................................................................................................................................
143
Section 25.1: table-layout
Section 25.2: empty-cells
Section 25.3: border-collapse
Section 25.4: border-spacing
Section 25.5: caption-side
Chapter 26: Transitions
.........................................................................................................................................
.........................................................................................................................................
..................................................................................................................................
143
...................................................................................................................................
........................................................................................................................................
Section 26.1: Transition shorthand
Section 26.2: cubic-bezier
Section 26.3: Transition (longhand)
.........................................................................................................................................
...........................................................................................................................
.........................................................................................................................................
........................................................................................................................
147
Chapter 27: Animations
.........................................................................................................................................
148
Publicité
Section 27.1: Animations with keyframes
Section 27.2: Animations with the transition property
Section 27.3: Syntax Examples
Section 27.4: Increasing Animation Performance Using the will-change Attribute
................................................................................................................
..........................................................................................
................................................................................................................................
..........................................
151
Chapter 28: 2D Transforms
.................................................................................................................................
152
Section 28.1: Rotate
Section 28.2: Scale
Section 28.3: Skew
Section 28.4: Multiple transforms
Section 28.5: Translate
Section 28.6: Transform Origin
Chapter 29: 3D Transforms
...................................................................................................................................................
....................................................................................................................................................
.....................................................................................................................................................
............................................................................................................................
153
.............................................................................................................................................
................................................................................................................................
.................................................................................................................................
Section 29.1: Compass pointer or needle shape using 3D transforms
Section 29.2: 3D text eect with shadow
Section 29.3: backface-visibility
Section 29.4: 3D cube
................................................................................................................
...............................................................................................................................
...............................................................................................................................................
................................................................
156
Chapter 30: Filter Property
.................................................................................................................................
161
Section 30.1: Blur
........................................................................................................................................................
161
128
129
129
129
131
131
131
134
135
135
135
137
137
143
143
144
144
145
145
145
148
149
150
152
153
153
154
155
156
157
158
159
Section 30.2: Drop Shadow (use box-shadow instead if possible)
Section 30.3: Hue Rotate
Section 30.4: Multiple Filter Values
Section 30.5: Invert Color
Chapter 31: Cursor Styling
..........................................................................................................................................
..........................................................................................................................
.........................................................................................................................................
....................................................................................................................................
......................................................................
161
Section 31.1: Changing cursor type
Section 31.2: pointer-events
Section 31.3: caret-color
Chapter 32: box-shadow
.....................................................................................................................................
............................................................................................................................................
.......................................................................................................................................
..........................................................................................................................
164
Section 32.1: bottom-only drop shadow using a pseudo-element
Section 32.2: drop shadow
Section 32.3: inner drop shadow
Section 32.4: multiple shadows
Chapter 33: Shapes for Floats
.......................................................................................................................................
.............................................................................................................................
................................................................................................................................
...........................................................................................................................
......................................................................
166
Section 33.1: Shape Outside with Basic Shape – circle()
Section 33.2: Shape margin
......................................................................................................................................
171
........................................................................................
170
Chapter 34: List Styles
...........................................................................................................................................
173
Section 34.1: Bullet Position
Section 34.2: Removing Bullets / Numbers
Section 34.3: Type of Bullet or Numbering
......................................................................................................................................
173
............................................................................................................
173
.............................................................................................................
173
Chapter 35: Counters
..............................................................................................................................................
175
Section 35.1: Applying roman numerals styling to the counter output
Section 35.2: Number each item using CSS Counter
Section 35.3: Implementing mu...