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.

Practice

1. What is the main purpose of CSS custom properties (variables) in a Svelte component?

easy

A. To import external CSS files into the component

B. To write JavaScript code inside CSS

C. To store reusable values that can be changed dynamically in CSS

D. To create new HTML elements automatically

Solution

1. Step 1: Understand CSS custom properties

   CSS custom properties allow you to define variables in CSS that store values like colors or sizes.

2. Step 2: Recognize their use in Svelte

   In Svelte, these variables can be used inside style blocks to reuse and dynamically change styles.

3. Final Answer:

   To store reusable values that can be changed dynamically in CSS -> Option C

4. Quick Check:

   CSS variables = reusable style values [OK]

Hint: CSS variables hold reusable style values [OK]

Common Mistakes:

• Thinking CSS variables run JavaScript
• Confusing CSS variables with importing files
• Believing CSS variables create HTML elements

2. Which of the following is the correct syntax to define a CSS custom property named --main-color with the value blue inside a Svelte component's style block?

easy

A. div { --main-color: blue }

B. style { --main-color = blue; }

C. :root { main-color: blue; }

D. :root { --main-color: blue; }

Solution

1. Step 1: Identify correct CSS variable syntax

   CSS variables start with two dashes and use a colon to assign values, e.g., --main-color: blue;.

2. Step 2: Recognize the proper selector for global variables

   The :root selector defines variables globally in CSS.

3. Final Answer:

   :root { --main-color: blue; } -> Option D

4. Quick Check:

   Correct CSS variable syntax uses colon and double dashes [OK]

Hint: Use :root and colon for CSS variables [OK]

Common Mistakes:

• Using equals sign (=) instead of colon (:)
• Omitting the double dashes (--)
• Defining variable without a selector

3. Given the following Svelte component style and markup, what color will the text inside the <p> tag appear?

<style>
  :root {
    --text-color: red;
  }
  p {
    color: var(--text-color);
  }
</style>

<p>Hello World</p>

medium

A. Red

B. Blue

C. Black

D. Green

Solution

1. Step 1: Check the CSS variable definition

   The variable --text-color is set to red inside :root, making it globally available.

2. Step 2: Check the usage in the p selector

   The paragraph text color is set to var(--text-color), which uses the variable value red.

3. Final Answer:

   Red -> Option A

4. Quick Check:

   CSS variable value = red [OK]

Hint: var(--variable) uses the defined CSS variable value [OK]

Common Mistakes:

• Assuming default black color instead of variable
• Confusing variable name or value
• Ignoring :root scope

4. Identify the error in this Svelte component style block that tries to use a CSS custom property:

<style>
  :root {
    --bg-color: #eee
  }
  div {
    background-color: var(--bg-color);
  }
</style>

medium

A. Missing semicolon after #eee in :root block

B. Incorrect variable name syntax, should not use dashes

C. Cannot use var() inside Svelte style blocks

D. Background color property name is wrong

Solution

1. Step 1: Check CSS syntax in :root block

   CSS requires a semicolon after each property value. The line --bg-color: #eee is missing a semicolon.

2. Step 2: Verify other syntax elements

   Variable name syntax with dashes is correct, var() usage is valid, and property name background-color is correct.

3. Final Answer:

   Missing semicolon after #eee in :root block -> Option A

4. Quick Check:

   CSS properties need semicolons [OK]

Hint: Check for missing semicolons in CSS blocks [OK]

Common Mistakes:

• Forgetting semicolons after CSS declarations
• Thinking variable names can't have dashes
• Believing var() is invalid in Svelte styles

5. In a Svelte component, you want to create a button whose background color changes based on a CSS custom property --btn-bg. You want to allow the parent component to set this variable dynamically. Which approach correctly allows this dynamic styling?

<!-- Child.svelte -->
<script>
  export let bgColor = 'lightblue';
</script>

<button style="background-color: var(--btn-bg);">Click Me</button>

<style>
  button {
    color: white;
  }
</style>

How should the parent component pass the background color to the child using CSS custom properties?

hard

A. Pass bgColor prop and use it directly in the child's style attribute without CSS variables

B. Set --btn-bg on the child component's element using inline style: <Child style="--btn-bg: green;" />

C. Define --btn-bg inside the child's <style> block only

D. Use JavaScript to change the button's background color instead of CSS variables

Solution

1. Step 1: Understand CSS variable scope in Svelte

   CSS custom properties can be set on elements and inherited by children. Setting --btn-bg on the child component's root element allows the child's styles to use it.

2. Step 2: Recognize how to pass CSS variables from parent

   The parent can set the CSS variable via inline style on the child component tag, e.g., <Child style="--btn-bg: green;" />, so the child's CSS picks it up.

3. Final Answer:

   Set --btn-bg on the child component's element using inline style: <Child style="--btn-bg: green;" /> -> Option B

4. Quick Check:

   Pass CSS variables via inline style on component [OK]

Hint: Pass CSS variables via inline style on component tag [OK]

Common Mistakes:

• Trying to set CSS variables only inside child styles
• Ignoring CSS variable inheritance and scope
• Using props without connecting to CSS variables