CSS3 Mastery

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

1. What is CSS and How It Worksفيديو 8 د
2. ·
   Three Ways to Add CSSدرس · أكمل الدرس السابق أولًا
3. ·
   How the Browser Applies Stylesفيديو · أكمل الدرس السابق أولًا 7 د
4. ·
   Your First Stylesheetدرس · أكمل الدرس السابق أولًا

Target exactly the elements you want to style.

1. ·
   Element, Class, and ID Selectorsدرس · أكمل الدرس السابق أولًا
2. ·
   Grouping and Chaining Selectorsدرس · أكمل الدرس السابق أولًا
3. ·
   Descendant vs Child Selectorsفيديو · أكمل الدرس السابق أولًا 7 د
4. ·
   Adjacent and General Sibling Selectorsدرس · أكمل الدرس السابق أولًا
5. ·
   Attribute Selectorsدرس · أكمل الدرس السابق أولًا
6. ·
   Universal Selector and the Resetدرس · أكمل الدرس السابق أولًا
7. ·
   Style a Page Using Only Selectorsتطبيق عملي · أكمل الدرس السابق أولًا

Understand how the browser decides which style wins.

1. ·
   What is the Cascadeفيديو · أكمل الدرس السابق أولًا 8 د
2. ·
   Specificity — How the Browser Decides Who Winsفيديو · أكمل الدرس السابق أولًا 9 د
3. ·
   Inheritance — What Passes Down and What Does Notدرس · أكمل الدرس السابق أولًا
4. ·
   !important — When and Why to Avoid Itدرس · أكمل الدرس السابق أولًا
5. ·
   :is(), :where(), :not() Specificity Tricksدرس · أكمل الدرس السابق أولًا

Every element is a box. Master its four layers.

1. ·
   margin, border, padding, contentفيديو · أكمل الدرس السابق أولًا 9 د
2. ·
   box-sizing: border-box — Why Everyone Uses Itدرس · أكمل الدرس السابق أولًا
3. ·
   width, height, min-* and max-*درس · أكمل الدرس السابق أولًا
4. ·
   overflowدرس · أكمل الدرس السابق أولًا
5. ·
   outline vs borderدرس · أكمل الدرس السابق أولًا
6. ·
   Box Model Debugging Challengeتطبيق عملي · أكمل الدرس السابق أولًا

Control fonts, sizes, spacing, and text appearance.

1. ·
   font-family and Web Safe Fontsدرس · أكمل الدرس السابق أولًا
2. ·
   Google Fonts and @font-faceدرس · أكمل الدرس السابق أولًا
3. ·
   font-size — px, rem, em, %فيديو · أكمل الدرس السابق أولًا 8 د
4. ·
   font-weight, font-style, font-variantدرس · أكمل الدرس السابق أولًا
5. ·
   line-height, letter-spacing, word-spacingدرس · أكمل الدرس السابق أولًا
6. ·
   text-align, text-decoration, text-transformدرس · أكمل الدرس السابق أولًا
7. ·
   text-shadow, text-overflow, white-spaceدرس · أكمل الدرس السابق أولًا
8. ·
   @font-face Deep Diveدرس · أكمل الدرس السابق أولًا

Colours, backgrounds, gradients, and blending.

1. ·
   Color Formats — named, hex, rgb, hslفيديو · أكمل الدرس السابق أولًا 8 د
2. ·
   opacity and rgba / hslaدرس · أكمل الدرس السابق أولًا
3. ·
   CSS Custom Properties for Colorدرس · أكمل الدرس السابق أولًا
4. ·
   background-color and background-imageدرس · أكمل الدرس السابق أولًا
5. ·
   background-size, background-position, background-repeatدرس · أكمل الدرس السابق أولًا
6. ·
   background-attachment, background-clip, background-originدرس · أكمل الدرس السابق أولًا
7. ·
   Multiple Backgroundsدرس · أكمل الدرس السابق أولًا
8. ·
   linear-gradient(), radial-gradient(), conic-gradient()فيديو · أكمل الدرس السابق أولًا 9 د
9. ·
   Hero Section — Colors and Backgrounds Onlyتطبيق عملي · أكمل الدرس السابق أولًا

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

1. ·
   Absolute Units — px, pt, cmدرس · أكمل الدرس السابق أولًا
2. ·
   Relative Units — em, rem, %, vw, vhفيديو · أكمل الدرس السابق أولًا 9 د
3. ·
   vmin, vmax, dvh, svhدرس · أكمل الدرس السابق أولًا
