CSS Professional Tips Secrets.pdf

Contents
About ................................................................................................................................................................................... 1
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) ................................................................................................... 3
Section 1.4: Inline Styles ................................................................................................................................................. 4
Section 1.5: Changing CSS with JavaScript ................................................................................................................. 4
Section 1.6: Styling Lists with CSS ................................................................................................................................. 5
Chapter 2: Backgrounds ............................................................................................................................................ 6
Section 2.1: Background Color ..................................................................................................................................... 6
Section 2.2: Background Gradients ............................................................................................................................. 8
Section 2.3: Background Image ................................................................................................................................... 9
Section 2.4: Background Shorthand .......................................................................................................................... 10
Section 2.5: Background Size ..................................................................................................................................... 11
Section 2.6: Background Position .............................................................................................................................. 15
Section 2.7: The background-origin property .......................................................................................................... 16
Section 2.8: Multiple Background Image .................................................................................................................. 17
Section 2.9: Background Attachment ....................................................................................................................... 18
Section 2.10: Background Clip .................................................................................................................................... 19
Section 2.11: Background Repeat ............................................................................................................................... 20
Section 2.12: background-blend-mode Property ..................................................................................................... 20
Section 2.13: Background Color with Opacity ........................................................................................................... 20
Chapter 3: Centering ................................................................................................................................................. 21
Section 3.1: Using Flexbox ........................................................................................................................................... 21
Section 3.2: Using CSS transform .............................................................................................................................. 22
Section 3.3: Using margin: 0 auto; ............................................................................................................................. 23
Section 3.4: Using text-align ....................................................................................................................................... 24
Section 3.5: Using position: absolute ......................................................................................................................... 24
Section 3.6: Using calc() .............................................................................................................................................. 25
Section 3.7: Using line-height ..................................................................................................................................... 25
Section 3.8: Vertical align anything with 3 lines of code ......................................................................................... 25
Section 3.9: Centering in relation to another item ................................................................................................... 26
Section 3.10: Ghost element technique (Micha? Czernow's hack) .......................................................................... 27
Section 3.11: Centering vertically and horizontally without worrying about height or width ............................... 28
Section 3.12: Vertically align an image inside div ..................................................................................................... 29
Section 3.13: Centering with fixed size ....................................................................................................................... 29
Section 3.14: Vertically align dynamic height elements .......................................................................................... 30
Section 3.15: Horizontal and Vertical centering using table layout ........................................................................ 31
Chapter 4: Margins .................................................................................................................................................... 32
Section 4.1: Margin Collapsing .................................................................................................................................... 32
Section 4.2: Apply Margin on a Given Side ............................................................................................................... 34
Section 4.3: Margin property simplification .............................................................................................................. 35
Section 4.4: Horizontally center elements on a page using margin ...................................................................... 35
Section 4.5: Example 1: ................................................................................................................................................ 36
Section 4.6: Negative margins ................................................................................................................................... 36
Chapter 5: Media Queries ....................................................................................................................................... 36
Section 5.1: Terminology and Structure .................................................................................................................... 37
Section 5.2: Basic Example ........................................