CSS custom properties (variables) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a CSS custom property named --main-color with the value blue.

Svelte

<style>
  :root {
    [1]: blue;
  }
</style>

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

AmainColor

Bmain-color

Ccolor-main

D--main-color

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the two dashes at the start of the property name.

Using camelCase instead of kebab-case.

The correct syntax to define a CSS custom property is to start with two dashes, like --main-color.

2fill in blank

medium

Complete the code to use the CSS custom property --main-color as the background color.

Svelte

<style>
  div {
    background-color: [1];
  }
</style>

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

Avar(--main-color)

Bvar(main-color)

Cvar(mainColor)

Dvar(--mainColor)

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dashes inside var().

Using camelCase instead of kebab-case.

To use a CSS custom property, wrap its name with var() and include the two dashes.

3fill in blank

hard

Fix the error in the code to correctly set the text color using the CSS variable --text-color.

Svelte

<style>
  p {
    color: [1];
  }
</style>

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

Atext-color

Bvar(text-color)

Cvar(--text-color)

D--text-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name without var().

Forgetting the dashes in the variable name.

The correct way to use a CSS variable is with var(--text-color), including the dashes and wrapped in var().

4fill in blank

hard

Fill both blanks to define a CSS variable --padding with value 1rem and use it for padding.

Svelte

<style>
  :root {
    [1]: 1rem;
  }
  section {
    padding: [2];
  }
</style>

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

A--padding

Bpadding

Cvar(--padding)

Dvar(padding)

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable name without dashes when defining.

Not wrapping the variable name with var() when using.

Define the variable with --padding and use it with var(--padding).

5fill in blank

hard

Fill all three blanks to define --font-size as 16px, use it for font size, and set a fallback of 14px.

Svelte

<style>
  :root {
    [1]: 16px;
  }
  h1 {
    font-size: var([2], [3]);
  }
</style>

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

A--font-size

C14px

D16px

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the two dashes in variable names.

Not providing a fallback value correctly.

Define the variable --font-size, then use var(--font-size, 14px) to apply it with a fallback.