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
Start Lesson 01 → View All 73 Lessons
styles.css
.card {
background: linear-gradient(
135deg, #38bdf8, #818cf8);
border-radius: 12px;
transition: transform .3s ease;
}
.card:hover {
transform: rotate(12deg) scale(1.1);
}
Live PreviewHover the box to see CSS transforms. This is what you will master.
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
  tools_needed.txt
VS Code + Live Server
Auto-refresh on every save
↗ Download
Chrome DevTools
Inspect & edit CSS live
Press F12
Sass (optional)
For Phase 6 — Sass lessons
↗ Install
Prerequisite: HTML
Complete first — required
↗ Take it first
Next: JavaScript
After completing this course
↗ Go there
Course Content

73 Lessons

Phase 1 — CSS Foundations (01–12)
01Introduction to CSS — What It Is, Why It Exists, and How It Works 02CSS Selectors — Targeting Elements Like a Pro 03How to Add CSS — External, Internal, Inline & the Cascade 04CSS Comments and CSS Errors 05CSS Colors — Named Colors, RGB, RGBA, HEX, HSL, and HSLA 06CSS Backgrounds — Colors, Images, Repeat, Attachment & Shorthand 07CSS Borders — Style, Width, Color, Sides, Shorthand & Rounded Corners 08CSS Margins and Margin Collapse 09CSS Padding — Inner Space, Shorthand & the box-sizing Fix 10CSS Height and Width — Setting, Limiting, and Controlling Element Size 11The CSS Box Model 12CSS Outlines — Style, Width, Color, Shorthand & Offset
Phase 2 — Text, Fonts & UI Elements (13–22)
13CSS Text Styling — Color, Alignment, Decoration, Transformation, Spacing & Shadow 14CSS Fonts for Absolute Beginners 15CSS Icons — Font Awesome, Bootstrap, and Google Material Icons 16CSS Links — Styling, States, and Button-Style Links 17CSS Lists — Styling Unordered and Ordered Lists 18CSS Tables — Borders, Size, Alignment, Styling & Responsive 19CSS Display — Block, Inline, Inline-Block, None & Visibility 20CSS max-width — Controlling How Wide Elements Can Grow 21CSS Position — Static, Relative, Fixed, Absolute, and Sticky 22CSS Position Offsets — top, right, bottom, left
Phase 3 — Layout & Positioning (23–35)
23CSS z-index — Controlling the Stack Order of Elements 24CSS Overflow — Controlling What Happens When Content Is Too Big 25CSS Float, Clear, and Clearfix 26CSS display: inline-block — The Best of Both Worlds 27CSS Alignment — Center, Horizontal, and Vertical Alignment 28CSS Combinators — Targeting Elements by Their Relationships 29CSS Pseudo-classes — Styling Elements by State and Position 30CSS Pseudo-elements — Styling Parts of Elements Without Extra HTML 31CSS Opacity and Transparency 32CSS Navigation Bars — Vertical and Horizontal Navbars 33CSS Dropdowns — Hidden Menus That Appear on Hover 34CSS Image Gallery and Image Sprites 35CSS Attribute Selectors
Phase 4 — Intermediate CSS (36–50)
36CSS Form Styling — Inputs, Focus, Icons & Form Elements 37CSS Counters & Nested Counters 38CSS Units — Absolute and Relative 39CSS Inheritance 40CSS Specificity — Who Wins When Rules Conflict? 41CSS !important Rule 42CSS Math Functions: calc(), min(), max(), and clamp() 43CSS Performance Optimization 44CSS Accessibility Styling 45CSS Website Layout 46CSS Rounded Corners 47CSS Border Images 48CSS Advanced Backgrounds 49CSS Advanced Colors and Color Keywords 50CSS Gradients — Linear, Radial, and Conic
Phase 5 — Visual Effects & Motion (51–63)
51CSS Shadow Effects — Text Shadows and Box Shadows 52CSS Text Effects — Overflow, Word Wrapping, Line Breaking & Writing Modes 53CSS Custom Fonts — The @font-face Rule 54CSS 2D and 3D Transforms — Moving, Rotating, Scaling, Skewing & 3D Space 55CSS Transitions — Making Elements Move Smoothly 56CSS Animations 57CSS Tooltips and Tooltip Arrows 58CSS Image Styling — Shapes, Effects, Filters, Hover, Modals & Centering 59CSS object-fit and object-position 60CSS Masking — PNG Images, Gradients, and SVG Masks 61CSS Buttons — Styling, Hover Effects & Button Groups 62CSS Pagination — Building & Styling Page Navigation 63CSS Multiple Columns — Newspaper-Style Layouts
Phase 6 — Modern CSS & Sass (64–73)
64CSS User Interface — Resize and Outline Offset 65CSS Variables — var(), Overriding, JavaScript & Media Queries 66CSS @property Rule — Defining and Animating Custom Properties 67CSS Box Sizing 68CSS Media Queries 69CSS Flexbox — Flexible Box Layout Complete Guide 70CSS Grid Layout — Complete Guide from Intro to @supports 71CSS Responsive Web Design (RWD) 72Sass — A Complete Beginner's Guide to Smarter CSS 73Sass Built-In Functions — String, Numeric, List, Map, Selector & Color
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.