Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Learn CSS3 Selectors, Cascade, Specificity and CSS Basics
Introduction
Course Overview
Setting up Our Working Environment
Checking Our Development Tools
HTML Fundamentals
What is HTML?
Basic Structure of an HTML Document
Understanding HTML Elements, Tags and Attributes
HTML Block and Inline Elements
HTML5 - Structurally and Semantically Strong HTML
Getting Started with CSS
What is CSS?
Understanding CSS Syntax
Vendor Prefixes
Creating the Base Project
Adding Comments to Our First Code - HTML and CSS Comments
Bringing CSS and HTML Together
Inline Styles - Adding Styles Directly on HTML Elements
Internal Styles - Adding Styles with Style Tag in Header
External Styles - Adding Styles with Link Tag
Importing Styles - Adding Styles with @import Rule
Bonus: Adding Styles with JavaScript
Basic CSS Selectors
Element Selector
Class Selector
Lab Session: Grouping Class and Element Selectors
Id Selector
Descendant Selector
Lab Session: Combinations of Elements, Classes and Ids
Universal Selector
Lab Session: Universality in Context
The Combinators
What is CSS Combinator?
Child Combinator
Adjacent Sibling Combinator
General Sibling Combinator
Lab Session: Understanding All Combinators Together
Attribute Selectors
Attribute Exists Selector
Attribute Equals Selector
Lab Session: Selecting Ids and Classes with Attribute Equals Selector
Attribute Spaced Selector
Attribute Hyphenated Selector
Attribute Begins With Selector
Attribute Ends With Selector
Attribute Contains Selector
Lab Session: Selecting Elements with Multiple Attributes
Pseudo Class Selectors
What are Pseudo Classes?
Dynamic Pseudo Classes
Lab Session: Improving Our Links with Pseudo Classes
Lab Session: Selecting Parent when Focus on Children and Descendants
Target Pseudo Class
Language Pseudo Class
The UI Element States Pseudo Classes
Structural Pseudo Classes
Selecting the Root Element
Selecting Empty Elements
Selecting the Child Elements
Lab Session: Simple Rating System with :nth-child() Pseudo Class
Selecting Child Elements of a Particular Type
Lab Session: Understanding Type Specific Child Selectors
Negation Pseudo Class
Lab Session: Using Multiple Negation Pseudo Class on the Same Element
Lab Session: Combining Pseudo Classes
Pseudo Element Selectors
What are Pseudo Elements?
Selecting the First Line
Selecting the First Letter
Lab Session: Stylish Texts by Using ::first-line and ::first-letter
Style the Text Selection
Generating Content Before and After an Element
Lab Session: Styling First Line and First Letter of Generated Contents
Lab Session: Adding Emojis to Our Links - Improving Our Links
Lab Session: Combining Pseudo Elements with Pseudo Classes
Specificity and the Cascade
What Is CSS Inheritance?
Lab Session: Forcing Inheritance to Elements
The Specificity
The !important Rule - Breaking the Specificity
The Cascade - The “C” in CSS
Display Types
Understanding Display Property
Display: Block
Display: Inline
Display: Inline-Block
Display: None
Lab Session: Improving Our Links with Pseudo Classes
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock