CSS3 Mastery

What CSS is, how it works, and the three ways to use it.

1. What is CSS and How It WorksVideo 8 min
2. ·
   Three Ways to Add CSSLesson · Complete the previous lesson first
3. ·
   How the Browser Applies StylesVideo · Complete the previous lesson first 7 min
4. ·
   Your First StylesheetLesson · Complete the previous lesson first

Target exactly the elements you want to style.

1. ·
   Element, Class, and ID SelectorsLesson · Complete the previous lesson first
2. ·
   Grouping and Chaining SelectorsLesson · Complete the previous lesson first
3. ·
   Descendant vs Child SelectorsVideo · Complete the previous lesson first 7 min
4. ·
   Adjacent and General Sibling SelectorsLesson · Complete the previous lesson first
5. ·
   Attribute SelectorsLesson · Complete the previous lesson first
6. ·
   Universal Selector and the ResetLesson · Complete the previous lesson first
7. ·
   Style a Page Using Only SelectorsPractice · Complete the previous lesson first

Understand how the browser decides which style wins.

1. ·
   What is the CascadeVideo · Complete the previous lesson first 8 min
2. ·
   Specificity — How the Browser Decides Who WinsVideo · Complete the previous lesson first 9 min
3. ·
   Inheritance — What Passes Down and What Does NotLesson · Complete the previous lesson first
4. ·
   !important — When and Why to Avoid ItLesson · Complete the previous lesson first
5. ·
   :is(), :where(), :not() Specificity TricksLesson · Complete the previous lesson first

Every element is a box. Master its four layers.

1. ·
   margin, border, padding, contentVideo · Complete the previous lesson first 9 min
2. ·
   box-sizing: border-box — Why Everyone Uses ItLesson · Complete the previous lesson first
3. ·
   width, height, min-* and max-*Lesson · Complete the previous lesson first
4. ·
   overflowLesson · Complete the previous lesson first
5. ·
   outline vs borderLesson · Complete the previous lesson first
6. ·
   Box Model Debugging ChallengePractice · Complete the previous lesson first

Control fonts, sizes, spacing, and text appearance.

1. ·
   font-family and Web Safe FontsLesson · Complete the previous lesson first
2. ·
   Google Fonts and @font-faceLesson · Complete the previous lesson first
3. ·
   font-size — px, rem, em, %Video · Complete the previous lesson first 8 min
4. ·
   font-weight, font-style, font-variantLesson · Complete the previous lesson first
5. ·
   line-height, letter-spacing, word-spacingLesson · Complete the previous lesson first
6. ·
   text-align, text-decoration, text-transformLesson · Complete the previous lesson first
7. ·
   text-shadow, text-overflow, white-spaceLesson · Complete the previous lesson first
8. ·
   @font-face Deep DiveLesson · Complete the previous lesson first

Colours, backgrounds, gradients, and blending.

1. ·
   Color Formats — named, hex, rgb, hslVideo · Complete the previous lesson first 8 min
2. ·
   opacity and rgba / hslaLesson · Complete the previous lesson first
3. ·
   CSS Custom Properties for ColorLesson · Complete the previous lesson first
4. ·
   background-color and background-imageLesson · Complete the previous lesson first
5. ·
   background-size, background-position, background-repeatLesson · Complete the previous lesson first
6. ·
   background-attachment, background-clip, background-originLesson · Complete the previous lesson first
7. ·
   Multiple BackgroundsLesson · Complete the previous lesson first
8. ·
   linear-gradient(), radial-gradient(), conic-gradient()Video · Complete the previous lesson first 9 min
9. ·
   Hero Section — Colors and Backgrounds OnlyPractice · Complete the previous lesson first

px, rem, em, vw, vh, and the powerful CSS math functions.

1. ·
   Absolute Units — px, pt, cmLesson · Complete the previous lesson first
2. ·
   Relative Units — em, rem, %, vw, vhVideo · Complete the previous lesson first 9 min
3. ·
   vmin, vmax, dvh, svhLesson · Complete the previous lesson first