4. ·
   calc(), min(), max(), clamp()فيديو · أكمل الدرس السابق أولًا 8 د
5. ·
   currentColor and Keyword Valuesدرس · أكمل الدرس السابق أولًا

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

1. ·
   display — block, inline, inline-block, noneدرس · أكمل الدرس السابق أولًا
2. ·
   position — static, relative, absolute, fixed, stickyفيديو · أكمل الدرس السابق أولًا 10 د
3. ·
   top, right, bottom, left — How They Actually Workدرس · أكمل الدرس السابق أولًا
4. ·
   z-index and Stacking Contextsفيديو · أكمل الدرس السابق أولًا 8 د
5. ·
   float and clear — Legacy but Still Realدرس · أكمل الدرس السابق أولًا
6. ·
   Fix the Broken Layout — Positioning Challengeتطبيق عملي · أكمل الدرس السابق أولًا

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

1. ·
   What Flexbox Solvesفيديو · أكمل الدرس السابق أولًا 7 د
2. ·
   display: flex and the Flex Containerدرس · أكمل الدرس السابق أولًا
3. ·
   flex-direction, flex-wrap, flex-flowدرس · أكمل الدرس السابق أولًا
4. ·
   justify-content — Main Axis Alignmentفيديو · أكمل الدرس السابق أولًا 8 د
5. ·
   align-items and align-selfدرس · أكمل الدرس السابق أولًا
6. ·
   align-content — Multi-line Behaviorدرس · أكمل الدرس السابق أولًا
7. ·
   flex-grow, flex-shrink, flex-basisفيديو · أكمل الدرس السابق أولًا 9 د
8. ·
   The flex Shorthandدرس · أكمل الدرس السابق أولًا
9. ·
   order and Visual Reorderingدرس · أكمل الدرس السابق أولًا
10. ·
    gap, row-gap, column-gapدرس · أكمل الدرس السابق أولًا
11. ·
    Navigation Bar + Card Row — Flexbox Onlyتطبيق عملي · أكمل الدرس السابق أولًا

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

1. ·
   What Grid Solves and When to Use It vs Flexboxفيديو · أكمل الدرس السابق أولًا 8 د
2. ·
   display: grid and the Grid Containerدرس · أكمل الدرس السابق أولًا
3. ·
   grid-template-columns and grid-template-rowsدرس · أكمل الدرس السابق أولًا
4. ·
   fr Unit and repeat()فيديو · أكمل الدرس السابق أولًا 7 د
5. ·
   grid-gap, column-gap, row-gapدرس · أكمل الدرس السابق أولًا
6. ·
   grid-column and grid-row — Placing Itemsدرس · أكمل الدرس السابق أولًا
7. ·
   grid-area and Named Areasفيديو · أكمل الدرس السابق أولًا 9 د
8. ·
   auto-fill vs auto-fitفيديو · أكمل الدرس السابق أولًا 7 د
9. ·
   minmax() and fit-content()درس · أكمل الدرس السابق أولًا
10. ·
    Implicit vs Explicit Gridدرس · أكمل الدرس السابق أولًا
11. ·
    Subgridدرس · أكمل الدرس السابق أولًا
12. ·
    Full Page Layout — Grid Onlyتطبيق عملي · أكمل الدرس السابق أولًا

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

1. ·
   :hover, :focus, :active, :visitedدرس · أكمل الدرس السابق أولًا
2. ·
   :nth-child(), :nth-of-type(), :last-childفيديو · أكمل الدرس السابق أولًا 8 د
3. ·
   :checked, :disabled, :required, :valid, :invalidدرس · أكمل الدرس السابق أولًا
4. ·
   :empty, :not(), :has()فيديو · أكمل الدرس السابق أولًا 7 د
5. ·
   ::before, ::after and the content Propertyفيديو · أكمل الدرس السابق أولًا 9 د
6. ·
   ::placeholder, ::selection, ::markerدرس · أكمل الدرس السابق أولًا
7. ·
   Style a Form Using Only Pseudo-classesتطبيق عملي · أكمل الدرس السابق أولًا

Bring your UI to life with smooth motion.

1. ·
   transition - property, duration, timing-function, delayفيديو · أكمل الدرس السابق أولًا 9 د
2. ·
   transition-timing-function - ease, cubic-bezierفيديو · أكمل الدرس السابق أولًا 8 د
3. ·
   @keyframes - Defining Animationsدرس · أكمل الدرس السابق أولًا
4. ·
   animation Shorthandدرس · أكمل الدرس السابق أولًا
