CSS Visual Dictionary

Contents
1 CSS Properties and Values
1.1 External Placement
1.2 Internal Placement
1.3 Inline Placement
1.4 CSS Grammar – Selector Syntax
1.5 Relationship Between Properties & Values
1.6 CSS Comments
1.7 Assignment Patterns
1.8 CSS Variables
1.8.1 Local Variables
1.9 Syntactically Awesome Stylesheets
1.10 The Idea Behind Cascading Style Sheets
1.11 CSS Selectors
1.12 Forgiving Nature
1.13 Common
1.14 Shorthand Properties
2 Pseudo Elements
2.1 ::after
2.2 ::before
2.3 ::first-letter
2.4 ::first-line
2.5 ::selection
2.6 ::slotted(*)
3 Pseudo Selectors
3.1 :link
3.2 :visited
3.3 :hover
3.4 :active
3.5 :focus
3.6 :enabled
3.7 :disabled
3.8 :default
3.9 :indeterminate
3.10 :required
3.11 :optional
3.12 :read-only
3.13 :root
3.14 :only-of-type
3.15 :first-of-type
3.16 :nth-of-type()
3.17 :last-of-type
3.18 :nth-child()
3.19 :nth-last-child()
3.20 :nth-child(odd)
3.21 :nth-child(even)
3.22 :not()
3.23 :empty
3.24 :Nesting pseudo-selectors
3.25 :dir(rtl) and :dir(ltr)
3.26 :only-child
4 CSS Box Model
5 Position
5.1 Test Element
5.2 static & relative
5.3 absolute & fixed
5.4 fixed
5.5 sticky
6 Working With Text
6.1 Text Align
6.2 Text Align Last
6.3 Overflow
6.4 Skip Ink
6.5 Text Rendering
6.6 Text Indent
6.7 Text Orientation
6.8 Text Shadow
7 Margin, Rounded Corners, Box Shadow and Z-Index
7.1 Border Radius
8 Nike Logo
9 Display
10 Element Visibility
11 Floating Elements
12 Color Gradients
12.1 Overview
12.2 Gradient Types
13 Filters
13.1 blur()
13.2 brightness()
13.3 contrast()
13.4 grayscale()
13.5 hue-rotate()
13.6 invert()
13.7 opacity()
13.8 saturate()
13.9 sepia()
13.10 drop-shadow()
14 Background Images
14.1 Specifying Multiple Values
14.2 background-position
14.3 Multiple Backgrounds
14.4 Image Transparency
14.5 Multiple Backgrounds
14.6 background-attachment
14.7 background-origin
15 object-fit
16 Borders
16.1 Elliptical Border Radius
17 2D Transforms
17.1 translate
17.2 rotate
17.3 transform-origin
18 3D Transforms
18.1 rotateX
18.2 rotateY and rotateZ
18.3 scale
18.4 translate
18.5 Creating A 3D Cube
19 Flex
19.1 display:flex
19.2 Main-axis and Cross-axis
19.3 Direction
19.4 Wrap
19.5 Flow
19.6 justify-content: value
19.7 align-items
19.8 flex-basis
19.9 flex-grow
19.10 flex-shrink
19.11 order
19.12 justify-items
19.13 Interactive Flex Editor
20 CSS Grid
20.1 CSS Grid Model
21 CSS Grid – Using Template Areas
21.1 CSS Grid & Media Queries
21.1.1 Media Queries
21.1.2 Changing content based on browser size
21.2 Creating Your First CSS Grid
21.3 Implicit Rows and Columns
21.4 grid-auto-rows
21.5 Automatic Column Cell Width
21.6 Gaps
21.7 fr – Fractional Unit – for efficiently sizing the remaining space.
21.8 Working With Fractional Units
22 Fractional Units & Gaps
22.1 Repeating Values
22.2 Spans
22.3 Start and End
22.4 Start and End's Shorthand
22.5 Content Align Within CSS Grid Items
22.6 align-self
22.7 justify-self
22.8 Template Areas
22.9 Naming Grid Lines
23 Animation
23.1 animation
23.2 animation-name
23.3 animation-duration
23.4 animation-delay
23.5 animation-direction
23.6 animation-iteration-count
23.7 animation-timing-function
23.8 animation-fill-mode
23.9 animation-play-state
24 Forward & Inverse Kinematics
25 Sassy CSS / SCSS Manual
25.1 New Syntax
25.2 Prerequisites
25.3 Superset
25.4 Variables
25.5 Nested Rules
25.6 The & character
25.7 Mixins
25.8 Multiple Browsers Example
25.9 Arithmetic Operators
25.9.1 Addition
25.9.2 Subtraction
25.9.3 Multiplication
25.9.4 Division
25.9.5 Remainder
25.9.6 Comparison Operators
25.9.7 Logical Operators
25.9.8 Strings
25.10 Control-Flow Statements
25.10.1 if()
25.10.2 @if
25.10.3 @for
25.10.4 @each
25.10.5 @while
25.11 Sass Functions
25.12 Sass Trigonometry
25.13 Writing your own functions in Sass
25.14 Oscillator Animation
26 Tesla CSS Art