4. ·
   calc(), min(), max(), clamp()Video · Complete the previous lesson first 8 min
5. ·
   currentColor and Keyword ValuesLesson · Complete the previous lesson first

Control how elements sit in the page and how they are positioned.

1. ·
   display — block, inline, inline-block, noneLesson · Complete the previous lesson first
2. ·
   position — static, relative, absolute, fixed, stickyVideo · Complete the previous lesson first 10 min
3. ·
   top, right, bottom, left — How They Actually WorkLesson · Complete the previous lesson first
4. ·
   z-index and Stacking ContextsVideo · Complete the previous lesson first 8 min
5. ·
   float and clear — Legacy but Still RealLesson · Complete the previous lesson first
6. ·
   Fix the Broken Layout — Positioning ChallengePractice · Complete the previous lesson first

One-dimensional layout — the modern standard for rows and columns.

1. ·
   What Flexbox SolvesVideo · Complete the previous lesson first 7 min
2. ·
   display: flex and the Flex ContainerLesson · Complete the previous lesson first
3. ·
   flex-direction, flex-wrap, flex-flowLesson · Complete the previous lesson first
4. ·
   justify-content — Main Axis AlignmentVideo · Complete the previous lesson first 8 min
5. ·
   align-items and align-selfLesson · Complete the previous lesson first
6. ·
   align-content — Multi-line BehaviorLesson · Complete the previous lesson first
7. ·
   flex-grow, flex-shrink, flex-basisVideo · Complete the previous lesson first 9 min
8. ·
   The flex ShorthandLesson · Complete the previous lesson first
9. ·
   order and Visual ReorderingLesson · Complete the previous lesson first
10. ·
    gap, row-gap, column-gapLesson · Complete the previous lesson first
11. ·
    Navigation Bar + Card Row — Flexbox OnlyPractice · Complete the previous lesson first

Two-dimensional layout — rows and columns at the same time.

1. ·
   What Grid Solves and When to Use It vs FlexboxVideo · Complete the previous lesson first 8 min
2. ·
   display: grid and the Grid ContainerLesson · Complete the previous lesson first
3. ·
   grid-template-columns and grid-template-rowsLesson · Complete the previous lesson first
4. ·
   fr Unit and repeat()Video · Complete the previous lesson first 7 min
5. ·
   grid-gap, column-gap, row-gapLesson · Complete the previous lesson first
6. ·
   grid-column and grid-row — Placing ItemsLesson · Complete the previous lesson first
7. ·
   grid-area and Named AreasVideo · Complete the previous lesson first 9 min
8. ·
   auto-fill vs auto-fitVideo · Complete the previous lesson first 7 min
9. ·
   minmax() and fit-content()Lesson · Complete the previous lesson first
10. ·
    Implicit vs Explicit GridLesson · Complete the previous lesson first
11. ·
    SubgridLesson · Complete the previous lesson first
12. ·
    Full Page Layout — Grid OnlyPractice · Complete the previous lesson first

Style elements based on state, position, and generated content.

1. ·
   :hover, :focus, :active, :visitedLesson · Complete the previous lesson first
2. ·
   :nth-child(), :nth-of-type(), :last-childVideo · Complete the previous lesson first 8 min
3. ·
   :checked, :disabled, :required, :valid, :invalidLesson · Complete the previous lesson first
4. ·
   :empty, :not(), :has()Video · Complete the previous lesson first 7 min
5. ·
   ::before, ::after and the content PropertyVideo · Complete the previous lesson first 9 min
6. ·
   ::placeholder, ::selection, ::markerLesson · Complete the previous lesson first
7. ·
   Style a Form Using Only Pseudo-classesPractice · Complete the previous lesson first

Bring your UI to life with smooth motion.

1. ·
   transition - property, duration, timing-function, delayVideo · Complete the previous lesson first 9 min
2. ·
   transition-timing-function - ease, cubic-bezierVideo · Complete the previous lesson first 8 min
3. ·
   @keyframes - Defining AnimationsLesson · Complete the previous lesson first
