CSS Notes For Professionals. 200+ pages of professional hints and tricks

Content list
About
Chapter 1: Getting started with CSS
	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
Chapter 2: Structure and Formatting of a CSS Rule
	Section 2.1: Property Lists
	Section 2.2: Multiple Selectors
	Section 2.3: Rules, Selectors, and Declaration Blocks
Chapter 3: Comments
	Section 3.1: Single Line
	Section 3.2: Multiple Line
Chapter 4: Selectors
	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
Chapter 5: Backgrounds
	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
Chapter 6: Centering
	Section 6.1: Using Flexbox
	Section 6.2: Using CSS transform
	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
Chapter 7: The Box Model
	Section 7.1: What is the Box Model?
	Section 7.2: box-sizing
Chapter 8: Margins
	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
Chapter 9: Padding
	Section 9.1: Padding Shorthand
	Section 9.2: Padding on a given side
Chapter 10: Border
	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]
Chapter 11: Outlines
	Section 11.1: Overview
	Section 11.2: outline-style
Chapter 12: Overflow
	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
Chapter 13: Media Queries
	Section 13.1: Terminology and Structure
	Section 13.2: Basic Example
	Section 13.3: mediatype
	Section 13.4: Media Queries for Retina and Non Retina Screens
	Section 13.5: Width vs Viewport
	Section 13.6: Using Media Queries to Target Dierent Screen Sizes
	Section 13.7: Use on link tag
	Section 13.8: Media queries and IE8
Chapter 14: Floats
	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
Chapter 15: Typography
	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
Chapter 16: Flexible Box Layout (Flexbox)
	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
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
Chapter 18: Colors
	Section 18.1: currentColor
	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
Chapter 19: Opacity
	Section 19.1: Opacity Property
	Section 19.2: IE Compatibility for `opacity`
Chapter 20: Length Units
	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
	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
Chapter 24: Grid
	Section 24.1: Basic Example
Chapter 25: Tables
	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
	Section 26.1: Transition shorthand
	Section 26.2: cubic-bezier
	Section 26.3: Transition (longhand)
Chapter 27: Animations
	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
Chapter 28: 2D Transforms
	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
	Section 29.1: Compass pointer or needle shape using 3D transforms
	Section 29.2: 3D text eect with shadow
	Section 29.3: backface-visibility
	Section 29.4: 3D cube
Chapter 30: Filter Property
	Section 30.1: Blur
	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
	Section 31.1: Changing cursor type
	Section 31.2: pointer-events
	Section 31.3: caret-color
Chapter 32: box-shadow
	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
	Section 33.1: Shape Outside with Basic Shape – circle()
	Section 33.2: Shape margin
Chapter 34: List Styles
	Section 34.1: Bullet Position
	Section 34.2: Removing Bullets / Numbers
	Section 34.3: Type of Bullet or Numbering
Chapter 35: Counters
	Section 35.1: Applying roman numerals styling to the counter output
	Section 35.2: Number each item using CSS Counter
	Section 35.3: Implementing multi-level numbering using CSS counters
Chapter 36: Functions
	Section 36.1: calc() function
	Section 36.2: attr() function
	Section 36.3: var() function
	Section 36.4: radial-gradient() function
	Section 36.5: linear-gradient() function
Chapter 37: Custom Properties (Variables)
	Section 37.1: Variable Color
	Section 37.2: Variable Dimensions
	Section 37.3: Variable Cascading
	Section 37.4: Valid/Invalids
	Section 37.5: With media queries
Chapter 38: Single Element Shapes
	Section 38.1: Trapezoid
	Section 38.2: Triangles
	Section 38.3: Circles and Ellipses
	Section 38.4: Bursts
	Section 38.5: Square
	Section 38.6: Cube
	Section 38.7: Pyramid
Chapter 39: Columns
	Section 39.1: Simple Example (column-count)
	Section 39.2: Column Width
Chapter 40: Multiple columns
	Section 40.1: Create Multiple Columns
	Section 40.2: Basic example
Chapter 41: Inline-Block Layout
	Section 41.1: Justified navigation bar
Chapter 42: Inheritance
	Section 42.1: Automatic inheritance
	Section 42.2: Enforced inheritance
Chapter 43: CSS Image Sprites
	Section 43.1: A Basic Implementation
Chapter 44: Clipping and Masking
	Section 44.1: Clipping and Masking: Overview and Dierence
	Section 44.2: Simple mask that fades an image from solid to transparent
	Section 44.3: Clipping (Circle)
	Section 44.4: Clipping (Polygon)
	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
Chapter 45: Fragmentation
	Section 45.1: Media print page-break
Chapter 46: CSS Object Model (CSSOM)
	Section 46.1: Adding a background-image rule via the CSSOM
	Section 46.2: Introduction
Chapter 47: Feature Queries
	Section 47.1: Basic @supports usage
	Section 47.2: Chaining feature detections
Chapter 48: Stacking Context
	Section 48.1: Stacking Context
Chapter 49: Block Formatting Contexts
	Section 49.1: Using the overflow property with a value dierent to visible
Chapter 50: Vertical Centering
	Section 50.1: Centering with display: table
	Section 50.2: Centering with Flexbox
	Section 50.3: Centering with Transform
	Section 50.4: Centering Text with Line Height
	Section 50.5: Centering with Position: absolute
	Section 50.6: Centering with pseudo element
Chapter 51: Object Fit and Placement
	Section 51.1: object-fit
Chapter 52: CSS design patterns
	Section 52.1: BEM
Chapter 53: Browser Support & Prefixes
	Section 53.1: Transitions
	Section 53.2: Transform
Chapter 54: Normalizing Browser Styles
	Section 54.1: normalize.css
	Section 54.2: Approaches and Examples
Chapter 55: Internet Explorer Hacks
	Section 55.1: Adding Inline Block support to IE6 and IE7
	Section 55.2: High Contrast Mode in Internet Explorer 10 and greater
	Section 55.3: Internet Explorer 6 & Internet Explorer 7 only
	Section 55.4: Internet Explorer 8 only
Chapter 56: Performance
	Section 56.1: Use transform and opacity to avoid trigger layout
Credits
You may also like