Theme implementation basics in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a CSS variable for the primary color.

CSS

:root { --primary-color: [1]; }

Drag options to blanks, or click blank then click option'

A#3498db

Bprimary-color

Ccolor-primary

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name as the value instead of a color code.

Using a color name without quotes or hash (#).

CSS variables are defined with a name starting with two dashes and assigned a value like a color code. Here, '#3498db' is a valid color value.

2fill in blank

medium

Complete the code to apply the primary color variable to the background of the body.

CSS

body { background-color: var([1]); }

Drag options to blanks, or click blank then click option'

A--primary-color

B--background-color

Cprimary-color

Dbackground-color

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dashes in the variable name.

Using the variable name without var().

To use a CSS variable, you write var(--variable-name). Here, '--primary-color' is the variable defined earlier.

3fill in blank

hard

Fix the error in the CSS code to correctly define a dark theme background color variable.

CSS

@media (prefers-color-scheme: dark) { :root { --background-color: [1]; } }

Drag options to blanks, or click blank then click option'

Ablack

Bdark

C#000000

Dbackground-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid color names like 'dark'.

Using the variable name as the value.

Color values in CSS should be valid color codes or names. '#000000' is the correct hex code for black.

4fill in blank

hard

Fill both blanks to create a CSS rule that sets text color using a variable and applies a fallback color.

CSS

p { color: var([1], [2]); }

Drag options to blanks, or click blank then click option'

A--text-color

Bblack

Cwhite

D--background-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name as the variable name.

Omitting the fallback color.

The var() function can take a fallback color if the variable is not defined. Here, '--text-color' is the variable and 'black' is the fallback.

5fill in blank

hard

Fill all three blanks to create a CSS theme with variables for background, text color, and a hover effect color.

CSS

:root { --background: [1]; --text: [2]; --hover: [3]; }

Drag options to blanks, or click blank then click option'

A#ffffff

B#333333

C#555555

D#000000

Attempts:

3 left

💡 Hint

Common Mistakes

Using colors that do not contrast well.

Mixing up the order of colors.

Here, the background is white (#ffffff), text is dark gray (#333333), and hover color is medium gray (#555555). These create a clear, readable theme.