CSS228 exercises

CSS Exercises with Answers

Practise CSS with 228 interactive exercises: multiple choice, fill-in-the-blank, output prediction and debugging. Every exercise gives instant feedback, a hint and the full solution.

Score0/ 228

1CSS Introduction

Read the lesson
Fill in the blankseasyCSS Introduction

Make every paragraph's text green.

 {
  : green;
}
Multiple choiceeasyCSS Introduction

What does CSS stand for?

Multiple choiceeasyCSS Introduction

In h1 { color: red; }, what is h1?

Fix the bugeasyCSS Introduction

The heading should be orange and 32px, but the CSS has two syntax errors. Fix them.

h1 {
  color = orange;
  font-size: 32px
  font-family: sans-serif;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The heading is orange
  • The heading is 32px
  • The font is sans-serif

2CSS Syntax

Read the lesson
Fill in the blankseasyCSS Syntax

Complete the rule.

.price 
  color crimson
}
Multiple choiceeasyCSS Syntax

How do you write a comment in CSS?

Multiple choicemediumCSS Syntax

What does h1, p { color: gray; } do?

Fix the bugmediumCSS Syntax

Three things are wrong: a // comment, a missing semicolon and a missing closing brace. Fix them so the badge is purple with white text.

// badge styles
.badge {
  background: purple
  color: white;
  padding: 4px 8px;
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The badge is purple
  • The text is white
  • The padding works

3Adding CSS to HTML

Read the lesson
Fill in the blankseasyAdding CSS to HTML

Link the external stylesheet.

<link ="stylesheet" ="main.css">
Multiple choiceeasyAdding CSS to HTML

Which way of adding CSS is best for a website with many pages?

Multiple choicemediumAdding CSS to HTML

A paragraph has an inline style color: red and the stylesheet says p { color: blue; }. What colour is it?

Fix the bugmediumAdding CSS to HTML

The internal stylesheet isn't working because it's not valid. Fix it so the button is green with white text.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Shop</title>
  <style src="">
    button { background: green; color: white }
  </stlye>
</head>
<body>
  <button>Buy</button>
</body>
</html>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The button is green
  • The button text is white

4Selectors

Read the lesson
Fill in the blankseasySelectors

Select the element with id="hero" and all elements with class="btn".

hero { height: 300px; }
btn { padding: 10px; }
Multiple choicemediumSelectors

What does article > p select?

Multiple choicemediumSelectors

Which selector targets an element with both classes btn and large?

Predict the outputhardSelectors

Which items turn red?

<h2>Title</h2>
<p>A</p>
<p>B</p>
<style> h2 + p { color: red; } </style>
Fix the bugmediumSelectors

The CSS should make only the links inside the footer white, and the .price paragraph bold. Fix the selectors.

a footer {
  color: white;
}

p .price {
  font-weight: bold;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Footer link is white
  • Header link is not white
  • Price is bold

5Combinators & Attributes

Read the lesson
Fill in the blankseasyCombinators & Attributes

Style only the list items that are direct children of .steps.

.steps  li {
  font-weight: bold;
}
Multiple choiceeasyCombinators & Attributes

Which selector matches every link whose address ends in .pdf?

Multiple choicemediumCombinators & Attributes

What does h3 ~ p select?

Multiple choicemediumCombinators & Attributes

Which selector matches <input type="EMAIL"> and <input type="email">?

Fix the bugmediumCombinators & Attributes

Only the paragraph right after each heading should be bold, and only email inputs should have a blue border. Fix the selectors.

h2 ~ p { font-weight: bold; }
input [type=email] { border: 2px solid rgb(37, 99, 235); }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Lead paragraph is bold
  • Second paragraph is not bold
  • Email input has the blue border
  • Text input is unchanged

6Colors

Read the lesson
Fill in the blankseasyColors

Set the text to white and the background to a HEX black.

.banner {
  : white;
  background-color: ;
}
Multiple choiceeasyColors

Which value is pure red?

Multiple choicemediumColors

In hsl(220 80% 50%), what does 220 control?

Multiple choicemediumColors

You want a see-through background but solid text. What should you use?

Fix the bugmediumColors

The alert should have a light red background (#ffe3e3) and dark red text (rgb(153 27 27)). Two values are broken.

.alert {
  background-color: ffe3e3;
  color: rgb(153, 27);
  padding: 10px;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Light red background
  • Dark red text

7Backgrounds

Read the lesson
Fill in the blankseasyBackgrounds

Make the photo fill the whole box and stay centred.

.cover-photo {
  background-image: ("lake.jpg");
  background-size: ;
  background-position: center;
}
Multiple choiceeasyBackgrounds

Which value shows the whole image without cropping?

Multiple choicemediumBackgrounds

What does background-repeat: no-repeat do?

Fix the bugmediumBackgrounds

The banner is invisible and its image tiles. Fix it: add a min-height of at least 150px, stop the repeating, and correct the image syntax.

.banner {
  background-color: #1e1b4b;
  background-image: "https://picsum.photos/id/1043/600/300";
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Banner is at least 150px tall
  • Uses url() for the image
  • The image does not repeat

8Borders & Radius

Read the lesson
Fill in the blankseasyBorders & Radius

Give the box a 2px solid black border and 10px rounded corners.

.box {
  border: 2px  black;
  : 10px;
}
Multiple choiceeasyBorders & Radius

How do you make a square image into a circle?

Multiple choicemediumBorders & Radius

What's the main difference between outline and border?

Fix the bugmediumBorders & Radius

The quote should have a 5px solid green left border and the tag should be a pill shape. Fix the CSS.

.quote {
  border-left: 5px green;
  padding-left: 12px;
}

.tag {
  background: #ffd23f;
  padding: 2px 10px;
  border-radius: 2;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Quote has a 5px solid left border
  • Border is green
  • Tag is pill-shaped

9Text

Read the lesson
Fill in the blankseasyText

Centre the heading and make it uppercase.

h1 {
  : center;
  text-transform: ;
}
Multiple choiceeasyText

Which removes the underline from links?

Multiple choicemediumText

Which line-height value is best for body text?

Fix the bugmediumText

The product name should stay on one line and end with "…" when too long, but it's wrapping. Fix the CSS.

.name {
  width: 200px;
  text-overflow: ellipsis;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Text doesn't wrap
  • Overflow is hidden
  • Ellipsis is set

10Fonts

Read the lesson
Fill in the blankseasyFonts

Give the heading a serif font stack and make it bold.

h2 {
  : Georgia, ;
  font-weight: ;
}
Multiple choiceeasyFonts

Which generic family should code use?

Multiple choicemediumFonts

Why do font names like "Open Sans" need quotes?

Fix the bugmediumFonts

The heading should use a bold Courier monospace stack and be 28px. The font shorthand is in the wrong order. Fix it.

.code-title {
  font: "Courier New", monospace 28px bold;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • It's bold
  • Size is 28px
  • Uses a monospace stack

11Units (px, rem, %)

Read the lesson
Fill in the blankseasyUnits (px, rem, %)

Make the text 1.25 times the root font size and the box half its parent's width.

.card {
  font-size: 1.25;
  width: 50;
}
Multiple choiceeasyUnits (px, rem, %)

If the root font size is 16px, what is 2rem?

Multiple choicemediumUnits (px, rem, %)

What does 100vh mean?

Predict the outputmediumUnits (px, rem, %)

A parent has font-size: 20px. Its child has font-size: 1.5em. How big is the child's text?

.parent { font-size: 20px; }
.child { font-size: 1.5em; }
Fix the bugmediumUnits (px, rem, %)

The card should be 320px wide on big screens but never wider than 90% of its container, and the title should use rem. Fix the invalid values.

.wrap { width: 300px; }

.card {
  width: min(320, 90);
  background: #fff1c2;
}

.title {
  font-size: 1.5;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Card is 90% of its 300px container (270px)
  • Title is 1.5rem (24px)

12Width & Height

Read the lesson
Fill in the blankseasyWidth & Height

Make the card shrink on small screens but never grow beyond 500px.

.card {
  width: 100%;
  : 500px;
}
Multiple choiceeasyWidth & Height

With box-sizing: border-box, what does width include?

Multiple choicemediumWidth & Height

Why might height: 50% have no effect?

Multiple choicemediumWidth & Height

Which property keeps a video box at 16:9 as it resizes?

Fix the bugmediumWidth & Height

The panel should be exactly 300px wide including its padding, and at least 120px tall even when empty. Fix the CSS.

.panel {
  width: 300px;
  padding: 20px;
  height: 120;
  background: #e0f2fe;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Panel is 300px wide in total
  • Panel is at least 120px tall
  • Uses min-height

13Overflow & Visibility

Read the lesson
Fill in the blankseasyOverflow & Visibility

Show scrollbars only when the content is too big.

.panel {
  max-height: 200px;
  overflow: ;
}
Multiple choiceeasyOverflow & Visibility

Which rule hides an element but keeps its space in the layout?

Multiple choicemediumOverflow & Visibility

Which three properties make a one-line ellipsis?

Multiple choicemediumOverflow & Visibility

A table is wider than the phone screen. What's the best fix?

Fix the bugmediumOverflow & Visibility

The caption should be cut off with an ellipsis on one line, and the hidden note should not take up any space. Fix it.

.caption {
  width: 200px;
  overflow: visible;
  text-overflow: ellipsis;
}
.note { visibility: hidden; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Caption stays on one line
  • Caption overflow is hidden
  • Ellipsis is set
  • Note takes no space

14Box Model

Read the lesson
Fill in the blankseasyBox Model

Make width include padding and border.

* {
  : ;
}
Multiple choiceeasyBox Model

Which layer of the box model is always transparent?

Predict the outputmediumBox Model

With the default content-box, how wide does this box appear?

.box { width: 100px; padding: 10px; border: 2px solid; }
Fix the bugmediumBox Model

The search input overflows its 300px container. Make it fit exactly without removing the padding or border.

.search {
  width: 100%;
  padding: 12px;
  border: 2px solid #15161b;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The input is exactly 300px wide
  • Padding is still 12px

15Margin & Padding

Read the lesson
Fill in the blankseasyMargin & Padding

Give the button 12px top/bottom and 24px left/right padding.

.btn {
  padding: ;
}
Multiple choiceeasyMargin & Padding

Which property adds space inside the border?

Multiple choicemediumMargin & Padding

What does margin: 5px 10px 15px 20px set the left margin to?

Fix the bugmediumMargin & Padding

The article should be centred with a max width of 300px, and its text should have 20px of space from the edges. Fix the CSS.

.post {
  max-width: 300px;
  margin: auto 0;
  margin-padding: 20px;
  background: #d6f4e4;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Left and right margins are equal (centred)
  • Padding is 20px

16Display

Read the lesson
Fill in the blankseasyDisplay

Let the link accept width and padding while staying in line.

.tag {
  display: ;
  padding: 4px 10px;
}
Multiple choiceeasyDisplay

Which value removes an element from the page completely?

Multiple choicemediumDisplay

What's the difference between display: none and visibility: hidden?

Fix the bugmediumDisplay

The three .chip links should sit in a row, each 100px wide with 8px padding, and the .secret paragraph should be removed from the layout. Fix the CSS.

.chip {
  display: block;
  width: 100px;
  padding: 8px;
  background: #eee;
}

.secret {
  visibility: hidden;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Chips sit side by side
  • Chips are 100px wide (plus padding)
  • The secret is removed from the layout

17Position & z-index

Read the lesson
Fill in the blankseasyPosition & z-index

Pin the button to the bottom-right of the screen.

.help {
  position: ;
  : 20px;
  right: 20px;
}
Multiple choicemediumPosition & z-index

An absolute element is positioned relative to…

Multiple choicemediumPosition & z-index

Which element has a z-index that actually works?

Fix the bugmediumPosition & z-index

The "NEW" ribbon should sit in the top-left corner of the product box, not the page. Fix it.

.product {
  width: 200px;
  margin: 40px;
  padding: 30px 16px 16px;
  border: 2px solid #15161b;
}

.ribbon {
  position: absolute;
  top: 0;
  left: 0;
  background: #ffd23f;
  padding: 2px 8px;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The ribbon sits inside the product box
  • Still absolutely positioned

18Float & Clear

Read the lesson
Fill in the blankseasyFloat & Clear

Float the photo to the right.

.photo {
  : right;
}
Multiple choiceeasyFloat & Clear

What happens to text after a floated image?

Multiple choicemediumFloat & Clear

Which property makes a heading start below earlier floats?

Multiple choicemediumFloat & Clear

A container holds only floated boxes and its background has vanished. What's the modern fix?

Fix the bugmediumFloat & Clear

The gallery's grey background has collapsed because its images are floated, and the caption sits beside the images instead of below. Fix both.

.gallery { background: #e5e7eb; padding: 6px; }
.thumb { float: left; width: 80px; height: 80px; margin: 4px; background: #60a5fa; }
.caption { clear: none; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Gallery wraps its floats
  • Caption clears floats
  • Thumbs are still floated

19Flexbox

Read the lesson
Fill in the blankseasyFlexbox

Lay out the children in a row with space between them, vertically centred.

.toolbar {
  display: ;
  justify-content: ;
  align-items: ;
}
Multiple choicemediumFlexbox

In a default flex row, which property centres items vertically?

Multiple choicemediumFlexbox

What does flex: 1 on every item do?

Predict the outputmediumFlexbox

How are the three boxes arranged?

.row { display: flex; flex-direction: column; justify-content: flex-end; height: 300px; }
Fix the bugmediumFlexbox

The three buttons should sit in a row, 10px apart, and be centred horizontally inside the toolbar. Fix the CSS.

.toolbar button {
  display: flex;
  justify-content: center;
  margin: 10px;
}

.toolbar {
  padding: 10px;
  background: #e5e7eb;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Toolbar is a flex container
  • Items are centred
  • Buttons are 10px apart
  • Buttons share one row

20Grid

Read the lesson
Fill in the blankseasyGrid

Create three equal columns with a 20px gap.

.grid {
  display: ;
  grid-template-columns: repeat(3, );
  : 20px;
}
Multiple choicemediumGrid

What does 1fr mean?

Multiple choicemediumGrid

Which makes an item stretch across every column?

Predict the outputhardGrid

How many columns appear in a 700px-wide container?

.g { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; }
Fix the bugmediumGrid

The dashboard should have a sidebar 120px wide and a main area taking the rest, with 10px gap. Fix the CSS.

.dash {
  grid-template-columns: 120 fr;
  gap: 10px;
}

.dash > * { background: #e1e6ff; padding: 10px; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Dash is a grid
  • Sidebar is 120px wide
  • Main area fills the rest
  • 10px gap

21Centering

Read the lesson
Fill in the blankseasyCentering

Center a child in both directions with grid.

.parent {
  display: grid;
  : center;
}
Multiple choiceeasyCentering

Which rule centers the text inside a paragraph?

Multiple choicemediumCentering

What does a block need for margin: 0 auto to center it?

Multiple choicemediumCentering

In the transform centering trick, why is translate(-50%, -50%) needed?

Fix the bugmediumCentering

The message should sit in the exact center of the stage, both horizontally and vertically. Fix the CSS.

.stage {
  height: 200px;
  text-align: center;
  vertical-align: middle;
}
.msg { margin: 0; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Message is vertically centered
  • Message is horizontally centered

22Pseudo-classes

Read the lesson
Fill in the blankseasyPseudo-classes

Change link colour on hover and stripe even rows.

a { color: tomato; }
tr:nth-child() { background: #f5f5f5; }
Multiple choicemediumPseudo-classes

Which selector targets every list item except the last?

Multiple choicemediumPseudo-classes

Why prefer :focus-visible over :focus for outlines?

Predict the outputmediumPseudo-classes

Which items are bold?

<ul><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li></ul>
<style> li:nth-child(3n) { font-weight: bold; } </style>
Fix the bugmediumPseudo-classes

The button should turn dark on hover and the first table row should be bold. The selectors are wrong. Fix them.

.go { background: #ffd23f; border: 0; padding: 10px 16px; }

.go::hover {
  background: #15161b;
  color: white;
}

tr:first {
  font-weight: bold;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The hover rule is valid
  • The first row is bold
  • The second row is not bold

23Pseudo-elements

Read the lesson
Fill in the blankseasyPseudo-elements

Add a star after every .fav element.

.fav {
  : " ★";
}
Multiple choiceeasyPseudo-elements

How many colons do pseudo-elements use in modern CSS?

Multiple choicemediumPseudo-elements

Which property is required for ::before to appear?

Fix the bugmediumPseudo-elements

Required labels should show a red asterisk after the text. Fix the CSS.

.required:after {
  color: red;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The asterisk appears
  • It's red

25Lists & Navbars

Read the lesson
Fill in the blankseasyLists & Navbars

Remove the bullets from the menu.

.menu {
  : none;
}
Multiple choiceeasyLists & Navbars

Which pseudo-element styles a list item's bullet?

Multiple choicemediumLists & Navbars

What turns a list of links into a horizontal row?

Multiple choicemediumLists & Navbars

How do you mark the current page in an accessible way?

Fix the bugmediumLists & Navbars

The menu should be a horizontal row with no bullets and no default padding, and each link should be a padded block. Fix the CSS.

.menu { list-style: square; }
.menu li { padding: 10px; }
.menu a { display: inline; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • No bullets
  • No default padding
  • Items in a row
  • Links are padded blocks

26Dropdowns & Tooltips

Read the lesson
Fill in the blankseasyDropdowns & Tooltips

Open the menu when anything inside the dropdown has keyboard focus.

.dropdown: .menu {
  display: block;
}
Multiple choiceeasyDropdowns & Tooltips

What makes the dropdown wrapper the reference point for the menu?

Multiple choicemediumDropdowns & Tooltips

What does content: attr(data-tip) do?

Multiple choicemediumDropdowns & Tooltips

Which HTML attribute makes a menu that opens on click and closes on Esc with no JavaScript?

Fix the bugmediumDropdowns & Tooltips

The menu should sit directly under the trigger, be hidden by default, and appear on hover. Fix the CSS.

.dd { position: static; }
.list { position: absolute; top: 100%; left: 0; display: block; }
.dd:hover .list { display: none; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Wrapper is positioned
  • Menu hidden by default
  • Hover reveals the menu

27Forms

Read the lesson
Fill in the blankseasyForms

Make the checkbox green with one property.

input[type="checkbox"] {
  : #16a34a;
}
Multiple choiceeasyForms

Why add font: inherit to inputs?

Multiple choicemediumForms

Which selector shows errors only after the user has interacted?

Multiple choicemediumForms

Why use at least 16px text in inputs?

Fix the bugmediumForms

The input should fill its 300px form without overflowing, use the form's font, and only allow the textarea to resize vertically. Fix it.

.f { width: 300px; font-family: Georgia, serif; }
.in { width: 100%; padding: 12px; border: 2px solid #ccc; }
.ta { resize: both; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Input fits the form
  • Input uses the form font
  • Textarea resizes vertically only

28Tables

Read the lesson
Fill in the blankseasyTables

Merge the doubled cell borders into single lines.

table {
  border-collapse: ;
}
Multiple choiceeasyTables

Which selector styles every other row for zebra stripes?

Multiple choicemediumTables

How do you keep a header row visible while scrolling a long table?

Multiple choicemediumTables

Why use font-variant-numeric: tabular-nums in a price column?

Fix the bugmediumTables

The table should have single collapsed borders, 10px cell padding, and right-aligned numbers. Fix it.

.t { border-collapse: separate; }
.t td { border: 1px solid #ccc; padding: 0; }
.num { text-align: left; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Borders collapsed
  • Cells have 10px padding
  • Numbers align right

29Images & Filters

Read the lesson
Fill in the blankseasyImages & Filters

Fill the box and crop the image without stretching it.

.thumb {
  object-fit: ;
}
Multiple choiceeasyImages & Filters

Which value shows the whole image without cropping?

Multiple choicemediumImages & Filters

How do you make a black and white image?

Multiple choicemediumImages & Filters

Which property keeps faces visible when a tall photo is cropped?

Fix the bugmediumImages & Filters

The avatar should be an 80px circle, cropped rather than stretched, and in black and white. Fix it.

.av {
  width: 80px;
  height: 60px;
  border-radius: 5%;
  object-fit: fill;
  filter: sepia(100%);
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Square 80px box
  • Round
  • Cropped, not stretched
  • Black and white

30Specificity & Cascade

Read the lesson
Fill in the blanksmediumSpecificity & Cascade

Write the specificity scores (IDs-classes-elements).

/*  */ ul.menu { }
/*  */ #logo { }
/*  */ .card:hover { }
Multiple choicemediumSpecificity & Cascade

Two rules have exactly the same specificity. Which one wins?

Multiple choicemediumSpecificity & Cascade

Which of these is inherited by default?

Predict the outputhardSpecificity & Cascade

What colour is the text?

<div id="box" class="box"><p class="text">Hello</p></div>
<style>
  #box { color: red; }
  .text { color: blue; }
</style>
Fix the bugmediumSpecificity & Cascade

The "Buy" button should be green, but a more specific rule keeps it gray. Fix it without !important and without an id, by changing the second selector so it wins.

.shop .btn {
  background: gray;
  color: white;
}

.buy {
  background: green;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The button is green
  • No !important used
  • No id selectors used

31Inheritance & !important

Read the lesson
Fill in the blankseasyInheritance & !important

Make the button use its parent's font.

button {
  font: ;
}
Multiple choiceeasyInheritance & !important

Which property is inherited by default?

Multiple choicemediumInheritance & !important

What does @layer base, utilities; do?

Multiple choicemediumInheritance & !important

Which keyword returns a property to the browser's default for that element?

Fix the bugmediumInheritance & !important

The note should use the card's colour and font, and the input should match the page font. Fix the CSS.

.card { color: rgb(22, 101, 52); font-family: Georgia, serif; }
.note { color: initial; }
.field { font-family: initial; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Note uses the card colour
  • Input uses the card font

32calc() & clamp()

Read the lesson
Fill in the blankseasycalc() & clamp()

Make the box the full width minus 40px.

.box {
  width: (100% - 40px);
}
Multiple choiceeasycalc() & clamp()

What does clamp(1rem, 4vw, 2rem) return on a very wide screen?

Multiple choicemediumcalc() & clamp()

Which line caps a width at 500px but lets it shrink on phones?

Multiple choicemediumcalc() & clamp()

Why is calc(100%-10px) ignored?

Fix the bugmediumcalc() & clamp()

The panel should be its container's width minus 50px, and the title should be clamped between 20px and 32px. Fix the CSS.

.wrap { width: 400px; }
.panel { width: calc(100%-50px); background: #e0f2fe; }
.title { font-size: clamp(32px, 3vw); }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Panel is 350px wide
  • Title size is between 20px and 32px
  • Uses clamp with three values

33CSS Variables

Read the lesson
Fill in the blankseasyCSS Variables

Define a variable and use it.

:root {
  : #f0592b;
}
.link {
  color: ;
}
Multiple choiceeasyCSS Variables

Where should you put global variables?

Multiple choicemediumCSS Variables

What does var(--size, 16px) do if --size doesn't exist?

Fix the bugmediumCSS Variables

The card variables aren't working. Fix the definition and usage so the card has a #e1e6ff background and 20px padding.

:root {
  card-bg: #e1e6ff;
  --card-pad = 20px;
}

.card {
  background: var(card-bg);
  padding: --card-pad;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Background comes through
  • Padding is 20px
  • Uses variables

34Media Queries

Read the lesson
Fill in the blankseasyMedia Queries

Apply the rule only on screens 768px wide or more.

@ (: 768px) {
  .menu { display: flex; }
}
Multiple choicemediumMedia Queries

In a mobile-first approach, which queries do you mostly write?

Multiple choicemediumMedia Queries

Which media feature detects the user's dark mode setting?

Fix the bugmediumMedia Queries

On screens 700px and wider, the two columns should sit side by side. The media query is broken. Fix it.

.cols { display: grid; gap: 10px; }
.cols > div { background: #d6f4e4; padding: 10px; }

@media min-width = 700px {
  .cols { grid-template-columns: 1fr 1fr }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • A valid (min-width: 700px) media rule exists
  • The media rule sets two columns

35Responsive Design

Read the lesson
Fill in the blankseasyResponsive Design

Complete the mobile-first media query for screens 768px and wider.

@media (: 768px) {
  .layout { grid-template-columns: 1fr 1fr; }
}
Multiple choiceeasyResponsive Design

What does mobile first mean?

Multiple choicemediumResponsive Design

Where should you add a breakpoint?

Multiple choicemediumResponsive Design

Which line makes a responsive grid without media queries?

Fix the bugmediumResponsive Design

This page overflows on phones. Use border-box sizing, a fluid container capped at 800px, and a fluid image.

.page { width: 800px; padding: 20px; }
.pic { width: 1200px; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Page uses border-box
  • Page is capped at 800px
  • Image is fluid

36Responsive Images

Read the lesson
Fill in the blankseasyResponsive Images

Complete the fluid image rule.

img {
  : 100%;
  height: auto;
}
Multiple choiceeasyResponsive Images

Why add height: auto to fluid images?

Multiple choicemediumResponsive Images

What's the modern way to make an iframe embed responsive?

Multiple choicemediumResponsive Images

Which function provides sharper background images on high-density screens?

Fix the bugmediumResponsive Images

The video embed should fill its container at 16:9 with no border, and the photo should shrink to fit without distorting. Fix the CSS.

.vid { width: 560px; height: 315px; }
.pic { width: 800px; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Video fills the column
  • Video is 16:9
  • Photo fits and keeps its shape

37Responsive Typography

Read the lesson
Fill in the blankseasyResponsive Typography

Keep the paragraph to about 65 characters per line.

.prose {
  max-width: 65;
}
Multiple choiceeasyResponsive Typography

Why use rem for font sizes?

Multiple choicemediumResponsive Typography

Which line height suits body text best?

Multiple choicemediumResponsive Typography

What does text-wrap: balance do?

Fix the bugmediumResponsive Typography

The heading should use clamp() between 2rem and 3rem, the paragraph should use a unitless 1.6 line height, and lines should be at most 60ch. Fix it.

.t { font-size: 6vw; }
.b { line-height: 26px; max-width: 900px; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Heading uses clamp between 2rem and 3rem
  • Heading size is within limits
  • Unitless line height
  • Lines limited to 60ch

38Responsive Layouts

Read the lesson
Fill in the blankseasyResponsive Layouts

Fit as many 200px columns as possible in each row.

.grid {
  display: grid;
  grid-template-columns: repeat(, minmax(200px, 1fr));
}
Multiple choiceeasyResponsive Layouts

Which property places an element in a named grid area?

Multiple choicemediumResponsive Layouts

What gives a sticky footer on short pages?

Multiple choicemediumResponsive Layouts

Why does .content { flex: 999 1 400px; } work in a sidebar layout?

Fix the bugmediumResponsive Layouts

The layout should stack on phones and show main and aside side by side from 600px using named areas. Fix the area names and the media query.

.pg { display: grid; grid-template-areas: "main" "aside"; }
.m { grid-area: content; }
.a { grid-area: aside; }
@media (max-width: 600px) {
  .pg { grid-template-columns: 2fr 1fr; grid-template-areas: "main aside"; }
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Main uses the main area
  • Mobile first media query
  • Side by side on wide screens

39Responsive Navbar

Read the lesson
Fill in the blankseasyResponsive Navbar

Show the menu when the toggle button says it's open.

.menu-toggle[aria-expanded=""] + .menu {
  display: block;
}
Multiple choiceeasyResponsive Navbar

Which element should open and close a hamburger menu?

Multiple choicemediumResponsive Navbar

In a mobile-first navbar, what does the min-width media query do?

Multiple choicemediumResponsive Navbar

Which HTML gives a collapsible menu with no JavaScript?

Fix the bugmediumResponsive Navbar

The menu should be hidden by default, shown when the button has aria-expanded="true", and always shown from 600px. Fix the CSS.

.mn { display: block; }
.tg[aria-expanded="false"] + .mn { display: block; }
@media (max-width: 600px) { .mn { display: none; } }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Open menu is visible
  • Hidden by default
  • Always shown on wide screens

40Container Queries

Read the lesson
Fill in the blankseasyContainer Queries

Make the wrapper a container that tracks its width.

.wrap {
  container-type: ;
}
Multiple choiceeasyContainer Queries

What does a container query measure?

Multiple choicemediumContainer Queries

What does 10cqi equal?

Multiple choicemediumContainer Queries

When are media queries still the better choice?

Fix the bugmediumContainer Queries

The card should go side by side when its wrapper is at least 300px wide. Fix the container and the query.

.c { container-type: size; display: grid; }
@media (min-width: 300px) {
  .c { grid-template-columns: 1fr 1fr; }
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Wrapper is an inline-size container
  • Uses @container
  • Card is side by side

41:has(), :is() & :where()

Read the lesson
Fill in the blankseasy:has(), :is() & :where()

Style a label that contains a checked input.

label:(input:checked) {
  font-weight: bold;
}
Multiple choiceeasy:has(), :is() & :where()

What is :has() often called?

Multiple choicemedium:has(), :is() & :where()

What specificity does :where(#main .nav) a have?

Multiple choicemedium:has(), :is() & :where()

Which selector matches list items except the last one?

Fix the bugmedium:has(), :is() & :where()

Cards containing an image should have zero padding, and cards without an image should have a yellow background rgb(254, 252, 232). Fix the selectors.

.card { padding: 12px; }
.card img:has() { padding: 0; }
.card:not(img) { background: rgb(254, 252, 232); }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Card with image has no padding
  • Card without image keeps padding
  • Only the text card is yellow

42Nesting & Logical Props

Read the lesson
Fill in the blankseasyNesting & Logical Props

Style the card's hover state inside the nested rule.

.card {
  :hover { box-shadow: 0 4px 12px rgb(0 0 0 / 0.1); }
}
Multiple choiceeasyNesting & Logical Props

What does & h3 mean inside .card { }?

Multiple choicemediumNesting & Logical Props

Which logical property sets top and bottom padding?

Multiple choicemediumNesting & Logical Props

What does .dark & match when nested inside .card?

Fix the bugmediumNesting & Logical Props

The button should turn green on hover (not its children), and use logical padding of 10px top and bottom and 20px start and end. Fix it.

.b {
  padding-left: 20px;
  :hover { background: rgb(22, 163, 74); }
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Block padding is 10px
  • Inline padding is 20px
  • Hover uses &

43Dark Mode & Colours

Read the lesson
Fill in the blankseasyDark Mode & Colours

Apply these styles only when the device is in dark mode.

@media (: dark) {
  :root { --bg: #0f172a; }
}
Multiple choiceeasyDark Mode & Colours

What does color-scheme: light dark tell the browser?

Multiple choicemediumDark Mode & Colours

What does light-dark(white, black) return in dark mode?

Multiple choicemediumDark Mode & Colours

Why name variables --text and --bg rather than --black and --white?

Fix the bugmediumDark Mode & Colours

The panel should be dark when data-theme="dark" is set on it, using variables. Fix the theme rule and the variable usage.

.panel { --bg: rgb(255, 255, 255); --text: rgb(17, 24, 39); background: white; color: var(--text); }
.panel.dark { --bg: rgb(15, 23, 42); --text: rgb(226, 232, 240); }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Dark background via the variable
  • Light text
  • Uses the data-theme attribute

44Transitions

Read the lesson
Fill in the blankseasyTransitions

Animate the opacity over 0.3 seconds.

.photo {
  : opacity  ease;
}
.photo:hover { opacity: 0.7; }
Multiple choicemediumTransitions

Where should you put the transition property?

Multiple choicemediumTransitions

Which properties are cheapest to animate smoothly?

Fix the bugmediumTransitions

The link's colour should fade over 0.25s both on hover and when the mouse leaves. Fix the CSS.

.link {
  color: #4467ff;
}

.link:hover {
  color: #f0592b;
  transition: colour 0.25s;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The transition is on the normal state

45Transforms

Read the lesson
Fill in the blankseasyTransforms

Rotate the arrow 180 degrees and grow it by 50%.

.arrow {
  transform: (180deg) (1.5);
}
Multiple choiceeasyTransforms

Does transform: scale(2) push neighbouring elements away?

Multiple choicemediumTransforms

How do you make an element rotate around its top-left corner?

Fix the bugmediumTransforms

The badge should be rotated -8deg and scaled to 1.1. Only one transform is working. Fix it.

.badge {
  display: inline-block;
  padding: 6px 12px;
  background: #e5484d;
  color: white;
  transform: rotate(-8deg);
  transform: scale(1.1);
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Both rotate and scale are applied

46Animations

Read the lesson
Fill in the blankseasyAnimations

Apply the "spin" animation for 2 seconds, forever.

.logo {
  animation:  2s linear ;
}
Multiple choiceeasyAnimations

Which at-rule defines an animation's steps?

Multiple choicemediumAnimations

Which value keeps the final keyframe's styles after the animation ends?

Predict the outputmediumAnimations

How many times does the bell ring?

.bell { animation: ring 0.5s ease 3 alternate; }
Fix the bugmediumAnimations

The heart should pulse forever, but nothing moves. Fix the CSS (keep the name "beat").

.heart {
  display: inline-block;
  font-size: 40px;
  animation: beat;
}

@keyframe beat {
  50% { transform: scale(1.3); }
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Animation name is beat
  • Has a duration
  • Loops forever
  • @keyframes beat is defined

47Shadows & Gradients

Read the lesson
Fill in the blankseasyShadows & Gradients

Add a soft shadow that's 4px down with a 10px blur.

.card {
  : 0  10px rgb(0 0 0 / 15%);
}
Multiple choiceeasyShadows & Gradients

Which property adds a shadow to text?

Multiple choicemediumShadows & Gradients

Where can you use linear-gradient()?

Fix the bugmediumShadows & Gradients

The button should have a left-to-right gradient from #17a865 to #4467ff and a hard 4px shadow with no blur in #15161b. Fix the CSS.

.cta {
  padding: 12px 22px;
  border: 2px solid #15161b;
  color: white;
  background-color: linear-gradient(90deg, #17a865, #4467ff);
  box-shadow: 4px #15161b;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Has a linear gradient
  • Gradient uses the two colours
  • Hard 4px shadow with no blur

48clip-path & Blend Modes

Read the lesson
Fill in the blankseasyclip-path & Blend Modes

Clip the avatar into a circle.

.avatar {
  clip-path: (50%);
}
Multiple choiceeasyclip-path & Blend Modes

What happens to the parts of an element outside its clip-path?

Multiple choicemediumclip-path & Blend Modes

Which feature can make soft, faded edges?

Multiple choicemediumclip-path & Blend Modes

What does background-blend-mode blend?

Fix the bugmediumclip-path & Blend Modes

The box should be a triangle pointing up, and the excerpt should fade from black to transparent towards the bottom. Fix the CSS.

.tri { clip-path: polygon(50% 0 100% 100% 0 100%); }
.ex { mask-image: linear-gradient(transparent, black); }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Triangle clip is valid
  • Mask fades out towards the bottom

49Scroll Snap & Columns

Read the lesson
Fill in the blankseasyScroll Snap & Columns

Make the container snap horizontally on every scroll.

.track {
  overflow-x: auto;
  scroll-snap-type: x ;
}
Multiple choiceeasyScroll Snap & Columns

Which property goes on each slide?

Multiple choicemediumScroll Snap & Columns

What does scroll-margin-top: 80px do on a heading?

Multiple choicemediumScroll Snap & Columns

What does columns: 3 200px mean?

Fix the bugmediumScroll Snap & Columns

The track should snap on the x axis, each slide should snap at its start, and links inside the page should scroll smoothly. Fix it.

.tr { display: flex; overflow-x: auto; }
.sl { flex: 0 0 80%; scroll-snap-type: x mandatory; }
html { scroll-behavior: auto; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Container snaps on x
  • Slides snap at the start
  • Smooth scrolling

Next steps

Take the CSS QuizTimed, with explanations CSS Cheat SheetQuick syntax lookup Build a projectPut it all together All exercisesEvery language
Esc
↑↓ to navigateEnter to open