Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Learn CSS3 Selectors, Cascade, Specificity and CSS Basics
Introduction
Course Overview (1:07)
Setting up Our Working Environment (1:24)
Checking Our Development Tools (3:47)
HTML Fundamentals
What is HTML? (4:21)
Basic Structure of an HTML Document (3:08)
Understanding HTML Elements, Tags and Attributes (3:26)
HTML Block and Inline Elements (3:23)
HTML5 - Structurally and Semantically Strong HTML (3:53)
Getting Started with CSS
What is CSS? (3:45)
Understanding CSS Syntax (3:37)
Vendor Prefixes (4:23)
Creating the Base Project (3:46)
Adding Comments to Our First Code - HTML and CSS Comments (4:32)
Bringing CSS and HTML Together
Inline Styles - Adding Styles Directly on HTML Elements (3:39)
Internal Styles - Adding Styles with Style Tag in Header (3:37)
External Styles - Adding Styles with Link Tag (4:10)
Importing Styles - Adding Styles with @import Rule (4:42)
Bonus: Adding Styles with JavaScript (4:11)
Basic CSS Selectors
Element Selector (3:07)
Class Selector (3:49)
Lab Session: Grouping Class and Element Selectors (5:32)
Id Selector (3:39)
Descendant Selector (5:54)
Lab Session: Combinations of Elements, Classes and Ids (7:51)
Universal Selector (3:03)
Lab Session: Universality in Context (5:03)
The Combinators
What is CSS Combinator? (3:59)
Child Combinator (4:14)
Adjacent Sibling Combinator (3:34)
General Sibling Combinator (4:45)
Lab Session: Understanding All Combinators Together (6:09)
Attribute Selectors
Attribute Exists Selector (5:29)
Attribute Equals Selector (3:29)
Lab Session: Selecting Ids and Classes with Attribute Equals Selector (4:08)
Attribute Spaced Selector (3:46)
Attribute Hyphenated Selector (4:08)
Attribute Begins With Selector (2:52)
Attribute Ends With Selector (3:33)
Attribute Contains Selector (4:19)
Lab Session: Selecting Elements with Multiple Attributes (4:47)
Pseudo Class Selectors
What are Pseudo Classes? (2:31)
Dynamic Pseudo Classes (7:10)
Lab Session: Improving Our Links with Pseudo Classes (7:51)
Lab Session: Selecting Parent when Focus on Children and Descendants (8:22)
Target Pseudo Class (4:56)
Language Pseudo Class (4:23)
The UI Element States Pseudo Classes (6:13)
Structural Pseudo Classes (3:14)
Selecting the Root Element (2:35)
Selecting Empty Elements (4:04)
Selecting the Child Elements (12:16)
Lab Session: Simple Rating System with :nth-child() Pseudo Class (10:45)
Selecting Child Elements of a Particular Type (5:07)
Lab Session: Understanding Type Specific Child Selectors (5:57)
Negation Pseudo Class (5:34)
Lab Session: Using Multiple Negation Pseudo Class on the Same Element (4:58)
Lab Session: Combining Pseudo Classes (4:06)
Pseudo Element Selectors
What are Pseudo Elements? (2:10)
Selecting the First Line (3:07)
Selecting the First Letter (2:10)
Lab Session: Stylish Texts by Using ::first-line and ::first-letter (3:58)
Style the Text Selection (5:23)
Generating Content Before and After an Element (7:05)
Lab Session: Styling First Line and First Letter of Generated Contents (4:02)
Lab Session: Adding Emojis to Our Links - Improving Our Links (8:03)
Lab Session: Combining Pseudo Elements with Pseudo Classes (5:07)
Specificity and the Cascade
What Is CSS Inheritance? (7:42)
Lab Session: Forcing Inheritance to Elements (3:54)
The Specificity (11:00)
The !important Rule - Breaking the Specificity (5:34)
The Cascade - The “C” in CSS (8:36)
Display Types
Understanding Display Property (3:00)
Display: Block (5:16)
Display: Inline (3:06)
Display: Inline-Block (2:50)
Display: None (2:04)
Lab Session: Selecting Parent when Focus on Children and Descendants
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock