What began as a single CSS quiz has evolved into a complete collection of 16 interactive quizzes covering both CSS and HTML. Designed to support every stage of your learning journey, the quizzes range from beginner-friendly fundamentals to advanced, in-depth challenges. You can explore them by skill level or dive into specific topics, making it easy to focus on exactly what you want to improve. With two different quiz modes available, you can choose the format that best matches your learning style and test your knowledge in a way that keeps you engaged.
What’s New
The original CSS quiz was a single set of 20 questions. It was useful, but limited. The expanded version now offers 16 distinct quizzes across two languages (CSS and HTML), two formats (by level and by topic), and a total of 240 questions. Your results are saved automatically so you can track progress over time.
All 16 Quizzes
Here’s the full breakdown of what’s available:
CSS Beginner
Selectors, properties, colors, and the box model basics
CSS Intermediate
Flexbox, Grid, positioning, pseudo-classes, and transitions
CSS Advanced
Custom properties, animations, advanced selectors, and architecture
CSS Expert
Houdini, subgrid, cascade layers, color spaces, and CSS nesting
HTML Beginner
Core tags, attributes, document structure, and semantic elements
HTML Advanced
HTML5 semantics, forms, accessibility, and performance attributes
Flexbox
Axes, alignment, sizing, wrapping, and flex shorthand
CSS Grid
Tracks, areas, named lines, auto-fill, fr units, and subgrid
Colors & Gradients
Color functions, oklch, gradients, color-mix, and blend modes
Typography
Font properties, web fonts, @font-face, and variable fonts
Animations & Transitions
@keyframes, timing functions, fill-mode, and motion preferences
Selectors & Specificity
Combinators, pseudo-classes, specificity scoring, and :has()
Box Model & Layout
Margin, padding, positioning, display types, and overflow
Forms & Inputs
Form elements, input types, validation, and datalist
Accessibility & ARIA
Semantic HTML, ARIA roles, landmarks, and tab order
Media & Embedding
Video, audio, responsive images, picture, srcset, and iframes
Two Ways to Take a Quiz
Every quiz now offers two modes. Pick the one that fits how you’re studying.
Progress Tracking
Every quiz card shows your last result – score, percentage, and a colour indicator. Green means 80% or above, amber is 50–79%, and red is below 50. Results are saved in your browser’s local storage, so they persist between visits without needing an account.
How to get the most out of it
A good starting point is the level-based quizzes – they give you a broad read of where you stand across CSS or HTML overall. Once you know your weak spots, switch to the topic quizzes to drill in on specifics. Use Learning mode when you’re studying something new, then come back and try Exam mode to test yourself honestly once you feel ready.
Revisiting quizzes periodically is also worth doing. Spaced repetition – returning to material at increasing intervals – is one of the most reliable ways to retain technical knowledge over the long term.
Ready to test your knowledge?
All 16 quizzes are free and available now on CSSPortal. No account needed – just pick a quiz and go.
