Box Model Components
5 Sub-topics
Understanding the Box Model Concept
Padding – Adding Inner Spacing
Padding Shorthand Properties
Padding with Different Units
Border – Styling Element Boundaries
Border Shorthand Property
Border Radius – Rounded Corners
Creating Circles and Ellipses
Margins and Box Sizing
9 Sub-topics
Margin – Adding Outer Spacing
Margin Shorthand Properties
Margin Auto for Centering
Negative Margins Explained
Margin Collapse – Understanding the Behavior
Preventing Margin Collapse
box-sizing: content-box Explained
box-sizing: border-box Explained
Outline and Debugging
5 Sub-topics
Outline vs Border Differences
Box Model in Developer Tools
Debugging Box Model Issues
Background Basics
10 Sub-topics
background-color Property
background-image Property
Using URL for Background Images
background-repeat Options
background-position Property
background-position with Keywords
background-position with Values
background-size: cover Explained
background-size: contain Explained
Background Advanced Properties
8 Sub-topics
background-attachment Property
Fixed Background Effect (Parallax)
background-origin Property
background-clip: text Effect
Background Shorthand Property
Multiple Background Images
Layering Multiple Backgrounds
CSS Gradients
13 Sub-topics
Linear Gradients Introduction
Linear Gradient Directions
Linear Gradient Color Stops
Creating Smooth Gradients
Hard Color Stops for Stripes
Radial Gradients Introduction
Radial Gradient Positioning
Repeating Linear Gradients
Repeating Radial Gradients
Repeating Conic Gradients
Gradient Patterns and Textures
Background Blend Modes
4 Sub-topics
Combining Gradients with Images