Introduction to CSS

• Lesson Introduction
• Introducing CSS
• Inline vs Internal vs External CSS
• Commenting in CSS
• Assignment: Link a CS File Externally

Selectors

• Introduction to Selectors
• Class and ID Selectors
• Universal and Type Selectors
• DOM Tree and Element Relationships
• CSS Combinators, Explained
• Inheritance
• Inherit vs Initial
• Debugging with Developer tools
• CSS troubleshooting
• Assignment: Optimize your code
• Assignment: Match the Described Styles

Specificity

• Introducing Specificity
• Calculating Specify
• Using! important
• ! important declaration
• Assignment: Calculate Better Specificity

Pseudo Class

• Introduction to Pseudo Class
• What is a Pseudo Class?
• Using Pseudo class
• Pseudo-Classes
• Selector Parsing with Pseudo Classes
• Pseudo-Elements
• Assignment: Style your content using: hover
• Assignment: Style different types of links using Pseudo-classes
• Assignment: Create CSS Pseudo-elements

Box Model

• Lesson Introduction
• What is the Box Model?
• Box Model Dimensions
• Content Categories
• Content Categories Cheat sheet

Padding

• Introducing CSS Padding
• Padding vs Border vs Margin vs Outline
• Assignment: Align Content with Padding

CSS Borders

• Introducing CSS Borders
• CSS Borders: Colors
• CSS Borders: Images
• Assignment: Create given Figures

CSS Margins

• Introducing CSS margins
• CSS Margins
• Collapsing margins
• Assignment: Give margin to Previous elements

CSS Outlines

• Introducing CSS Outline
• CSS Outline
• Shorthand
• Assignment: Recreate a given layout

CSS Display

• Lesson introduction
• Introducing Display
• Display Property
• Visibility
• Assignment: Practice Display and visibility

CSS Units and Values

• Introduction to CSS Units and Values
• Units and Values
• Absolute Units: Pixels
• Relative Values
• Assignment: Create Interactive Components

CSS Positioning and Index

• Lesson Introduction
• Positioning Elements
• Positioning static and relative
• Index
• Assignment: Create a card Deck
• Absolute Positioning
• Fixed and sticky Positioning
• Assignment: Create a sticky navigation Bar

CSS Wrap and axis

• Lesson Introduction
• Overflow Introduction
• Overflow: wrap and Axis
• Assignment: Create a fixed banner

CSS Float and Clear

• Introduction to Floats
• Float and Clear
• Block formatting
• Create new Block formatting contents