CSS Fundamentals Training

Course Overview

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?

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

    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

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