Part of the HTML JourneyPopularJourneyLearn CSS
A free, interactive CSS course. You style real HTML on every lesson - selectors, the box model, colors, fonts, flexbox, grid, responsive design - with a live preview as you type and a free certificate when you finish. Part of the wider HTML journey, so the markup context CSS needs is right there.
269,396+ codders enrolled
- Beginner friendly
AI-assisted coding help
Hands-on interactive lessons
Audio narration on every lesson
Quizzes to test your knowledge
Free certificate of completion
Syllabus
This section is part of the HTML Journey. The full syllabus has more sections - click any preview below to view it on the Journey page.
- Section 1Fundamentals60 lessons
Section 2
Styling with CSS
Start sectionStartExpandCollapseBring your web pages to life with colors, layouts, and stylesIntroduction
5 lessons540- 01What is CSS?ChallengeQuiz
- 02CSS SyntaxChallengeQuiz
- 03CSS CommentsQuiz
- 04The Head TagChallengeQuiz
- 05The Title TagChallengeMasteryQuiz
Adding CSS
4 lessons725- 01Inline CSSChallengeMasteryQuiz
- 02Internal CSSChallengeMasteryQuiz
- 03External CSSChallengeMasteryQuiz
- 04Basic Styling ChallengeChallenge
Basic Selectors
7 lessons1247- 01Introduction to SelectorsChallengeQuiz
- 02Type SelectorChallengeMasteryQuiz
- 03Class SelectorChallengeMasteryQuiz
- 04ID SelectorChallengeMasteryQuiz
- 05Group SelectorsChallengeMasteryQuiz
- 06Universal SelectorChallengeMasteryQuiz
- 07Selection ChallengeChallenge
Text Fundamentals
8 lessons1450- 01Text ColorChallengeMasteryQuiz
- 02Font FamilyChallengeMasteryQuiz
- 03Font SizeChallengeMasteryQuiz
- 04Font WeightChallengeMasteryQuiz
- 05Text AlignmentChallengeMasteryQuiz
- 06Text DecorationChallengeMasteryQuiz
- 07Recap Challenge #1Challenge
- 08Recap Challenge #2Challenge
Colors and Backgrounds
5 lessons834- 01Background ColorChallengeMasteryQuiz
- 02HEX ColorsChallengeMasteryQuiz
- 03RGB ColorsChallengeMasteryQuiz
- 04Transparency with RGBAChallengeQuiz
- 05Recap Challenge #1Challenge
Cafe Menu
Project3 lessons1- 01Typography BasicsChallenge
- 02Text StylingProject
- 03Color and BackgroundsProject
Box Model Part 1
6 lessons943- 01What is the Box Model?Quiz
- 02PaddingChallengeMasteryQuiz
- 03MarginsChallengeMasteryQuiz
- 04BordersChallengeMasteryQuiz
- 05Width and HeightChallengeMasteryQuiz
- 06Recap ChallengeChallenge
Box Model Part 2
5 lessons834- 01Box SizingChallengeQuiz
- 02Border RadiusChallengeMasteryQuiz
- 03OverflowChallengeMasteryQuiz
- 04Box ShadowChallengeMasteryQuiz
- 05Recap ChallengeChallenge
Flex Box
6 lessons943- 01What is a Flex Box?ChallengeQuiz
- 02Flex DirectionChallengeMasteryQuiz
- 03Justify ContentChallengeMasteryQuiz
- 04Align ItemsChallengeMasteryQuiz
- 05The Perfect CenterChallengeQuiz
- 06Flex Box ChallengeChallenge
Login Form
Project4 lessons1- 01BodyChallenge
- 02Form ContainerProject
- 03InputProject
- 04ButtonProject
Layout Techniques
7 lessons1152- 01Block vs Inline ElementsChallengeQuiz
- 02Positioning BasicsChallengeMasteryQuiz
- 03Relative PositioningChallengeMasteryQuiz
- 04Absolute PositioningChallengeMasteryQuiz
- 05Fixed PositioningChallengeMasteryQuiz
- 06Z-Index BasicsChallengeQuiz
- 07Recap ChallengeChallenge
Responsive Design Basics
6 lessons1052- 01What is Responsive Design?ChallengeQuiz
- 02Viewport Meta TagChallengeQuiz
- 03Fluid LayoutsChallengeMasteryQuiz
- 04Viewport UnitsChallengeMasteryQuiz
- 05Media Queries BasicsChallengeMasteryQuiz
- 06Flexible ImagesChallengeMasteryQuiz
Tonga Webpage
Project6 lessons1- 01Navigation MenuChallenge
- 02Welcome HeaderProject
- 03About SectionProject
- 04Contact SectionProject
- 05Viewport TagProject
- 06Media QueryProject
Final Challenges
4 lessons4- 01Arrange ItemsChallenge
- 02Movies ListChallenge
- 03Wedding Invitation CardChallenge
- 04Floating NotificationChallenge
Section 3
CSS Mastery
Start sectionStartExpandCollapseTake you css skills to the next level!Selector Mastery – Combination
6 lessons539- 01IntroductionQuiz
- 02Descendant SelectorChallengeQuiz
- 03Child SelectorChallengeQuiz
- 04Adjacent Sibling SelectorChallengeQuiz
- 05General Sibling SelectorChallengeQuiz
- 06Recap ChallengeChallenge
Interactive Pseudo-Classes
5 lessons431- 01Pseudo-ClassesQuiz
- 02Hover EffectsChallengeQuiz
- 03Focus EffectsChallengeQuiz
- 04Active StylesChallengeQuiz
- 05Recap ChallengeChallenge
Structural pseudo-classes
5 lessons432- 01Structural pseudo-classesQuiz
- 02Targeting the First ChildChallengeQuiz
- 03Targeting the Last ChildChallengeQuiz
- 04Pattern Power: Using nth-childChallengeQuiz
- 05Recap ChallengeChallenge
Dropdown Menu Project
4 lessons4- 01Add the SubmenuChallenge
- 02Show the SubmenuChallenge
- 03More stylingChallenge
- 04Input and buttonChallenge
Visual effects
5 lessons536- 01GradientsChallengeQuiz
- 02CSS FiltersChallengeQuiz
- 03TransformChallengeQuiz
- 04Transitions & Hover EffectsChallengeQuiz
- 05Recap ChallengeChallenge
Landing Page
5 lessons5- 01Style the Header SectionChallenge
- 02Style the buttonChallenge
- 03Section Layout Challenge
- 04Card Layout Challenge
- 05Add Finishing TouchesChallenge
Build with CSS Grid
4 lessons426- 01Grid BasicsChallengeQuiz
- 02Grid-row Item PlacementChallengeQuiz
- 03Named AreasChallengeQuiz
- 04Recap ChallengeChallenge
Flavor Fiesta website
4 lessons4- 01Setting the gridChallenge
- 02HeaderChallenge
- 03The main partChallenge
- 04FooterChallenge
Final Challenges
5 lessons5- 01Highlight Active MenuChallenge
- 02Zebra Table RowsChallenge
- 03Button Hover EffectChallenge
- 04Grid Card LayoutChallenge
- 05Blurred Hero ImageChallenge
- Section 4Practical Frontend35 lessons
- Section 5JavaScript in Action27 lessons
Why learn CSS with Coddy
- Write CSS in your browser and watch the page restyle live. No build step, no editor setup. Every change to a selector or property shows up instantly so you see what each rule actually does.
- Core CSS: selectors and specificity, the box model, positioning, flexbox, CSS grid, transitions, media queries, and responsive design. The CSS every front-end developer needs day-to-day.
- AI hints help you debug the things that always trip people up - specificity surprises, layout overflows, weird flexbox behavior - without spoiling the fix, so CSS becomes intuitive instead of magical.
- Free CSS certificate when you finish the section. Pairs naturally with the HTML and JavaScript courses for a full front-end foundation.
Frequently asked questions about learning CSS
What is CSS?
CSS (Cascading Style Sheets) is the language that controls how HTML pages look - colors, fonts, spacing, layout, animations, responsive behavior across screen sizes. HTML defines what's on the page; CSS defines how it's presented.
Is CSS hard to learn?
Basic CSS - selectors, colors, fonts, the box model - is easy to pick up in a few hours. The harder parts come later: specificity rules, flexbox and grid layouts, and making things look right on every screen size. The course introduces them in small steps with a live preview, so you see exactly what each rule does.
Should I learn HTML before CSS?
Yes. HTML defines the structure of a page; CSS styles it. Without HTML you have nothing to style. This CSS section is part of the HTML journey for that reason - the HTML fundamentals section comes first, then you spend the bulk of the journey styling it.
What is the difference between CSS, Flexbox, and Grid?
Flexbox and Grid are layout modules inside CSS - they're not separate technologies, they're CSS features. Flexbox is best for one-dimensional layouts (a row of cards, a navbar). Grid is best for two-dimensional layouts (a whole page, a complex card layout). Most real sites use both, and the course covers when to reach for each.
Can I learn CSS online for free?
Yes. The interactive CSS section is free - full lessons, coding exercises, a live preview, and a certificate. Everything runs in the browser so you don't need to install any editor or tooling to start.
Do I get a certificate after the CSS course?
Yes. Finishing the CSS section gives you a free certificate of completion. A verifiable proof point you can add to your resume or share on LinkedIn alongside HTML and JavaScript certificates as part of a front-end portfolio.
