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