Script, markup, and style sections in Svelte - Mini Project: Build & Apply

Script, markup, and style sections in Svelte

📖 Scenario: You are creating a simple Svelte component to display a greeting message with some styled text.

🎯 Goal: Build a Svelte component that uses the <script> section to define a variable, the markup section to display it, and the <style> section to add color and font size.

📋 What You'll Learn

Create a <script> section with a variable greeting set to 'Hello, Svelte!'

Use the markup section to display the greeting variable inside an <h1> tag

Add a <style> section that colors the <h1> text blue and sets the font size to 2rem

Ensure the component structure follows Svelte conventions with exactly one <script>, one markup root, and one <style> section

💡 Why This Matters

🌍 Real World

Svelte components are used to build interactive web pages with clean separation of logic, markup, and styles.

💼 Career

Understanding Svelte's component structure is essential for frontend developers working with modern web frameworks.

1

Create the <script> section with a greeting variable

Write a <script> section and inside it create a variable called greeting with the exact value 'Hello, Svelte!'.

Svelte

  // Your code here

Hint

Use let greeting = 'Hello, Svelte!'; inside the <script> tags.

2

Add markup to display the greeting inside an <h1> tag

Below the <script> section, add an <h1> tag that displays the greeting variable using curly braces {greeting}.

Svelte

  let greeting = 'Hello, Svelte!';


 tag here to show the greeting -->

Hint

Use <h1>{greeting}</h1> to show the variable in markup.

3

Add a <style> section to style the <h1> text

Add a <style> section below the markup. Inside it, write CSS to make the h1 text color blue and font size 2rem.

Svelte

  let greeting = 'Hello, Svelte!';


{greeting}


  /* Your CSS here */

Hint

Write CSS inside <style> to style h1 with color: blue; and font-size: 2rem;.

4

Ensure the component has correct Svelte structure

Check that your component has exactly one <script> section with let greeting = 'Hello, Svelte!';, one <h1> tag showing {greeting}, and one <style> section styling h1 with blue color and 2rem font size.

Svelte

  let greeting = 'Hello, Svelte!';


{greeting}


  h1 {
    color: blue;
    font-size: 2rem;
  }

Hint

Make sure all three sections are present and correct.

Practice

1. Which section in a Svelte component is used to write JavaScript logic?

easy

A. <logic> section

B. <script> section

C. <markup> section

D. <style> section

Solution

1. Step 1: Identify the purpose of each section

   The <script> section is for JavaScript logic, <style> is for CSS, and markup is the HTML structure.

2. Step 2: Match the section to JavaScript logic

   Since logic means JavaScript code, it belongs in the <script> section.

3. Final Answer:

   <script> section -> Option B

4. Quick Check:

   Logic = <script> section [OK]

Hint: Logic always goes inside <script> tags in Svelte [OK]

Common Mistakes:

• Confusing <style> with <script>
• Thinking markup is for logic
• Assuming a <logic> tag exists

2. Which of the following is the correct way to add scoped styles inside a Svelte component?

easy

A. <style global> h1 { color: red; } </style>

B. <style scoped> h1 { color: red; } </style>

C. <style> h1 { color: red; } </style>

D. <css> h1 { color: red; } </css>

Solution

1. Step 1: Understand Svelte's style scoping

   Svelte automatically scopes styles inside the <style> tag to the component without needing extra attributes.

2. Step 2: Identify correct syntax

   The correct syntax is just <style> with CSS inside. Adding scoped or global changes behavior or is invalid.

3. Final Answer:

   <style> h1 { color: red; } </style> -> Option C

4. Quick Check:

   Default <style> is scoped in Svelte [OK]

Hint: Use plain <style> for scoped CSS in Svelte [OK]

Common Mistakes:

• Adding 'scoped' attribute which is unnecessary
• Using <css> tag instead of <style>
• Confusing global styles with scoped styles

3. What will be rendered by this Svelte component?

<script>
  let name = 'Anna';
</script>

<h1>Hello {name}!
</h1>

<style>
  h1 { color: blue; }
</style>

medium

A. Hello Anna! with default text color

B. Hello {name}! with default text color

C. Error because style is inside component

D. Hello Anna! with blue text

Solution

1. Step 1: Understand variable interpolation in markup

   The {name} inside markup inserts the value of the variable name, which is 'Anna'.

2. Step 2: Recognize scoped styles effect

   The <style> section styles the h1 with blue color scoped to this component.

3. Final Answer:

   <h1> Hello Anna! </h1> with blue text -> Option D

4. Quick Check:

   Variable interpolation + scoped style = blue 'Hello Anna!' [OK]

Hint: Variables in {} show their value; styles apply scoped [OK]

Common Mistakes:

• Thinking {name} prints literally
• Assuming styles don't apply inside component
• Confusing style scoping with errors

4. Identify the error in this Svelte component:

<script>
  let count = 0
</script>

<button on:click="count++">Click me</button>

<style>
  button { font-size: 1.2rem; }
</style>

medium

A. Incorrect event handler syntax with quotes

B. Missing semicolon after let count = 0

C. Style section must be before script

D. Button tag is not closed properly

Solution

1. Step 1: Check event handler syntax in markup

   In Svelte, event handlers use on:event={handler} without quotes around the handler expression.

2. Step 2: Identify the incorrect usage

   The code uses on:click="count++" with quotes, which is invalid syntax in Svelte.

3. Final Answer:

   Incorrect event handler syntax with quotes -> Option A

4. Quick Check:

   Event handlers need curly braces, no quotes [OK]

Hint: Use on:click={count++}, not quotes [OK]

Common Mistakes:

• Adding quotes around event handler
• Thinking semicolon is mandatory in script
• Believing style must come before script

5. You want to create a Svelte component that shows a message in red only if a variable error is true. Which combination of script, markup, and style is correct?

<script>
  let error = true;
</script>

<!-- markup here -->

<style>
  .error { color: red; }
</style>

hard

A. {#if error}<p class="error">Error occurred</p>{/if} shows red text only if error is true

B. <p>{error ? 'Error occurred' : ''}</p> but no red color applied

C. <p class="error">Error occurred</p> always shows red text

D. {#if error}<p style="color: red;">Error occurred</p>{/if} but style section is ignored

Solution

1. Step 1: Use conditional markup to show message only if error is true

   The {#if error} ... {/if} block conditionally renders content based on the variable.

2. Step 2: Apply CSS class for red color

   Using class="error" applies the scoped style .error { color: red; } correctly.

3. Final Answer:

   {#if error}<p class="error">Error occurred</p>{/if} -> Option A

4. Quick Check:

   Conditional + class with style = correct red message [OK]

Hint: Use {#if} for condition and class for styling [OK]

Common Mistakes:

• Showing message always without condition
• Not applying CSS class for color
• Using inline style ignoring style section