Why is CSS kept separate from HTML?

So one stylesheet can style many pages, and design changes happen in one place

Browsers can't read them together

What happens when CSS contains a property the browser doesn't recognise?

That declaration is ignored and the rest still works

Why are external stylesheets faster for multi-page sites?

The browser caches the file and reuses it on every page

They're compressed automatically

CSS198 questions in the bank

CSS Quiz: Test Your CSS Knowledge

Pick how many questions you want, choose a difficulty and go. You'll see why each answer is right or wrong, then you can retry to beat your score.

Questions

Difficulty

Topic

Mode

Which language controls how a web page looks?
- CSS
- HTML
- JavaScript
- SQL
Which symbol separates a property from its value?
- =
- ;
- :
- -
Why is CSS kept separate from HTML?
- Browsers can't read them together
- CSS is faster than HTML
- So one stylesheet can style many pages, and design changes happen in one place
- It's required by law
What ends each CSS declaration?
- A comma
- A semicolon
- A period
- A colon
What happens when CSS contains a property the browser doesn't recognise?
- The page crashes
- That declaration is ignored and the rest still works
- All the CSS stops working
- An error pops up for the user
In a { text-decoration: none; }, what is text-decoration?
- Property
- Selector
- Value
- Declaration block
Which attribute adds inline CSS?
- css
- style
- class
- design
Where should the <link rel="stylesheet"> usually go?
- Inside <head>
- At the end of <body>
- Inside each element
- In the CSS file
Why are external stylesheets faster for multi-page sites?
- They're compressed automatically
- They load before HTML
- The browser caches the file and reuses it on every page
- They skip the cascade
Which selector matches every element?
- *
- all
- .all
- #all
What does a[href$=".pdf"] select?
- Links containing "pdf"
- Links starting with ".pdf"
- All PDF files on the page
- Links whose href ends with ".pdf"
Which should you use most for styling?
- IDs
- Inline styles
- Classes
- The universal selector
How many elements does .menu li style in a menu with 3 top items and 2 nested sub-items?
- 3
- 2
- 1
- 5
What does a space between two selectors mean, as in footer a?
- The elements are siblings
- Any a inside a footer, at any depth
- Only direct children
- Both selectors match the same element
Which combinator selects only direct children?
- ~
- >
- +
- space
What does [data-state] match?
- Elements whose class is data-state
- Only elements where data-state is empty
- Nothing, the value is missing
- Any element with a data-state attribute, whatever its value
Which selector matches links that start with https?
- a[href^="https"]
- a[href$="https"]
- a[href~="https"]
- a:https
How does the browser read .card > p a?
- Left to right, starting with .card
- It checks all three at random
- Right to left: find every a, then check it's in a p that is a child of .card
- Only the first part matters
Which property sets the text colour?
- text-color
- font-color
- foreground
- color
What is #fff short for?
- #f0f0f0
- #ff0000
- #ffffff
- #fff000
What does opacity: 0 do?
- Makes the element black
- Removes the element from the page
- Nothing
- Makes the element fully transparent (but it still takes up space)
What is the minimum WCAG contrast ratio for normal body text?
- 4.5:1
- 2:1
- 3:1
- 10:1
Which property sets a background image?
- background-image
- background-src
- image
- bg-image
In a background list of several layers, which one appears on top?
- The last one listed
- The largest image
- The first one listed
- They blend equally
CSS image paths in url() are relative to…
- the HTML file
- the website root always
- the browser
- the CSS file
Which border style is a series of dashes?
- dotted
- lined
- broken
- dashed
Which property rounds only the top-left corner?
- border-top-radius
- radius-top-left
- border-top-left-radius
- border-radius-left
border: 4px dashed; with no colour will use…
- black always
- transparent
- Nothing, because it's invalid
- the element's text colour (currentColor)
Which property spaces out letters?
- letter-spacing
- word-spacing
- text-spacing
- font-spacing
What does text-transform: capitalize do to "hello world"?
- HELLO WORLD
- Hello world
- hello world
- Hello World
Why is a unitless line-height like 1.6 recommended?
- It loads faster
- It scales with each element's font size
- Units aren't allowed
- It's always 16px
What is font-weight: 700 the same as?
- bold
- normal
- light
- italic
In a font stack, which font does the browser use?
- The last one
- The first one it has available
- A random one
- All of them blended
Which two values are required in the font shorthand?
- weight and style
- family and line-height
- style and size
- size and family
Which unit is relative to the root element's font size?
- em
- rem
- px
- vw
What does clamp(1rem, 5vw, 3rem) return on a very wide screen?
- 1rem
- 5vw
- 3rem
- An error
max-width: 65ch limits text to about…
- 65 characters per line
- 65 pixels
- 65% of the screen
- 65 words
How wide is a <div> by default?
- As wide as its text
- As wide as its container
- 100 pixels
- Half the screen
A box has width: 200px; padding: 10px; border: 5px solid and the default box-sizing. How wide does it look?
- 200px
- 215px
- 230px
- 220px
Which rule wins if width: 800px and max-width: 100% are both set in a 400px container?
- max-width, so the box is 400px
- width, so the box is 800px
- Whichever comes last
- Neither, the box disappears
What does width: fit-content do?
- Fills the whole page
- Shrinks the box to its content, up to the container width
- Sets width to zero
- Removes padding
Why is 100dvh often better than 100vh on phones?
- It adjusts as mobile browser toolbars appear and disappear
- It's faster
- It works in older browsers
- It includes the keyboard
What is the default value of overflow?
- hidden
- auto
- visible
- scroll
What's the difference between overflow: scroll and overflow: auto?
- There's none
- auto only scrolls sideways
- scroll hides the content
- scroll always shows scrollbars; auto shows them only when needed
Which hidden element can still be clicked?
- One with display: none
- One with visibility: hidden
- One with opacity: 0
- None of them
How do you hide a text label visually but keep it for screen readers?
- display: none
- visibility: hidden
- color: transparent
- A visually-hidden class that shrinks and clips the element
What does overscroll-behavior: contain do?
- Stops scrolling from passing to the page when the inner box reaches its end
- Hides scrollbars
- Makes the box scroll faster
- Prevents the box from scrolling
What's the order of the box model layers from inside out?
- margin, border, padding, content
- content, padding, border, margin
- content, margin, border, padding
- padding, content, border, margin
Which overflow value adds scrollbars only when needed?
- auto
- scroll
- hidden
- visible
Does a background colour fill the padding area?
- No, only the content
- Only with border-box
- Yes
- Only with overflow: hidden
margin: 0 auto on a block with a width does what?
- Removes all margins
- Centres it vertically
- Makes it full width
- Centres it horizontally
Two paragraphs: the first has margin-bottom: 40px, the second margin-top: 25px. What's the gap?
- 65px
- 25px
- 40px
- 15px
Can padding be negative?
- Yes
- No, only margins can be negative
- Only in flexbox
- Only with border-box
Which display value makes an element a Flexbox container?
- flex
- block
- inline
- box
Does width work on an element with display: inline?
- Yes
- Only in percentages
- No
- Only on links
Which hidden element is still announced by screen readers?
- display: none
- visibility: hidden
- The hidden attribute
- opacity: 0
Which position value is the default?
- relative
- absolute
- static
- normal
What does position: relative; top: 20px; do?
- Moves the element 20px up
- Moves it to 20px from the top of the page
- Moves the element 20px down from its normal spot, keeping its original space
- Nothing
Why might position: sticky not work?
- It's not supported anywhere
- An ancestor has overflow: hidden, or no top value is set
- It needs z-index
- It only works on headers
What is float mainly used for today?
- Whole page layouts
- Centring elements
- Wrapping text around images and quotes
- Animations
What does clear: left do?
- Moves the element below any left floats before it
- Removes the element
- Floats the element left
- Clears its text
Why does a parent with only floated children collapse?
- Floats are invisible
- Parents can't have backgrounds
- The browser has a bug
- Floats are taken out of the normal flow for the parent's height
What does the classic clearfix use?
- An extra span
- JavaScript
- A negative margin
- An ::after pseudo-element with clear: both
What does shape-outside: circle(50%) change?
- The image becomes round
- Text wraps around a circle instead of the float's rectangle
- The float moves to the centre
- It clears the float
Which property turns on Flexbox?
- flex: on
- layout: flex
- position: flex
- display: flex
What does flex-wrap: wrap allow?
- Text to wrap inside items
- Items to overlap
- Items to move onto new lines when there isn't room
- Wrapping the container in a border
Which justify-content value puts equal space between items but none at the edges?
- space-between
- space-around
- space-evenly
- center
In a flex column, how do you push the last item to the bottom?
- position: bottom
- align-self: bottom
- Give it margin-top: auto
- order: -1
Grid is designed for layouts in…
- two dimensions (rows and columns)
- one dimension
- three dimensions
- text only
What does grid-column: span 2 do?
- Moves the item to column 2
- Adds 2 columns to the grid
- Makes the item two columns wide
- Creates a 2px gap
What does minmax(200px, 1fr) mean?
- Exactly 200px
- Between 1px and 200px
- 200 columns
- At least 200px, at most one fraction of available space
Which is the shortest way to center a child both ways?
- position: center
- align: middle
- display: grid; place-items: center
- margin: center
Which flexbox property centers items along the main axis?
- align-items
- align-content
- flex-center
- justify-content
Why doesn't vertical centering show even with align-items: center?
- Flexbox can't center vertically
- It needs !important
- The child needs a border
- The parent is only as tall as the child
How do you center an image horizontally with margin auto?
- img { display: block; margin: 0 auto; }
- img { margin: auto; } alone
- img { align: center; }
- img { text-align: center; }
Which works for a child with a set width and height inside a positioned parent?
- position: absolute; center: 0
- position: fixed; margin: 0
- position: absolute; inset: 0; margin: auto
- position: static; inset: auto
Which pseudo-class applies while the mouse is over an element?
- :active
- :over
- :mouse
- :hover
What does .card:has(img) select?
- Cards that contain an image
- Images inside cards
- Cards without images
- The first image in each card
li:nth-child(odd) selects items…
- 2, 4, 6…
- 1, 3, 5, 7…
- Only the first
- Items with odd text
Which pseudo-element styles the first letter of a paragraph?
- :first-letter-only
- ::letter(1)
- ::first-letter
- ::initial
Which pseudo-element styles list bullets?
- ::bullet
- ::list
- ::point
- ::marker
Can you put ::after on an <img>?
- Yes, always
- Only with display: block
- Only in Firefox
- No, because void elements have no content box for it
Why keep underlines on links inside paragraphs?
- They load faster
- Browsers require them
- Colour alone isn't enough for everyone to spot links
- They help SEO
What is the recommended order for link states?
- hover, link, active, visited
- active, hover, visited, link
- Any order works
- link, visited, hover, active
Why give buttons a transparent border?
- For accessibility
- So solid and outline buttons stay the same size
- It's required
- To add a shadow
When should you use <a> rather than <button>?
- When it takes the user to another page or URL
- When it's blue
- When it submits a form
- When it opens a menu
Which property can :visited change?
- color
- font-size
- background-image
- display
Which value counts with Roman numerals?
- roman
- decimal
- numeric
- upper-roman
What does margin-left: auto do on a flex item in a navbar?
- Centres it
- Removes its margin
- Pushes it and later items to the far right
- Hides it
Why use a list for navigation?
- It tells assistive technology how many related links there are
- Lists load faster
- Lists are required for links
- Flexbox only works on lists
What does list-style-position: inside do?
- Hides the bullet
- Puts the bullet inside the item's content box, so text wraps under it
- Moves the bullet to the right
- Makes the list horizontal
Can list-style-type use a custom string?
- No, only keywords
- Only emoji
- Yes, for example list-style-type: "→ "
- Only in ordered lists
Which position value does the dropdown menu itself use?
- static
- relative
- sticky
- absolute
Why use visibility: hidden alongside opacity: 0?
- It stops the hidden menu catching clicks and focus
- It's faster
- Opacity doesn't work alone
- It's required for transitions
Why are hover-only menus a problem on phones?
- Phones can't show absolute elements
- Touch screens have no hover, so the menu may never open reliably
- Phones block CSS
- Menus are too small
Where do popovers appear?
- Inside their parent's stacking context
- At the bottom of the page
- In the top layer, above everything else
- In a new window
How is the tooltip arrow usually drawn in CSS?
- With an image
- With text-shadow
- With a zero-size element and one coloured border
- With an SVG only
What does resize: vertical do on a textarea?
- Lets the user drag it taller but not wider
- Hides it
- Makes it scroll sideways
- Fixes its height
What does appearance: none do to a select?
- Hides it
- Disables it
- Removes the browser's default look, including the arrow
- Removes its options
Which pseudo-class matches a ticked checkbox?
- :selected
- :checked
- :active
- :on
Why shouldn't a placeholder replace a label?
- Placeholders are slow
- Labels are required for CSS
- Placeholders don't work on phones
- Placeholders disappear when typing starts and are often hard to read
Which grid value gives two columns on wide screens and one on phones without a media query?
- repeat(2, 1fr)
- auto auto
- repeat(auto-fit, minmax(200px, 1fr))
- 50% 50%
What does padding on td improve most?
- Readability, by giving each cell room
- Page speed
- Borders
- Table width
When does border-spacing have an effect?
- Always
- Only on th
- Only with table-layout: fixed
- Only when border-collapse is separate
What's the simplest way to make a wide table usable on phones?
- Shrink the font to 8px
- Wrap it in a container with overflow-x: auto
- Remove the table
- Use position: absolute
How should numbers in a column be aligned?
- Left
- Centre
- Right
- Justified
What does table-layout: fixed do?
- Sets column widths from the first row, which is faster and more predictable
- Stops the table scrolling
- Makes the table position: fixed
- Hides overflow
What is the default object-fit value?
- cover
- fill
- contain
- auto
What does filter: brightness(0.5) do?
- Makes the image twice as bright
- Makes the image darker
- Removes colour
- Blurs the image
What does backdrop-filter affect?
- The element's own content
- Only images
- The page background colour
- What is behind the element
Why add a gradient behind a caption on a photo?
- It's required for figcaption
- It loads faster
- It keeps white text readable on light parts of the photo
- It makes the image smaller
Why add width and height attributes to img when CSS sets the size?
- The browser reserves space before the image loads, preventing layout jumps
- They override CSS
- They make the image sharper
- They're needed for object-fit
Which selector is the most specific?
- div p
- .intro
- #main
- p
What's the specificity of nav ul li a?
- 0-1-3
- 0-0-4
- 1-0-0
- 0-4-0
What specificity does :where(.card, #hero) p have?
- 1-0-1
- 0-1-1
- 0-0-0
- 0-0-1
Why doesn't a border set on a parent appear on its children?
- It's a bug
- Borders need !important
- border isn't an inherited property
- Children can't have borders
Which styles win when cascade layers are used?
- Unlayered styles, then the last layer declared
- Layered styles always beat unlayered ones
- The first layer declared
- The most specific, ignoring layers
What does all: unset do?
- Deletes the element
- Removes classes
- Turns off JavaScript
- Resets every property to inherit or initial
When is !important reasonable?
- On every colour
- In utility classes that must always apply, like a hidden class
- To fix any conflict quickly
- It's never allowed
Are CSS custom properties inherited?
- No, never
- Only on :root
- Yes, they inherit by default
- Only with !important
What can calc() do that a plain value can't?
- Use colours
- Run JavaScript
- Change HTML
- Mix different units, such as % and px
Which function works as a minimum limit?
- min()
- max()
- calc()
- round()
What order do clamp()'s arguments go in?
- max, preferred, min
- preferred, min, max
- min, preferred, max
- Any order
Can calc() use CSS variables?
- Yes, for example calc(var(--gap) * 2)
- No
- Only colour variables
- Only inside :root
Why add a rem part to a fluid font size like 1rem + 2vw?
- So the text still responds to the user's zoom and font size settings
- It's faster
- vw doesn't work alone
- To support old browsers
CSS custom property names must start with…
- $
- @
- #
- --
Can you change a CSS variable's value inside a specific class?
- No, variables are global constants
- Only with JavaScript
- Only in :root
- Yes, and its children see the new value
Which JavaScript changes a root variable?
- document.documentElement.style.setProperty('--brand', 'red')
- document.css('--brand', 'red')
- root.brand = 'red'
- var('--brand') = 'red'
What does responsive design mean?
- A site that loads fast
- One site that adapts its layout to any screen size
- A separate mobile website
- A site with animations
@media (max-width: 600px) applies when the screen is…
- wider than 600px
- exactly 600px
- 600px wide or narrower
- in portrait mode only
What do container queries respond to?
- The size of a parent container
- The screen size
- The number of children
- The device type
What are the three original ingredients of responsive design?
- Fluid layouts, flexible images and media queries
- HTML, CSS and JavaScript
- Flexbox, grid and floats
- Phones, tablets and desktops
Why test at 360px wide?
- It's the largest phone size
- Browsers require it
- It's the default desktop size
- It's a common small phone width where overflow bugs show up
Which media query is mobile first?
- @media (max-width: 768px)
- @media (device: phone)
- @media (min-width: 768px)
- @media screen and (mobile)
What is the most common cause of sideways scrolling on phones?
- Too many colours
- Fixed pixel widths that are wider than the screen
- Using rem
- Flexbox
Why use rem-based breakpoints such as 48rem?
- They load faster
- px isn't allowed in media queries
- They're required by Google
- The layout also adapts when the user increases their default font size
Why does an image overflow on phones without CSS?
- Phones can't shrink images
- The alt text is too long
- It's a browser bug
- Images display at their natural pixel size by default
What does display: block fix on images?
- The small gap below the image caused by inline alignment
- Blurriness
- Slow loading
- Overflow
Why shouldn't important photos be CSS backgrounds?
- Backgrounds load slower
- Backgrounds can't be responsive
- They have no alt text, so screen readers miss them
- They can't be cropped
What does loading="lazy" do?
- Lowers image quality
- Shows a spinner
- Loads the image twice
- Delays downloading until the image is close to scrolling into view
Which Core Web Vital measures content jumping as images load?
- Largest Contentful Paint
- Cumulative Layout Shift
- Interaction to Next Paint
- Time to First Byte
What is 1.5rem with the default browser font size?
- 15px
- 1.5px
- 24px
- 32px
Why add rem to a vw value in clamp's middle value?
- Because vw doesn't work alone
- So text still grows when the reader zooms or changes their font size
- To make it smaller
- For older browsers
What is a comfortable line length for body text?
- 20 to 30 characters
- 150 characters
- As wide as the screen
- About 60 to 75 characters
Why should line-height usually be unitless?
- Units aren't allowed
- It's faster
- Each element multiplies it by its own font size
- It removes spacing
What does text-wrap: pretty improve?
- Avoiding a single word left alone on a paragraph's last line
- Heading font weight
- Letter spacing
- Underline style
Which tool suits a two-dimensional page layout best?
- float
- CSS grid
- inline-block
- tables
What's the difference between auto-fit and auto-fill?
- There's none
- auto-fit only works in flexbox
- auto-fill keeps empty tracks, so a few items don't stretch as wide
- auto-fill needs a media query
Why wrap the minimum in min(240px, 100%)?
- So a single column never overflows a container narrower than 240px
- To make cards bigger
- It's required syntax
- To add a gap
What does the full-bleed pattern's middle column do?
- Hides overflow
- Keeps text in a readable column while wide elements span all columns
- Centres images only
- Adds a sidebar
Why should you avoid using order to rearrange content heavily?
- It's slow
- It's not supported
- It breaks grid
- Keyboard and screen reader users follow the HTML order, which then doesn't match what they see
What does aria-expanded="true" tell screen readers?
- The menu is large
- The control's menu is open
- The page is loading
- The button is disabled
How do CSS hamburger icons usually draw three bars?
- One element plus ::before and ::after
- Three images
- Three buttons
- A border-image
Why show the word "Menu" next to or instead of the icon?
- It loads faster
- Icons aren't allowed
- It's needed for SEO
- Some users don't recognise the three-line icon
What should happen when the user presses Esc with the menu open?
- Nothing
- The page reloads
- The menu closes
- The menu moves
How can you stop the menu animation for people who prefer less motion?
- Only add the transition inside @media (prefers-reduced-motion: no-preference)
- @media (motion: off)
- animation: none on body
- It can't be detected
Which property creates a container?
- display: container
- @container
- position: container
- container-type
Why are container queries useful for reusable components?
- They're faster than media queries
- They replace flexbox
- The same component adapts to wherever it's placed
- They work without CSS
What does container: card / inline-size do?
- Names the container card and sets its type to inline-size
- Creates a class called card
- Sets the width to inline
- Imports a component
With nested containers, which one does an unnamed @container query use?
- The outermost one
- The nearest ancestor container
- The body
- All of them
Why does container-type: size often cause boxes to collapse?
- It's a bug
- It sets display: none
- It removes padding
- The container can no longer get its height from its content
What does :is(h1, h2) p match?
- Headings inside paragraphs
- Only h1 and h2
- Nothing
- Paragraphs inside an h1 or an h2
What's the only difference between :is() and :where()?
- :where() only takes one selector
- :where() has zero specificity
- :is() is older
- :is() can't use classes
What does h2:has(+ p) match?
- An h2 that is immediately followed by a p
- A p after an h2
- An h2 inside a p
- All h2 elements
What happens if one selector in :is() is invalid?
- The whole rule is dropped
- The page errors
- All selectors match everything
- Only the invalid part is ignored
What is the specificity of :not(#hero)?
- The same as an id, (1, 0, 0)
- Zero
- The same as a class
- The same as an element
Do you need Sass to nest CSS today?
- No, modern browsers support native nesting
- Yes, always
- Only for media queries
- Only in Chrome
In a left-to-right language, what is margin-inline-end?
- The top margin
- The left margin
- The bottom margin
- The right margin
What does inset: 0 do?
- Removes padding
- Sets top, right, bottom and left to 0
- Adds an inner shadow
- Resets margins
Why keep nesting shallow?
- Browsers limit it to two levels
- It makes CSS slower to download
- Nested rules can't use classes
- Deep nesting creates long, highly specific selectors that are hard to override
Inside a nested @media block, which element do bare declarations apply to?
- body
- Every element
- The parent rule's selector
- None, they're ignored
Which media query detects dark mode?
- @media (dark-mode: on)
- @media (theme: dark)
- @media (prefers-color-scheme: dark)
- @media screen and (dark)
How does a manual toggle usually work?
- It reloads a dark stylesheet
- It changes the operating system setting
- It inverts the page with a filter
- JavaScript sets an attribute such as data-theme on the root, and CSS responds
What does color-mix(in oklch, blue 20%, white) produce?
- A light blue tint
- Pure blue
- Pure white
- An error
Why is oklch() useful for palettes?
- It's shorter than hex
- Equal lightness values look equally light to people
- It's the only colour format in dark mode
- It supports transparency
Why shouldn't dark mode use pure black with pure white text?
- Browsers don't support it
- The extreme contrast causes glare and eye strain for many readers
- It's slower
- It fails contrast checks
What does transition-duration: 300ms mean?
- 3 seconds
- 300 frames
- 30 seconds
- 0.3 seconds
Can you transition display: none to display: block?
- Yes, it fades
- No. display has no in-between values, so fade opacity instead
- Only with ease-in
- Only on hover
Which timing function starts slow and speeds up?
- ease-in
- ease-out
- linear
- step-end
Which function moves an element?
- move()
- shift()
- translate()
- position()
How do you centre an absolutely positioned element of unknown size?
- margin: auto only
- align: center
- transform: center
- top: 50%; left: 50%; transform: translate(-50%, -50%);
In transform: translateX(100px) rotate(90deg), what's applied first visually?
- The translate
- The rotate (transforms apply right to left)
- Both at once with no difference
- Neither
What does infinite mean in an animation?
- It repeats forever
- Very slow
- It never starts
- It runs once
What's the main difference between a transition and an animation?
- Animations can't use transform
- Animations can run on their own, loop and have many steps; transitions only animate a change between two states
- Transitions are newer
- There is no difference
How do you make several elements animate one after another?
- Use different keyframes for each
- Use animation-order
- Give each a slightly larger animation-delay
- It's impossible in CSS
What does the third length in box-shadow: 2px 2px 8px black control?
- Spread
- Blur
- Opacity
- Inset
How do you put a shadow inside an element?
- box-shadow: inside …
- inner-shadow: …
- box-shadow: inset …
- Negative blur
Which gradient sweeps around a centre point like a pie chart?
- linear-gradient
- radial-gradient
- circle-gradient
- conic-gradient
Which clip-path function takes a list of points?
- circle()
- polygon()
- inset()
- ellipse()
What does inset(10px round 16px) create?
- A rectangle pulled in 10px on every side with 16px rounded corners
- A circle
- A shadow
- A border
When can clip-path animate smoothly?
- Always
- Never
- Only with JavaScript
- When both shapes use the same function and number of points
Which blend mode darkens, like layering ink?
- screen
- difference
- multiply
- normal
Can you click the hidden part of a clipped element?
- Yes, the whole box is clickable
- No, only the visible shape receives clicks
- Only with pointer-events: auto
- Only on touch screens
What does scroll-behavior: smooth change?
- Jumps to anchor links animate instead of happening instantly
- Scroll speed with the mouse wheel
- It hides scrollbars
- It makes pages load faster
When is proximity better than mandatory?
- Never
- For small carousels
- When using columns
- When snapped items can be taller than the screen, such as long sections
Why make each slide about 80% wide?
- It's required for snapping
- It loads faster
- The next slide peeks in, showing users they can swipe
- It hides the scrollbar
Which property stops a card being split between two columns?
- column-span: none
- break-inside: avoid
- overflow: hidden
- display: block
How do you make a carousel usable with the keyboard?
- It's not possible without JavaScript
- Give the scroll container tabindex="0" and a label so it can be focused and scrolled with arrow keys
- Use scroll-snap-stop
- Add hover styles

RelaxedNo clock. Read the explanation after each answer.

Timed30 seconds per question. Great for revision.

Exam modeNo feedback until the end, then a full review.

About the CSS quiz

The question bank holds 198 questions drawn from 49 CSS lessons: 51 easy, 116 medium and 31 hard. Every time you start, the quiz picks a fresh random selection that matches your settings, so retaking it is a good way to practise. After each answer, or at the end in exam mode, you'll see why the right answer is right, and every question you miss links back to the lesson that teaches it.

CSS Quiz: Test Your CSS Knowledge

About the CSS quiz

What the CSS quiz covers

Basics

Intermediate

Advanced