5. ·
   animation-fill-mode and animation-play-stateدرس · أكمل الدرس السابق أولًا
6. ·
   will-change and Performanceدرس · أكمل الدرس السابق أولًا
7. ·
   Respecting prefers-reduced-motionدرس · أكمل الدرس السابق أولًا
8. ·
   Animated Loading Spinner + Button Interactionsتطبيق عملي · أكمل الدرس السابق أولًا

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

1. ·
   transform - translate(), scale(), rotate(), skew()درس · أكمل الدرس السابق أولًا
2. ·
   transform-originدرس · أكمل الدرس السابق أولًا
3. ·
   3D Transforms - rotateX(), rotateY(), perspective()فيديو · أكمل الدرس السابق أولًا 9 د
4. ·
   transform-style: preserve-3dفيديو · أكمل الدرس السابق أولًا 8 د
5. ·
   Combining Transforms - Order Mattersدرس · أكمل الدرس السابق أولًا

Build layouts that work on every screen size.

1. ·
   What is Responsive Designفيديو · أكمل الدرس السابق أولًا 7 د
2. ·
   @media Queries - Syntax and Breakpointsدرس · أكمل الدرس السابق أولًا
3. ·
   Mobile First vs Desktop Firstدرس · أكمل الدرس السابق أولًا
4. ·
   @media - width, orientation, hover, pointerدرس · أكمل الدرس السابق أولًا
5. ·
   Responsive Typography with clamp()درس · أكمل الدرس السابق أولًا
6. ·
   Responsive Images - max-width and object-fitدرس · أكمل الدرس السابق أولًا
7. ·
   Container Queries @containerفيديو · أكمل الدرس السابق أولًا 8 د
8. ·
   Responsive Landing Page - 3 Breakpointsتطبيق عملي · أكمل الدرس السابق أولًا

CSS variables - the foundation of scalable design systems.

1. ·
   Declaring and Using --variablesدرس · أكمل الدرس السابق أولًا
2. ·
   Scope - :root vs Component Levelفيديو · أكمل الدرس السابق أولًا 8 د
3. ·
   Fallback Valuesدرس · أكمل الدرس السابق أولًا
4. ·
   Updating Variables with JavaScriptدرس · أكمل الدرس السابق أولًا
5. ·
   Building a Theme System with Custom Propertiesفيديو · أكمل الدرس السابق أولًا 9 د
6. ·
   Light / Dark Theme Toggle - CSS Onlyتطبيق عملي · أكمل الدرس السابق أولًا

Master the full range of CSS functions.

1. ·
   var(), env(), attr()درس · أكمل الدرس السابق أولًا
2. ·
   calc() in Real Layoutsدرس · أكمل الدرس السابق أولًا
3. ·
   min(), max(), clamp() for Fluid Designدرس · أكمل الدرس السابق أولًا
4. ·
   rgb(), hsl(), oklch()درس · أكمل الدرس السابق أولًا
5. ·
   url() and format() in Backgrounds and Fontsدرس · أكمل الدرس السابق أولًا
6. ·
   image-set() for Resolution Switchingدرس · أكمل الدرس السابق أولًا

Photoshop-style effects directly in CSS.

1. ·
   filter - blur, brightness, contrast, grayscale, drop-shadowفيديو · أكمل الدرس السابق أولًا 9 د
2. ·
   backdrop-filterفيديو · أكمل الدرس السابق أولًا 7 د
3. ·
   mix-blend-modeدرس · أكمل الدرس السابق أولًا
4. ·
   background-blend-modeدرس · أكمل الدرس السابق أولًا
5. ·
   Image Card with Hover Filter Effectsتطبيق عملي · أكمل الدرس السابق أولًا

Structure your CSS for scale and maintainability.

1. ·
   @layer - Controlling the Cascadeفيديو · أكمل الدرس السابق أولًا 9 د
2. ·
   @scopeدرس · أكمل الدرس السابق أولًا
3. ·
   CSS Nestingفيديو · أكمل الدرس السابق أولًا 7 د
4. ·
   BEM Naming Conventionدرس · أكمل الدرس السابق أولًا
5. ·
   Utility-first vs Component-based CSSدرس · أكمل الدرس السابق أولًا
6. ·
   @import and File Organizationدرس · أكمل الدرس السابق أولًا

Apply everything in one complete project.

1. ·
   Full Responsive Portfolio - CSS3 Only, No Frameworksتطبيق عملي · أكمل الدرس السابق أولًا