4. ·
   animation ShorthandLesson · Complete the previous lesson first
5. ·
   animation-fill-mode and animation-play-stateLesson · Complete the previous lesson first
6. ·
   will-change and PerformanceLesson · Complete the previous lesson first
7. ·
   Respecting prefers-reduced-motionLesson · Complete the previous lesson first
8. ·
   Animated Loading Spinner + Button InteractionsPractice · Complete the previous lesson first

Move, scale, rotate, and flip elements in 2D and 3D.

1. ·
   transform - translate(), scale(), rotate(), skew()Lesson · Complete the previous lesson first
2. ·
   transform-originLesson · Complete the previous lesson first
3. ·
   3D Transforms - rotateX(), rotateY(), perspective()Video · Complete the previous lesson first 9 min
4. ·
   transform-style: preserve-3dVideo · Complete the previous lesson first 8 min
5. ·
   Combining Transforms - Order MattersLesson · Complete the previous lesson first

Build layouts that work on every screen size.

1. ·
   What is Responsive DesignVideo · Complete the previous lesson first 7 min
2. ·
   @media Queries - Syntax and BreakpointsLesson · Complete the previous lesson first
3. ·
   Mobile First vs Desktop FirstLesson · Complete the previous lesson first
4. ·
   @media - width, orientation, hover, pointerLesson · Complete the previous lesson first
5. ·
   Responsive Typography with clamp()Lesson · Complete the previous lesson first
6. ·
   Responsive Images - max-width and object-fitLesson · Complete the previous lesson first
7. ·
   Container Queries @containerVideo · Complete the previous lesson first 8 min
8. ·
   Responsive Landing Page - 3 BreakpointsPractice · Complete the previous lesson first

CSS variables - the foundation of scalable design systems.

1. ·
   Declaring and Using --variablesLesson · Complete the previous lesson first
2. ·
   Scope - :root vs Component LevelVideo · Complete the previous lesson first 8 min
3. ·
   Fallback ValuesLesson · Complete the previous lesson first
4. ·
   Updating Variables with JavaScriptLesson · Complete the previous lesson first
5. ·
   Building a Theme System with Custom PropertiesVideo · Complete the previous lesson first 9 min
6. ·
   Light / Dark Theme Toggle - CSS OnlyPractice · Complete the previous lesson first

Master the full range of CSS functions.

1. ·
   var(), env(), attr()Lesson · Complete the previous lesson first
2. ·
   calc() in Real LayoutsLesson · Complete the previous lesson first
3. ·
   min(), max(), clamp() for Fluid DesignLesson · Complete the previous lesson first
4. ·
   rgb(), hsl(), oklch()Lesson · Complete the previous lesson first
5. ·
   url() and format() in Backgrounds and FontsLesson · Complete the previous lesson first
6. ·
   image-set() for Resolution SwitchingLesson · Complete the previous lesson first

Photoshop-style effects directly in CSS.

1. ·
   filter - blur, brightness, contrast, grayscale, drop-shadowVideo · Complete the previous lesson first 9 min
2. ·
   backdrop-filterVideo · Complete the previous lesson first 7 min
3. ·
   mix-blend-modeLesson · Complete the previous lesson first
4. ·
   background-blend-modeLesson · Complete the previous lesson first
5. ·
   Image Card with Hover Filter EffectsPractice · Complete the previous lesson first

Structure your CSS for scale and maintainability.

1. ·
   @layer - Controlling the CascadeVideo · Complete the previous lesson first 9 min
2. ·
   @scopeLesson · Complete the previous lesson first
3. ·
   CSS NestingVideo · Complete the previous lesson first 7 min
4. ·
   BEM Naming ConventionLesson · Complete the previous lesson first
5. ·
   Utility-first vs Component-based CSSLesson · Complete the previous lesson first
6. ·
   @import and File OrganizationLesson · Complete the previous lesson first

Apply everything in one complete project.

1. ·
   Full Responsive Portfolio - CSS3 Only, No FrameworksPractice · Complete the previous lesson first