CSS Fundamentals Training

PDF

CSS Introduction

• Box Model
  • Content and Sizing
  • Areas of the Box Model
  • Debugging the Box Model
  • Controlling the Box Model
• Selectors
  • Parts of a CSS Rule
  • Simple Selectors
    • Universal Selector
    • Type Selector
    • Class Selector
    • ID Selector
    • Attribute Selector
    • Grouping Selectors
  • Pseudo-Classes and Pseudo-Elements
    • Pseudo-classes
    • Pseudo-element
  • Complex Selectors
    • Combinators
    • Compound Selectors
• The Cascade
  • Position and Order of Appearance
  • Specificity
  • Origin
  • Importance
  • Using DevTools
• Specificity
  
  • Specificity Scoring
  • Scoring Each Selector Type
    • Universal Selector
    • Element or Pseudo-element Selector
    • Class, Pseudo-class, or Attribute Selector
    • ID Selector
    • Inline Style Attribute
    • !important Rule
  • Specificity in Context
  • Visualizing Specificity
  • Pragmatically Increasing Specificity
  • Matching Specificity Score = Newest Instance Win
• Inheritance
  • Inheritance Flow
  • Which Properties are Inheritable?
  • How Inheritance Works
  • How to Explicitly Inherit and Control Inheritance
    • The inherit keyword
    • The initial keyword
    • The unset keyword
• Color
  
  • Numeric Colors
    • Hex Colors
    • RGB (Red, Green, Blue)
    • HSL (Hue, Saturation, Lightness)
  • Color Keywords
• Sizing Units
  • Numbers
  • Percentages
  • Dimensions and Lengths
    • Absolute Lengths
    • Relative Lengths
  • Miscellaneous Units
    • Angle Units
• Layout
  • Layout: A Brief History
  • Layout: The Present and Future
  • Understanding the Display Property
  • Flexbox and Grid
    • Flexbox
    • Grid
  • Flow Layout
    • Inline Block
    • Floats
    • Multicolumn Layout
    • Positioning
• Flexbox
  • What can you do with Flex Layout?
  • The Main Axis and the Cross Axis
  • Creating a Flex Container
  • Controlling the Direction of Items
    • Reversing the Flow of Items and Accessibility
    • Writing Modes and Direction
  • Wrapping Flex Items
    • The Flex-Flow Shorthand
  • Controlling Space Inside Flex Items
    • Allowing Items to Grow at Different Rates
  • Reordering Flex Items
  • Flexbox Alignment Overview
  • Distributing Space on the Main Axis
    • With flex-direction:column
  • Distributing Space Between Flex Lines
    • The place-content Shorthand
  • Aligning Items on the Cross-Axis
  • Why is there no justify-self in Flexbox?
  • How to Center an Item Vertically and Horizontally
• Grid
  • Overview
  • Grid Terminology
    • Grid Lines
    • Grid Tracks
    • Grid Cell
    • Grid Area
    • Gaps
    • Grid Container
    • Grid Item
  • Rows and Columns
    • Intrinsic Sizing Keywords
    • The fr Unit
    • The minmax() Function
    • repeat() Notation
    • auto-fill and auto-fit
  • Auto-placement
    • Placing Items in Columns
    • Spanning Tracks
    • Filling Gaps
  • Placing Items
    • Stacking Items
    • Negative Line Numbers
  • Named Grid Lines
  • Grid Template Areas
  • Shorthand Properties
    • grid-template
    • grid property
  • Alignment
    • Distributing Extra Space
    • Moving Content Around
• Logical Properties
  • Terminology
  • Block Flow
  • Inline Flow
  • Flow Relative
  • Sizing
  • Start and End
  • Spacing and Positioning
  • Borders
  • Units
  • Using Logical Properties Pragmatically
  • Solving the Icon Issue
  • Browser Support
• Spacing
  • HTML Spacing
  • Margin
    • Negative Margin
    • Margin Collapse
  • Padding
  • Positioning
  • Grid and Flexbox
  • Creating Consistent Spacing
• Pseudo-elements
  • ::before and ::after
  • ::first-letter
  • ::first-line
  • ::backdrop
  • ::marker
  • ::selection
  • ::placeholder
  • ::cue
• Pseudo-classes
  • Interactive States
    • :hover
    • :active
    • :focus, :focus-within, and :focus-visible
    • :target
  • Historic States
    • :link
    • :visited
  • Form States
    • :disabled and :enabled
    • :checked and :indeterminate
    • :placeholder-shown
    • Validation States
  • Selecting Elements by Their Index, Order, and Occurrence
    • first-child and last-child
    • only-child
    • :first-of-type and :last-of-type
  • Finding Empty Elements
    • :empty
  • Finding and Excluding Multiple Elements
    • :is()
