LetCodes

Learn CSS

This is a starter landing page for CSS. Replace this paragraph with a short, friendly description of the topic and what readers will learn from the tutorial series.

Tutorial contents

What is CSS?
How CSS Works
CSS History & Evolution
Setup & Tools
Your First Stylesheet
Applying CSS (inline, internal, external)
How Browsers Render CSS
DevTools for CSS
Selectors Overview
Type, Class & ID Selectors
Attribute Selectors
Combinators (descendant, child, sibling)
Universal Selector (*)
Grouping Selectors
Pseudo-Classes Overview
Pseudo-Elements Overview
The Cascade
Specificity
Calculating Specificity
Inheritance
!important
initial, inherit, unset, revert
Cascade Layers (@layer)
The Box Model
content-box vs border-box
Margin
Margin Collapse
Padding
Border
Border Radius
Outline
box-sizing
width, height, min/max sizing
overflow
visibility vs display:none
CSS Values Overview
Absolute Units (px, cm, pt)
Relative Units (em, rem, %)
Viewport Units (vw, vh, svh, dvh)
ch, ex, cap & other type units
CSS Functions (calc, min, max, clamp)
calc()
min(), max() & clamp()
Color Values (hex, rgb, hsl, oklch)
CSS Custom Properties (Variables)
Using var() & Fallbacks
Scope, Inheritance & Theming
Typography Overview
font-family
Web Fonts & @font-face
Google Fonts
font-size
font-weight
font-style & font-variant
line-height
letter-spacing & word-spacing
text-transform
text-decoration
text-align & text-indent
text-overflow, white-space, word-break
vertical-align
writing-mode & text-orientation
Variable Fonts
font shorthand & system fonts
Colors in CSS
hex, rgb() & hsl()
oklch() & Modern Color Spaces
color-mix() & relative colors
opacity & alpha transparency
background-color
background-image
Gradients (linear, radial, conic)
background-size & background-position
background-repeat & origin & clip
background-attachment
Multiple Backgrounds
background shorthand
color-scheme & prefers-color-scheme
Layout Fundamentals Overview
Normal Flow
display property
The display Property In-Depth
Block vs Inline vs Inline-Block
Block vs Inline Formatting Contexts
inline-block Deep Dive
vertical-align in Layout
overflow in Layout Contexts
Positioning (static, relative, absolute, fixed, sticky)
Positioning Overview
position: static & relative
position: relative
position: absolute
Absolute Positioning Deep Dive
position: fixed
Fixed Positioning Deep Dive
position: sticky
Containing Blocks
z-index & Stacking Contexts
How Stacking Contexts Work
Float & Clear
Clearing Floats — All Techniques
The float Property
Multi-Column Layout (columns)
table display values
aspect-ratio
Flexbox Introduction
Flex Container Properties
flex-direction & flex-wrap
justify-content
align-items & align-content
gap (row-gap & column-gap)
Flex Item Properties
flex-grow & flex-shrink
flex-basis & the flex shorthand
align-self & order
Flexbox Patterns & Use Cases
Flexbox vs Grid — when to use each
The flex Shorthand Property
flex Shorthand Deep Dive
Flex Item Sizing
flex-wrap Deep Dive
Gaps & Alignment in Flexbox
Responsive Flexbox for Mobile
Advanced Flexbox Techniques
Debugging Flexbox Layouts
align-content Deep Dive
align-self & order Deep Dive
CSS Grid Introduction
grid-template-columns & rows
grid-template-areas
The fr Unit
minmax()
repeat(), auto-fill & auto-fit
gap in Grid
Grid Item Placement
grid-column & grid-row
grid-area
Named Grid Lines
Auto Placement & grid-auto-flow
Implicit vs Explicit Grid
Subgrid
Alignment in Grid (justify & align)
Grid Patterns & Use Cases
Grid Auto-Sizing (auto-fit/auto-fill)
Responsive Design Overview
Media Queries (@media)
Breakpoints Strategy
Mobile-First vs Desktop-First
Viewport Meta Tag
Fluid Typography
Fluid Spacing & Sizing
Responsive Images
Container Queries (@container)
CSS Logical Properties
Intrinsic Sizing (fit-content, min-content, max-content)
CSS Transforms Overview
translate()
rotate()
scale()
skew()
matrix()
transform-origin
3D Transforms
perspective & perspective-origin
backface-visibility
Individual Transform Properties
CSS Transitions Overview
transition-property
transition-duration & delay
Timing Functions (ease, cubic-bezier, steps)
transition shorthand
Transition Patterns & Best Practices
CSS Transitions Deep Dive
CSS Animations Overview
@keyframes
animation-name & duration
animation-timing-function & delay
animation-iteration-count & direction
animation-fill-mode
animation-play-state
animation shorthand
Scroll-Driven Animations
View Transitions API
prefers-reduced-motion
Animation Patterns & Examples
CSS Animations Deep Dive
box-shadow
text-shadow
CSS Filters (blur, brightness, contrast)
backdrop-filter
clip-path
mask & mask-image
mix-blend-mode & isolation
object-fit & object-position
CSS Shapes
image-rendering & rendering hints
Structural Pseudo-Classes (:nth-child, :first-of-type)
:nth-child() & :nth-of-type() formulas
:not(), :is() & :where()
:has() — the parent selector
User-Action Pseudo-Classes (:hover, :focus, :active)
:focus-visible & :focus-within
Link Pseudo-Classes (:link, :visited, :any-link)
Form State Pseudo-Classes (:checked, :disabled, :valid)
:placeholder-shown, :empty & :blank
::before & ::after
::first-line & ::first-letter
::selection
::marker
::backdrop
::placeholder
Pseudo-Element Patterns
Styling Form Elements
Input, Textarea & Select Styling
Custom Checkboxes & Radios
Custom Select Menus
Styling Range Sliders
Form Validation Styles
appearance property
Styling Buttons
Form UI Patterns
Focus Styles & Keyboard Navigation
Color Contrast & Readability
Dark Mode (prefers-color-scheme)
High Contrast & forced-colors
Accessible Animations
CSS Theming with Custom Properties
Print Styles (@print)
CSS Nesting
@property — typed custom properties
Container Style Queries
:has() Advanced Patterns
Modern Color Functions
Anchor Positioning
@scope
@starting-style (entry animations)
CSS Houdini Overview
CSS Paint API (Houdini)
CSS Typed Object Model
env() — safe areas & environment variables
Modern CSS Features Roundup
scroll-behavior & smooth scrolling
Scroll Snap
Scrollbar Styling
overscroll-behavior
overflow: clip vs hidden vs scroll
CSS Architecture Overview
BEM Methodology
SMACSS
OOCSS
Utility-First CSS
CUBE CSS
ITCSS
Component-Scoped CSS
CSS-in-JS Overview
Naming Conventions
Sass / SCSS Introduction
Sass Variables & Nesting
Sass Mixins & Functions
Sass @extend & Placeholders
Sass Partials & @use / @forward
Sass Control Directives (@each, @for, @if)
PostCSS
Less Overview
CSS Modules
Tailwind CSS Introduction
Tailwind Configuration & Theming
Bootstrap Overview
CSS Reset & Normalize
CSS in Build Tools (Vite, Webpack)
Stylelint
Autoprefixer & Vendor Prefixes
CSS Performance Overview
Critical CSS
Repaints & Reflows
will-change
CSS Containment (contain)
content-visibility & intrinsic-size
Selector Performance
Font Loading Performance (font-display)
Layer Promotion & Compositor
Browser Compatibility Overview
Using Can I Use
Vendor Prefixes
@supports Feature Queries
Progressive Enhancement & Graceful Degradation
CSS Polyfills
Baseline & Interop
Debugging CSS
Inspecting the Box Model in DevTools
Debugging Flexbox & Grid in DevTools
Cascade Inspector in DevTools
Debugging Animations in DevTools
Common CSS Bugs & Fixes
Centering Techniques
The Stack Layout
The Cluster Layout
The Sidebar Layout
The Switcher Layout
The Cover Layout
Advanced Grid Patterns
Holy Grail Layout
Sticky Footer Patterns
Card Patterns
Navbar & Header Patterns
Modal & Dialog Patterns
Tooltip Patterns
Responsive Tables
Image Gallery Layouts
CSS At-Rules Overview
@media
@import
@font-face
@keyframes reference
@counter-style
CSS Comments & Organization
CSS Cheat Sheet
Selectors Cheat Sheet
Flexbox Cheat Sheet
Grid Cheat Sheet
Common CSS Mistakes
Common Interview Questions
Project Ideas to Build
Further Learning Resources