CSS3 Notes for freshers and experienced developer

Chapters CSS3 Notes for freshers and experienced developers, 

Learn CSS3 tutorials and gain knowledge on CSS3 pdf notes and tags and other CSS3-related knowledge in easenotes

Chapter 1: Getting started with CSS
.................................................................................................................... 2
Section 1.1: External Stylesheet ................................................................................................................... 2
Section 1.2: Internal Styles ......................................................................................................................... 3
Section 1.3: CSS @import rule (one of CSS at-rule) ........................................................................................ 4
Section 1.4: Inline Styles ............................................................................................................................ 4
Section 1.5: Changing CSS with JavaScript .................................................................................................... 4
Section 1.6: Styling Lists with CSS ................................................................................................................ 5
Chapter 2: Structure and Formatting of a CSS Rule
.................................................................................. 7
Section 2.1: Property Lists .......................................................................................................................... 7
Section 2.2: Multiple Selectors ..................................................................................................................... 7
Section 2.3: Rules, Selectors, and Declaration Blocks ..................................................................................... 7
Chapter 3: Comments
Section 3.1: Single Line
................................................................................................................................................. 8
................................................................................................................................................... 8
Section 3.2: Multiple Line ............................................................................................................................ 8
Chapter 4: Selectors
................................................................................................................................................... 9
Section 4.1: Basic selectors ......................................................................................................................... 9
Section 4.2: Attribute Selectors.................................................................................................................... 9
Section 4.3: Combinators .......................................................................................................................... 12
Section 4.4: Pseudo-classes ...................................................................................................................... 13
Section 4.5: Child Pseudo Class ............................................................................................................... 15
Section 4.6: Class Name Selectors ........................................................................................................... 16
Section 4.7: Select element using its ID without the high specificity of the ID selector ...................................... 17
Section 4.8: The :last-of-type selector ...................................................................................................... 17
Section 4.9: CSS3 :in-range selector example .............................................................................................. 17
Section 4.10: A. The :not pseudo-class example & B. :focus-within CSS pseudo-class ....................................... 18
Section 4.11: Global boolean with checkbox:checked and ~ (general sibling combinator) ................................. 19
Section 4.12: ID selectors ......................................................................................................................... 20
Section 4.13: How to style a Range input .................................................................................................. 21
Section 4.14: The :only-child pseudo-class selector example ......................................................................... 21
Chapter 5: Backgrounds
......................................................................................................................................... 22
Section 5.1: Background Color ................................................................................................................. 22
Section 5.2: Background Gradients ............................................................................................................ 24
Section 5.3: Background Image ................................................................................................................. 25
Section 5.4: Background Shorthand ........................................................................................................... 26
Section 5.5: Background Size .................................................................................................................... 27
Section 5.6: Background Position ............................................................................................................... 31
Section 5.7: The background-origin property ............................................................................................ 32
Section 5.8: Multiple Background Image ..................................................................................................... 34
Section 5.9: Background Attachment .......................................................................................................... 35
Section 5.10: Background Clip ................................................................................................................... 36
Section 5.11: Background Repeat............................................................................................................. 37
Section 5.12: background-blend-mode Property .......................................................................................... 37
Section 5.13: Background Color with Opacity .............................................................................................. 38
Chapter 6: Centering
................................................................................................................................................. 39
Section 6.1: Using Flexbox ........................................................................................................................ 39
Section 6.2: Using CSS transform............................................................................................................. 40
Section 6.3: Using margin: 0 auto; ............................................................................................................ 41
Section 6.4: Using text-align ..................................................................................................................... 42
Section 6.5: Using position: absolute .......................................................................................................... 42
Section 6.6: Using calc() ........................................................................................................................... 43
Section 6.7: Using line-height .................................................................................................................... 43
Section 6.8: Vertical align anything with 3 lines of code ................................................................................ 44
Section 6.9: Centering in relation to another item ..................................................................................... 44
Section 6.10: Ghost element technique (Michał Czernow's hack) .................................................................... 45
Section 6.11: Centering vertically and horizontally without worrying about height or width ........................... 46
Section 6.12: Vertically align an image inside div ......................................................................................... 47
Section 6.13: Centering with fixed size ....................................................................................................... 47
Section 6.14: Vertically align dynamic height elements ................................................................................. 49
Section 6.15: Horizontal and Vertical centering using table layout .................................................................. 49
Chapter 7: The Box Model
...................................................................................................................................... 51
Section 7.1: What is the Box Model? ........................................................................................................... 51
Section 7.2: box-sizing ............................................................................................................................. 52
Chapter 8: Margins
.................................................................................................................................................... 55
Section 8.1: Margin Collapsing ................................................................................................................... 55
Section 8.2: Apply Margin on a Given Side Section 8.3: Margin property simplification
............................................................................................................... 57
.............................................................................................................. 58
Section 8.4: Horizontally center elements on a page using margin .............................................................. 58
Section 8.5: Example 1: ....................................................................................................................................... 59
Section 8.6: Negative margins ................................................................................................................... 59
Chapter 9: Padding
.................................................................................................................................................... 61
Section 9.1: Padding Shorthand ................................................................................................................. 61
Section 9.2: Padding on a given side ........................................................................................................ 62
Chapter 10: Border
..................................................................................................................................................... 63
Section 10.1: border-radius Section 10.2: border-style
......................................................................................................................................... 63
........................................................................................................................................... 64
Section 10.3: Multiple Borders ................................................................................................................... 65
Section 10.4: border (shorthands) ............................................................................................................. 66
Section 10.5: border-collapse .................................................................................................................... 66
Section 10.6: border-image ....................................................................................................................... 67
Section 10.7: Creating a multi-colored border using border-image ............................................................. 67
Section 10.8: border-[left|right|top|bottom] ............................................................................................... 68
Chapter 11: Outlines
Section 11.1: Overview
................................................................................................................................................... 69
.................................................................................................................................................. 69
Section 11.2: outline-style ........................................................................................................................ 69
Chapter 12: Overflow
................................................................................................................................................ 71
Section 12.1: overflow-wrap...................................................................................................................... 71
Section 12.2: overflow-x and overflow-y ..................................................................................................... 72
Section 12.3: overflow: scroll Section 12.4: overflow: visible
....................................................................................................................................... 73
..................................................................................................................................... 73
Section 12.5: Block Formatting Context Created with Overflow ...................................................................... 74
Chapter 13: Media Queries
...................................................................................................................................... 76
Section 13.1: Terminology and Structure .................................................................................................... 76
Section 13.2: Basic Example ...................................................................................................................... 77
Section 13.3: mediatype ........................................................................................................................... 77
Section 13.4: Media Queries for Retina and Non Retina Screens .................................................................... 78
Section 13.5: Width vs Viewport ................................................................................................................ 79
Section 13.6: Using Media Queries to Target Dierent Screen Sizes ................................................................ 79
Section 13.7: Use on link tag ..................................................................................................................... 80
Section 13.8: Media queries and IE8........................................................................................................... 80
Chapter 14: Floats
...................................................................................................................................................... 81
Section 14.1: Float an Image Within Text .................................................................................................... 81
Section 14.2: clear property ...................................................................................................................... 82
Section 14.3: Clearfix ............................................................................................................................... 83
Section 14.4: In-line DIV using float ........................................................................................................... 84
Section 14.5: Use of overflow property to clear floats Section 14.6: Simple Two Fixed-Width Column Layout
............................................................................................ 86
............................................................................................ 86
Section 14.7: Simple Three Fixed-Width Column Layout................................................................................ 87
Section 14.8: Two-Column Lazy/Greedy Layout ........................................................................................ 88
Chapter 15: Typography
......................................................................................................................................... 89
Section 15.1: The Font Shorthand .............................................................................................................. 89
Section 15.2: Quotes ................................................................................................................................ 90
Section 15.3: Font Size ............................................................................................................................. 90
Section 15.4: Text Direction ...................................................................................................................... 90
Section 15.5: Font Stacks.......................................................................................................................... 91
Section 15.6: Text Overflow Section 15.7: Text Shadow
......................................................................................................................................... 91
.......................................................................................................................................... 91
Section 15.8: Text Transform Section 15.9: Letter Spacing
...................................................................................................................................... 92
........................................................................................................................................ 92
Section 15.10: Text Indent ........................................................................................................................ 93
Section 15.11: Text Decoration .................................................................................................................. 93
Section 15.12: Word Spacing..................................................................................................................... 94
Section 15.13: Font Variant ....................................................................................................................... 94
Chapter 16: Flexible Box Layout (Flexbox)
..................................................................................................... 96
Section 16.1: Dynamic Vertical and Horizontal Centering (align-items, justify-content) ..................................... 96
Section 16.2: Sticky Variable-Height Footer ............................................................................................... 102
Section 16.3: Optimally fit elements to their container ................................................................................ 103
Section 16.4: Holy Grail Layout using Flexbox ............................................................................................ 104
Section 16.5: Perfectly aligned buttons inside cards with flexbox ................................................................. 105
Section 16.6: Same height on nested containers ........................................................................................ 107
Chapter 17: Cascading and Specificity
Section 17.1: Calculating Selector Specificity
.......................................................................................................... 109
........................................................................................................... 109
Section 17.2: The !important declaration .................................................................................................. 111
Section 17.3: Cascading ......................................................................................................................... 112
Section 17.4: More complex specificity example ......................................................................................... 113
Chapter 18: Colors
.................................................................................................................................................... 115
Section 18.1: currentColor ...................................................................................................................... 115
Section 18.2: Color Keywords .................................................................................................................. 116
Section 18.3: Hexadecimal Value ............................................................................................................. 122
Section 18.4: rgb() Notation .................................................................................................................... 122
Section 18.5: rgba() Notation .................................................................................................................. 123
Section 18.6: hsl() Notation .................................................................................................................... 123
Section 18.7: hsla() Notation ................................................................................................................... 124
Chapter 19: Opacity
................................................................................................................................................. 126
Section 19.1: Opacity Property ................................................................................................................ 126
Section 19.2: IE Compatibility for `opacity` .............................................................................................. 126
Chapter 20: Length Units
...................................................................................................................................... 127
Section 20.1: Creating scalable elements using rems and ems ..................................................................... 127
Section 20.2: Font size with rem ............................................................................................................ 128
Section 20.3: vmin and vmax................................................................................................................. 129
Section 20.4: vh and vw ........................................................................................................................ 129
Section 20.5: using percent % ................................................................................................................. 129
Chapter 21: Pseudo-Elements
............................................................................................................................. 131
Section 21.1: Pseudo-Elements ............................................................................................................... 131
Section 21.2: Pseudo-Elements in Lists ..................................................................................................... 131
Chapter 22: Positioning
.......................................................................................................................................... 133
Section 22.1: Overlapping Elements with z-index ....................................................................................... 133
Section 22.2: Absolute Position .............................................................................................................. 134
Section 22.3: Fixed position .................................................................................................................... 135
Section 22.4: Relative Position Section 22.5: Static positioning Chapter 23: Layout Control
................................................................................................................................. 135
................................................................................................................................ 135
................................................................................................................................. 137
Section 23.1: The display property ........................................................................................................... 137
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
......................................................................................................................................... 143
......................................................................................................................................... 143
Section 25.3: border-collapse Section 25.4: border-spacing
.................................................................................................................................. 143
................................................................................................................................... 144
Section 25.5: caption-side
Chapter 26: Transitions
........................................................................................................................................ 144
......................................................................................................................................... 145
Section 26.1: Transition shorthand ........................................................................................................... 145
Section 26.2: cubic-bezier ..................................................................................................................... 145
Section 26.3: Transition (longhand) ......................................................................................................... 147
Chapter 27: Animations
......................................................................................................................................... 148
Section 27.1: Animations with keyframes .................................................................................................. 148
Section 27.2: Animations with the transition property .............................................................................. 149
Section 27.3: Syntax Examples ................................................................................................................ 150
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
................................................................................................................................................... 152
.................................................................................................................................................... 153
..................................................................................................................................................... 153
Section 28.4: Multiple transforms........................................................................................................... 153
Section 28.5: Translate ......................................................................................................................... 154
Section 28.6: Transform Origin
Chapter 29: 3D Transforms
................................................................................................................................ 155
................................................................................................................................. 156
Section 29.1: Compass pointer or needle shape using 3D transforms ........................................................... 156
Section 29.2: 3D text eect with shadow ................................................................................................ 157
Section 29.3: backface-visibility ............................................................................................................. 158
Section 29.4: 3D cube ........................................................................................................................... 159
Chapter 30: Filter Property
................................................................................................................................. 161
Section 30.1: Blur .................................................................................................................................. 161
Section 30.2: Drop Shadow (use box-shadow instead if possible) ............................................................. 161
Section 30.3: Hue Rotate ........................................................................................................................ 162
Section 30.4: Multiple Filter Values......................................................................................................... 162
Section 30.5: Invert Color ....................................................................................................................... 163
Chapter 31: Cursor Styling
.................................................................................................................................... 164
Section 31.1: Changing cursor type .......................................................................................................... 164
Section 31.2: pointer-events ................................................................................................................... 164
Section 31.3: caret-color ......................................................................................................................... 165
Chapter 32: box-shadow
....................................................................................................................................... 166
Section 32.1: bottom-only drop shadow using a pseudo-element ............................................................. 166
Section 32.2: drop shadow ...................................................................................................................... 167
Section 32.3: inner drop shadow............................................................................................................ 167
Section 32.4: multiple shadows ............................................................................................................... 168
Chapter 33: Shapes for Floats
........................................................................................................................... 170
Section 33.1: Shape Outside with Basic Shape – circle().............................................................................. 170
Section 33.2: Shape margin .................................................................................................................... 171
Chapter 34: List Styles
........................................................................................................................................... 173
Section 34.1: Bullet Position .................................................................................................................... 173
Section 34.2: Removing Bullets / Numbers Section 34.3: Type of Bullet or Numbering
............................................................................................................ 173
............................................................................................................. 173
Chapter 35: Counters
.............................................................................................................................................. 175
Section 35.1: Applying roman numerals styling to the counter output ........................................................... 175
Section 35.2: Number each item using CSS Counter ................................................................................ 175
Section 35.3: Implementing multi-level numbering using CSS counters .................................................... 176
Chapter 36: Functions
............................................................................................................................................. 178
Section 36.1: calc() function Section 36.2: attr() function Section 36.3: var() function
...................................................................................................................................... 178
...................................................................................................................................... 178
...................................................................................................................................... 178
Section 36.4: radial-gradient() function Section 36.5: linear-gradient() function
.................................................................................................................. 179
.................................................................................................................. 179
Chapter 37: Custom Properties (Variables)
................................................................................................ 180
Section 37.1: Variable Color .................................................................................................................... 180
Section 37.2: Variable Dimensions Section 37.3: Variable Cascading
.......................................................................................................................... 180
............................................................................................................................ 180
Section 37.4: Valid/Invalids ..................................................................................................................... 181
Section 37.5: With media queries ........................................................................................................... 182
Chapter 38: Single Element Shapes
................................................................................................................ 184
Section 38.1: Trapezoid Section 38.2: Triangles
............................................................................................................................................. 184
.............................................................................................................................................. 184
Section 38.3: Circles and Ellipses ........................................................................................................... 187
Section 38.4: Bursts Section 38.5: Square
................................................................................................................................................... 188
................................................................................................................................................. 190
Section 38.6: Cube................................................................................................................................. 190
Section 38.7: Pyramid
Chapter 39: Columns
............................................................................................................................................... 191
............................................................................................................................................... 193
Section 39.1: Simple Example (column-count) ........................................................................................... 193
Section 39.2: Column Width .................................................................................................................... 193
Chapter 40: Multiple columns
............................................................................................................................ 195
Section 40.1: Create Multiple Columns ...................................................................................................... 195
Section 40.2: Basic example .................................................................................................................. 195
Chapter 41: Inline-Block Layout
Section 41.1: Justified navigation bar
........................................................................................................................ 196
...................................................................................................................... 196
Chapter 42: Inheritance
........................................................................................................................................ 197
Section 42.1: Automatic inheritance Section 42.2: Enforced inheritance
Chapter 43: CSS Image Sprites
........................................................................................................................ 197
.......................................................................................................................... 197
......................................................................................................................... 198
Section 43.1: A Basic Implementation ...................................................................................................... 198
Chapter 44: Clipping and Masking
.................................................................................................................. 199
Section 44.1: Clipping and Masking: Overview and Dierence .................................................................... 199
Section 44.2: Simple mask that fades an image from solid to transparent ................................................. 201
Section 44.3: Clipping (Circle) ................................................................................................................. 201
Section 44.4: Clipping (Polygon) ............................................................................................................ 202
Section 44.5: Using masks to cut a hole in the middle of an image Section 44.6: Using masks to create images with irregular shapes
.................................................................... 203
.................................................................... 204
Chapter 45: Fragmentation
................................................................................................................................ 206
Section 45.1: Media print page-break ....................................................................................................... 206
Chapter 46: CSS Object Model (CSSOM)
....................................................................................................... 207
Section 46.1: Adding a background-image rule via the CSSOM ................................................................. 207
Section 46.2: Introduction ...................................................................................................................... 207
Chapter 47: Feature Queries
.............................................................................................................................. 208
Section 47.1: Basic @supports usage ....................................................................................................... 208
Section 47.2: Chaining feature detections............................................................................................... 208
Chapter 48: Stacking Context
........................................................................................................................... 209
Section 48.1: Stacking Context ................................................................................................................ 209
Chapter 49: Block Formatting Contexts
....................................................................................................... 212
Section 49.1: Using the overflow property with a value dierent to visible ..................................................... 212
Chapter 50: Vertical Centering
.......................................................................................................................... 213
Section 50.1: Centering with display: table ............................................................................................... 213
Section 50.2: Centering with Flexbox ..................................................................................................... 213
Section 50.3: Centering with Transform ................................................................................................. 214
Section 50.4: Centering Text with Line Height ......................................................................................... 214
Section 50.5: Centering with Position: absolute ......................................................................................... 214
Section 50.6: Centering with pseudo element ......................................................................................... 215
Chapter 51: Object Fit and Placement
........................................................................................................... 217
Section 51.1: object-fit ........................................................................................................................... 217
Chapter 52: CSS design patterns
..................................................................................................................... 220
Section 52.1: BEM.................................................................................................................................. 220
Chapter 53: Browser Support & Prefixes
...................................................................................................... 222
Section 53.1: Transitions Section 53.2: Transform
............................................................................................................................................ 222
........................................................................................................................................... 222
Chapter 54: Normalizing Browser Styles
..................................................................................................... 223
Section 54.1: normalize.css ..................................................................................................................... 223
Section 54.2: Approaches and Examples
Chapter 55: Internet Explorer Hacks
............................................................................................................... 223
.............................................................................................................. 226
Section 55.1: Adding Inline Block support to IE6 and IE7 ............................................................................ 226
Section 55.2: High Contrast Mode in Internet Explorer 10 and greater .......................................................... 226
Section 55.3: Internet Explorer 6 & Internet Explorer 7 only ........................................................................ 227
Section 55.4: Internet Explorer 8 only ...................................................................................................... 227
Chapter 56: Performance
..................................................................................................................................... 228
Section 56.1: Use transform and opacity to avoid trigger layout ................................................................... 228