Simple selectors | In a Rocket

Autoplay
Autocomplete

Previous Lesson Complete and Continue

CSS Fundamentals | Professional

Getting started [updated: Feb-2020]

Environment setup
Context
What & why
Basic syntax
Cascade & styles location
Styles location - CHALLENGE
Reset styles
Reset styles - CHALLENGE

Selectors [updated: Feb-2020]

Simple selectors
Simple selectors - BEM (naming convention for classes)
Simple selectors - CHALLENGE
Attribute selectors
Attribute selectors - CHALLENGE
Pseudo-classes
Pseudo-classes - CHALLENGE
Pseudo-elements
Pseudo-elements - CHALLENGE
Combinators
Combinators - CHALLENGE
Mix & group
Mix & group - CHALLENGE
Specificity
Inheritance

Colors & units

Color
Background
Units

Positioning

Box model
Box model - CHALLENGE
Inline & block [Update: 25-Sep]
Inline & block - CHALLENGE
Position
Float

Visualization

Visualization

Content

Text: font property
Text: other properties
Text: lists
Text: tools
Image

Layout

Flexbox: container & items
Flexbox: direction & wrap
Flexbox: basis - grow - shrink
Flexbox: justify
Flexbox: align
Flexbox - CHALLENGE
CSS Grid: container & items
CSS Grid: explicit & implicit grid
CSS Grid: fraction - minmax - repeat
CSS Grid: grid lines
CSS Grid: grid areas
CSS Grid - CHALLENGE

Real world use cases

Alerts
Buttons
Cards
Grids
Navigation

Teach online with

Simple selectors

CSS-Fundamentals-Selectors-simple.pdf

Download

CSS-Fundamentals-Selectors-simple.pdf

Complete and Continue