CSS notes for professionals

✍ Scribed by Goalkicker.com

• Tongue: English
• Leaves: 244
• Category: Library

✦ Table of Contents

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
Now