🎨 CSS Styling — Techbase STEM Academy
Free CSS course · Techbase Consultant Services, Ibadan, Nigeria
Instructor: Babatunde Awoyemi · All Courses →
Prerequisites: HTML Fundamentals
Next step: JavaScript
Course Lessons
Phase 1 — CSS Foundations (01–12)
| # |
Topic |
Link |
| 01 |
Introduction to CSS — What It Is, Why It Exists, and How It Works |
lesson_01 |
| 02 |
CSS Selectors — Targeting Elements Like a Pro |
lesson_02 |
| 03 |
How to Add CSS to HTML — External, Internal, Inline & the Cascade |
lesson_03 |
| 04 |
CSS Comments and CSS Errors |
lesson_04 |
| 05 |
CSS Colors — Named Colors, RGB, RGBA, HEX, HSL, and HSLA |
lesson_05 |
| 06 |
CSS Backgrounds — Colours, Images, Repeat, Attachment & Shorthand |
lesson_06 |
| 07 |
CSS Borders — Style, Width, Colour, Sides, Shorthand & Rounded Corners |
lesson_07 |
| 08 |
CSS Margins and Margin Collapse |
lesson_08 |
| 09 |
CSS Padding — Inner Space, Shorthand & the box-sizing Fix |
lesson_09 |
| 10 |
CSS Height and Width — Setting, Limiting, and Controlling Element Size |
lesson_10 |
| 11 |
The CSS Box Model |
lesson_11 |
| 12 |
CSS Outlines — Style, Width, Color, Shorthand & Offset |
lesson_12 |
Phase 2 — Text, Fonts & UI Elements (13–22)
| # |
Topic |
Link |
| 13 |
CSS Text Styling — Color, Alignment, Decoration, Transformation, Spacing & Shadow |
lesson_13 |
| 14 |
CSS Fonts for Absolute Beginners |
lesson_14 |
| 15 |
CSS Icons — Font Awesome, Bootstrap, and Google Material Icons |
lesson_15 |
| 16 |
CSS Links — Styling, States, and Button-Style Links |
lesson_16 |
| 17 |
CSS Lists — Styling Unordered and Ordered Lists |
lesson_17 |
| 18 |
CSS Tables — Borders, Size, Alignment, Styling & Responsive Design |
lesson_18 |
| 19 |
CSS Display — Block, Inline, Inline-Block, None & Visibility |
lesson_19 |
| 20 |
CSS max-width — Controlling How Wide Elements Can Grow |
lesson_20 |
| 21 |
CSS Position — Static, Relative, Fixed, Absolute, and Sticky |
lesson_21 |
| 22 |
CSS Position Offsets — top, right, bottom, left |
lesson_22 |
Phase 3 — Layout & Positioning (23–35)
| # |
Topic |
Link |
| 23 |
CSS z-index — Controlling the Stack Order of Elements |
lesson_23 |
| 24 |
CSS Overflow — Controlling What Happens When Content Is Too Big |
lesson_24 |
| 25 |
CSS Float, Clear, and Clearfix |
lesson_25 |
| 26 |
CSS display: inline-block — The Best of Both Worlds |
lesson_26 |
| 27 |
CSS Alignment — Center, Horizontal, and Vertical Alignment |
lesson_27 |
| 28 |
CSS Combinators — Targeting Elements by Their Relationships |
lesson_28 |
| 29 |
CSS Pseudo-classes — Styling Elements by State, Position, and Interaction |
lesson_29 |
| 30 |
CSS Pseudo-elements — Styling Parts of Elements Without Changing Your HTML |
lesson_30 |
| 31 |
CSS Opacity and Transparency |
lesson_31 |
| 32 |
CSS Navigation Bars — Vertical and Horizontal Navbars |
lesson_32 |
| 33 |
CSS Dropdowns — Building Hidden Menus That Appear on Hover |
lesson_33 |
| 34 |
CSS Image Gallery and Image Sprites |
lesson_34 |
| 35 |
CSS Attribute Selectors |
lesson_35 |
| # |
Topic |
Link |
| 36 |
CSS Form Styling — Inputs, Focus, Icons, and Form Elements |
lesson_36 |
| 37 |
CSS Counters & Nested Counters |
lesson_37 |
| 38 |
CSS Units — Absolute and Relative |
lesson_38 |
| 39 |
CSS Inheritance |
lesson_39 |
| 40 |
CSS Specificity — Who Wins When Rules Conflict? |
lesson_40 |
| 41 |
CSS !important Rule |
lesson_41 |
| 42 |
CSS Math Functions: calc(), min(), max(), and clamp() |
lesson_42 |
| 43 |
CSS Performance Optimization |
lesson_43 |
| 44 |
CSS Accessibility Styling |
lesson_44 |
| 45 |
CSS Website Layout |
lesson_45 |
| 46 |
CSS Rounded Corners |
lesson_46 |
| 47 |
CSS Border Images |
lesson_47 |
| 48 |
CSS Advanced Backgrounds |
lesson_48 |
| 49 |
CSS Advanced Colors and Color Keywords |
lesson_49 |
| 50 |
CSS Gradients — Linear, Radial, and Conic |
lesson_50 |
Phase 5 — Visual Effects & Motion (51–63)
| # |
Topic |
Link |
| 51 |
CSS Shadow Effects — Text Shadows and Box Shadows |
lesson_51 |
| 52 |
CSS Text Effects — Overflow, Word Wrapping, Line Breaking, and Writing Modes |
lesson_52 |
| 53 |
CSS Custom Fonts — The @font-face Rule |
lesson_53 |
| 54 |
CSS 2D and 3D Transforms — Moving, Rotating, Scaling, Skewing, and 3D Space |
lesson_54 |
| 55 |
CSS Transitions — Making Elements Move Smoothly |
lesson_55 |
| 56 |
CSS Animations |
lesson_56 |
| 57 |
CSS Tooltips and Tooltip Arrows |
lesson_57 |
| 58 |
CSS Image Styling — Shapes, Effects, Filters, Hover, Modals & Centering |
lesson_58 |
| 59 |
CSS object-fit and object-position |
lesson_59 |
| 60 |
CSS Masking — PNG Images, Gradients, and SVG Masks |
lesson_60 |
| 61 |
CSS Buttons — Styling, Hover Effects & Button Groups |
lesson_61 |
| 62 |
CSS Pagination — Building & Styling Page Navigation from Scratch |
lesson_62 |
| 63 |
CSS Multiple Columns — Building Newspaper-Style Layouts from Scratch |
lesson_63 |
Phase 6 — Modern CSS & Sass (64–73)
| # |
Topic |
Link |
| 64 |
CSS User Interface — Resize and Outline Offset |
lesson_64 |
| 65 |
CSS Variables — The var() Function, Overriding, JavaScript, and Media Queries |
lesson_65 |
| 66 |
CSS @property Rule — Defining and Animating Custom CSS Properties |
lesson_66 |
| 67 |
CSS Box Sizing |
lesson_67 |
| 68 |
CSS Media Queries |
lesson_68 |
| 69 |
CSS Flexbox — Flexible Box Layout Complete Guide |
lesson_69 |
| 70 |
CSS Grid Layout — Complete Guide from Intro to @supports |
lesson_70 |
| 71 |
CSS Responsive Web Design (RWD) |
lesson_71 |
| 72 |
Sass — A Complete Beginner’s Guide to Smarter CSS |
lesson_72 |
| 73 |
Sass Built-In Functions — String, Numeric, List, Map, Selector, Introspection & Color |
lesson_73 |
MIT License · © 2025 Techbase Consultant Services · Made with ❤️ in Ibadan, Nigeria