• Borders
  • Border Properties
    • Style
    • Shorthand
    • Color
    • Width
  • Logical Properties
  • Border Radius
  • Border Images
    • border-image-source
    • border-image-slice
    • border-image-repeat
• Shadows
  • Box Shadow
    • Multiple Shadows
    • Properties Affecting Box-Shadow
  • Text Shadow
    • Multiple Shadows
  • Drop Shadow
• Focus
  • Why is Focus Important?
  • How Elements Get Focus
  • Styling Focus
• Z-Index and Stacking Contexts
  • Z-Index
  • Negative Z-Index
  • Stacking Context
  • Creating a Stacking Context
• Functions
  • What is a Function?
  • Functional Selectors
  • Custom Properties and var()
  • Functions that Return a Value
  • Color Functions
  • Mathematical Expressions
    • calc()
    • min() and max()
    • clamp()
  • Shapes
  • Transforms
    • Rotation
    • Scale
    • Translate
    • Skewing
    • Perspective
  • Animation Functions, Gradients, and Filters
• Gradients
  • Linear Gradient
  • Radial Gradient
  • Conic Gradient
  • Repeating and Mixing
• Animations
  • What is a Keyframe?
    • @keyframes
  • The Animation Properties
    • animation-duration
    • animation-timing-function
    • animation-iteration-count
    • animation-direction
    • animation-delay
    • animation-play-state
    • animation-fill-mode
    • The animation shorthand
  • Considerations when Working with Animation
• Filters
  • The Filter Property
    
    • blur
    • brightness
    • contrast
    • grayscale
    • invert
    • opacity
    • saturate
    • sepia
    • hue-rotate
    • drop-shadow
    • url
• Blend Modes
  • What is a Blend Mode?
  • Browser Compatibility
    • mix-blend-mode
    • background-blend-mode
  • Separable Blend Modes
    • Normal
    • Multiply
    • Screen
    • Overlay
    • Darken
    • Lighten
    • Color Dodge
    • Color Burn
    • Hard Light
    • Soft Light
    • Difference
    • Exclusion
  • Non-Separable Blend Modes
    • Hue
    • Saturation
    • Color
    • Luminosity
• Lists
  • Creating a List
  • List Styles
    • list-style-position
    • list-style-image
    • list-style-type
    • list-style shorthand
  • ::marker pseudo
    • Marker Box
    • Marker Styles
  • Display Type
• Transitions
  • Transition Properties
    • transition-property
    • transition-duration
    • transition-timing-function
    • transition-delay
    • shorthand:transition
  • What can and can't Transition?
    • Transform
    • Color
    • Shadows
    • Filters
  • Transition Triggers
  • Different Transitions for Enter or Exit
  • Accessibility Considerations
  • Performance Considerations
• Overflow
  • Single Line Overflow with text-overflow
  • Using Overflow Properties
    • Scrolling on the Vertical and Horizontal Axis
    • Logical Properties for Scroll Direction
    • The Overflow Shorthand
  • Scrolling and Overflow
    • Scrolling and Accessibility
    • Scrollbar Positioning within the Box Model
    • root-scroller vs. implicity-scroller
    • scroll-behavior
    • overscroll-behavior
• Backgrounds
  • Backgrounds
  • Background Color
  • Background Images
  • Repeating Background Images
  • Background Position
  • Background Size
  • Background Attachment
  • Background Origin
  • Background Clip
  • Multiple Backgrounds
  • The background shorthand
• Text and Typography
  • Change the Typeface
  • Use Italic and Oblique Fonts
  • Make Text Bold
  • Change the Size of Text
  • Change the Space Between Lines
  • Change the Space Between Characters
  • Change the Space Between Words
  • font shorthand
  • Change the Case of Text
  • Add Underlines, Overlines, and Through-Lines to Text
  • Add an Indent to Your Text
  • Deal with Overflowing or Hidden Content
  • Control white-space
  • Control How Words Break
  • Change Text Alignment
  • Change the Direction of Text
  • Change the Flow of Text
  • Change the Orientation of Text
  • Add a Shadow to Text
  • Variable Fonts
  • Pseudo-elements
  • ::first-letter and ::first-line pseudo-elements
  • ::selection pseudo-element
  • font-variant

Before Taking this Class

Software/Setup For this Class

Any text editor