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?
• 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