Free Course · Beginner → Advanced · Ibadan, Nigeria
CSS Styling
From your first color: red to Flexbox, Grid, animations and Sass — 73 lessons covering every CSS concept completely. The most comprehensive course in the series.
73Lessons
6Phases
HTMLPrerequisite
About This Course
Make the web beautiful.
CSS transforms plain HTML into polished, stunning websites. It controls everything you see — colors, fonts, spacing, layout, hover effects and animations. At 73 lessons, this is the most comprehensive course in the Techbase series. Designed by Babatunde Awoyemi, Ibadan.
- Selectors, specificity, the cascade and inheritance
- Box model, display, positioning and overflow
- Flexbox — the modern one-dimensional layout system
- CSS Grid — two-dimensional layouts
- Transitions, animations and 2D/3D transforms
- CSS Variables, media queries and responsive design
- Sass — smarter CSS with nesting and functions
Course Content
73 Lessons
Phase 1 — CSS Foundations
01–12- 01 Introduction to CSS — What It Is, Why It Exists, and How It Works
- 02 CSS Selectors — Targeting Elements Like a Pro
- 03 How to Add CSS — External, Internal, Inline & the Cascade
- 04 CSS Comments and CSS Errors
- 05 CSS Colors — Named Colors, RGB, RGBA, HEX, HSL, and HSLA
- 06 CSS Backgrounds — Colors, Images, Repeat, Attachment & Shorthand
- 07 CSS Borders — Style, Width, Color, Sides, Shorthand & Rounded Corners
- 08 CSS Margins and Margin Collapse
- 09 CSS Padding — Inner Space, Shorthand & the box-sizing Fix
- 10 CSS Height and Width — Setting, Limiting, and Controlling Element Size
- 11 The CSS Box Model
- 12 CSS Outlines — Style, Width, Color, Shorthand & Offset
Phase 2 — Text, Fonts & UI Elements
13–22- 13 CSS Text Styling — Color, Alignment, Decoration, Transformation, Spacing & Shadow
- 14 CSS Fonts for Absolute Beginners
- 15 CSS Icons — Font Awesome, Bootstrap, and Google Material Icons
- 16 CSS Links — Styling, States, and Button-Style Links
- 17 CSS Lists — Styling Unordered and Ordered Lists
- 18 CSS Tables — Borders, Size, Alignment, Styling & Responsive
- 19 CSS Display — Block, Inline, Inline-Block, None & Visibility
- 20 CSS max-width — Controlling How Wide Elements Can Grow
- 21 CSS Position — Static, Relative, Fixed, Absolute, and Sticky
- 22 CSS Position Offsets — top, right, bottom, left
Phase 3 — Layout & Positioning
23–35- 23 CSS z-index — Controlling the Stack Order of Elements
- 24 CSS Overflow — Controlling What Happens When Content Is Too Big
- 25 CSS Float, Clear, and Clearfix
- 26 CSS display: inline-block — The Best of Both Worlds
- 27 CSS Alignment — Center, Horizontal, and Vertical Alignment
- 28 CSS Combinators — Targeting Elements by Their Relationships
- 29 CSS Pseudo-classes — Styling Elements by State and Position
- 30 CSS Pseudo-elements — Styling Parts of Elements Without Extra HTML
- 31 CSS Opacity and Transparency
- 32 CSS Navigation Bars — Vertical and Horizontal Navbars
- 33 CSS Dropdowns — Hidden Menus That Appear on Hover
- 34 CSS Image Gallery and Image Sprites
- 35 CSS Attribute Selectors
Phase 4 — Intermediate CSS
36–50- 36 CSS Form Styling — Inputs, Focus, Icons & Form Elements
- 37 CSS Counters & Nested Counters
- 38 CSS Units — Absolute and Relative
- 39 CSS Inheritance
- 40 CSS Specificity — Who Wins When Rules Conflict?
- 41 CSS !important Rule
- 42 CSS Math Functions: calc(), min(), max(), and clamp()
- 43 CSS Performance Optimization
- 44 CSS Accessibility Styling
- 45 CSS Website Layout
- 46 CSS Rounded Corners
- 47 CSS Border Images
- 48 CSS Advanced Backgrounds
- 49 CSS Advanced Colors and Color Keywords
- 50 CSS Gradients — Linear, Radial, and Conic
Phase 5 — Visual Effects & Motion
51–63- 51 CSS Shadow Effects — Text Shadows and Box Shadows
- 52 CSS Text Effects — Overflow, Word Wrapping, Line Breaking & Writing Modes
- 53 CSS Custom Fonts — The @font-face Rule
- 54 CSS 2D and 3D Transforms — Moving, Rotating, Scaling, Skewing & 3D Space
- 55 CSS Transitions — Making Elements Move Smoothly
- 56 CSS Animations
- 57 CSS Tooltips and Tooltip Arrows
- 58 CSS Image Styling — Shapes, Effects, Filters, Hover, Modals & Centering
- 59 CSS object-fit and object-position
- 60 CSS Masking — PNG Images, Gradients, and SVG Masks
- 61 CSS Buttons — Styling, Hover Effects & Button Groups
- 62 CSS Pagination — Building & Styling Page Navigation
- 63 CSS Multiple Columns — Newspaper-Style Layouts
Phase 6 — Modern CSS & Sass
64–73- 64 CSS User Interface — Resize and Outline Offset
- 65 CSS Variables — var(), Overriding, JavaScript & Media Queries
- 66 CSS @property Rule — Defining and Animating Custom Properties
- 67 CSS Box Sizing
- 68 CSS Media Queries
- 69 CSS Flexbox — Flexible Box Layout Complete Guide
- 70 CSS Grid Layout — Complete Guide from Intro to @supports
- 71 CSS Responsive Web Design (RWD)
- 72 Sass — A Complete Beginner's Guide to Smarter CSS
- 73 Sass Built-In Functions — String, Numeric, List, Map, Selector & Color
No lessons match that search. Try a different word.
How it works
Learn at your own pace.
01
Finish HTML First
CSS selects and styles HTML elements — you must understand HTML before starting.
02
Open Lesson 01
Have your HTML file open alongside. See every CSS change instantly.
03
Apply & Refresh
Use Live Server to see styles update in real time as you code along.
04
Build the Project
Complete all 73 lessons and style a full multi-page website from scratch.