-- online Search!

Critical thinking for an AI world

HTML and CSS Quizzes

Review markup, layout, styling, and the assumptions that make an interface usable.

Choose from 41 quizzes below. Practice the concepts you need to judge a solution, recognize faulty assumptions, and find errors in logic or code. Every answer includes an explanation and a link back to the relevant tutorial.

Start 101

Reviewing an HTML Document

Check document structure and browser assumptions instead of memorizing tags.

4 questions

Take quiz

Reviewing CSS Rules

Separate which elements a rule affects from what its declarations change.

4 questions

Take quiz

Choosing Where Styles Live

Review reuse, delivery, and the maintenance costs behind stylesheet choices.

4 questions

Take quiz

Selector Scope and Structure

Catch assumptions about reuse, uniqueness, and relationships between elements.

4 questions

Take quiz

Attribute Matching Decisions

Review existence, exact values, tokens, and URL-string assumptions.

4 questions

Take quiz

Positional Selector Assumptions

Check what gets counted and whether position really represents the intended item.

4 questions

Take quiz

Reviewing CSS Inspection Evidence

Use live browser evidence to test a styling hypothesis, then verify the lasting fix.

4 questions

Take quiz

Techniques

Keeping Pixel Art Crisp

Review scaling, font delivery, and the limits of one-screen visual checks.

4 questions

Take quiz

Reviewing SVG Color Changes

Check SVG boundaries, targeted shapes, and which style source actually controls the color.

4 questions

Take quiz

Reviewing a Scrollable Area

Check bounded space, access to overflow, and real interaction behavior.

4 questions

Take quiz

Reviewing Overlapping Elements

Separate grid placement, alignment, and stacking order.

4 questions

Take quiz

Reviewing Link States

Check overlapping states and feedback for more than mouse users.

4 questions

Take quiz

Reviewing Rounded Shapes

Judge corner geometry and responsive behavior without memorizing shorthand order.

4 questions

Take quiz

Reviewing Focus Visibility

Protect keyboard feedback when replacing browser defaults.

4 questions

Take quiz

Reviewing Clipped Content

Check boundaries, positioning, and whether clipping hides information people need.

4 questions

Take quiz

Reviewing Drop Caps

Check paragraph scope, content updates, and how enlarged letters affect the surrounding text.

4 questions

Take quiz

Reviewing Hidden UI

Separate appearance, layout, interaction, and actual removal.

4 questions

Take quiz

Reviewing Input Hints

Check whether placeholder styling supports understandable, readable forms.

4 questions

Take quiz

Reviewing Cursor Feedback

Check whether a cursor communicates real behavior rather than merely suggesting it.

4 questions

Take quiz

Diagnosing Image Gaps

Look for the layout mechanism instead of repeatedly changing unrelated spacing values.

4 questions

Take quiz

Stable Hover Feedback

Review painted emphasis, reserved space, and layout shifts.

4 questions

Take quiz

Reviewing CSS Circles

Check the final box geometry and choose a representation that fits the interaction.

4 questions

Take quiz

Reviewing Responsive Images

Distinguish proportional sizing from sharpness and fitting a fixed space.

4 questions

Take quiz

Reviewing CSS Support

Check what prefix automation can and cannot guarantee.

4 questions

Take quiz

Reviewing Full-Height Pages

Check actual hit areas, percentage dependencies, and growth beyond one screen.

4 questions

Take quiz

Reviewing Radial Stripe Patterns

Judge sharp boundaries, repetition, and control over individual stripes.

4 questions

Take quiz

Layout

Reviewing Grid Layout Assumptions

Check item counts, fixed dimensions, and the space between tracks.

4 questions

Take quiz

Reviewing Flexbox Centering

Check container ownership, available space, and the meaning of each axis.

4 questions

Take quiz

Reviewing Horizontal Centering

Check free space, containing blocks, and the difference between a box and its contents.

4 questions

Take quiz

Reviewing Color Choices

Separate color coordinates, editing intent, and perceived contrast.

4 questions

Take quiz

Reviewing Fixed UI

Check document flow, persistent overlays, and usability while scrolling.

4 questions

Take quiz

Reviewing Full-Space Layouts

Trace sizing dependencies and avoid confusing edge-to-edge content with a global reset.

4 questions

Take quiz

Color and Effects

Reviewing Text Selection Colors

Check selection readability, scope, and fallback behavior.

4 questions

Take quiz

Reviewing Shadow Geometry

Separate position, softness, size, and contrast when diagnosing a shadow.

4 questions

Take quiz

Reviewing Visual Filters

Check filter scope, compositional intent, performance, and preserved interaction.

4 questions

Take quiz

Putting it All Together

Reviewing an HTML Starting Point

Treat boilerplate as a starting point with assumptions to check.

4 questions

Take quiz

Reviewing a Search Box

Protect input usability while adding icons, focus feedback, and animation.

4 questions

Take quiz

Reviewing Contact Usability

Choose contact options around visitors' needs and the information needed to help.

4 questions

Take quiz

Reviewing a Vertical Menu

Check destinations, click areas, readable labels, and keyboard feedback.

4 questions

Take quiz

Reviewing a Horizontal Menu

Preserve meaningful navigation while changing the visual arrangement.

4 questions

Take quiz

Reviewing Styled Tables

Preserve data relationships while evaluating sizing, headers, and row patterns.

4 questions

Take quiz

Also in this tutorial series: Setting CSS styles with JavaScript, Growing circles behind image links. These quizzes live in their original sections, so your progress stays together.

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over a bazillion subscribers!

SUBSCRIBE NOW

Creating engaging and entertaining content for designers and developers since 1998.

Follow:

Popular

Loose Ends

:: Copyright KIRUPA 2026 //--