Svelte Styling

Styling controls how a page looks, including colors, spacing, fonts, and layout. Svelte lets you write normal CSS inside a style tag, and that CSS applies only to the component it lives in.

Adding A Style Tag

Every Svelte file can hold one style tag, usually placed near the bottom of the file. The CSS rules inside this tag look exactly like regular CSS you already know.

<p class="greeting">Hello there</p>

<style>
  .greeting {
    color: teal;
    font-size: 20px;
  }
</style>

The paragraph text turns teal colored and appears larger than default text. Any other component in the project stays unaffected by this rule.

Scoped Styling Explained

Svelte automatically scopes styles to the component that defines them. Scoping means a class name used in one component never accidentally affects a matching class name in a different component.

Scoping Diagram

Component A                    Component B
------------                   ------------
.title { color: red }          .title { color: blue }

Result: Text in Component A    Result: Text in Component B
shows red, unaffected by       shows blue, unaffected by
Component B's rule             Component A's rule

Without scoping, two components using the same class name would fight over which color wins. Svelte solves this by attaching a unique hidden marker to each component's elements, so styles never leak across component boundaries.

Inline Styles Using Expressions

You can set a style directly on an element using an expression, useful when a value depends on data rather than a fixed rule.

<script>
  let barWidth = 60;
</script>

<div style="width: {barWidth}%; background: orange; height: 20px;"></div>

Changing barWidth to a new number resizes the bar on the page, since the style attribute rebuilds itself whenever the variable changes.

Conditional Classes

Svelte offers a shortcut for adding a class only when a condition is true, called the class directive.

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

<button class:active={isActive}>Click Me</button>

<style>
  .active {
    border: 2px solid green;
  }
</style>

The button gains the active class only while isActive holds true. Flipping isActive to false removes the class and the green border along with it.

A Layman Analogy

Think of scoped styles as separate paint cans, one per room in a house. Painting the kitchen wall never changes the color of the bedroom wall, even if both rooms use a can labeled the same way. Svelte keeps each component's paint can sealed off from every other component.

Common Styling Patterns

• Fixed CSS rules for consistent visual elements like headers and buttons
• Inline styles driven by variables for elements like progress bars
• Conditional classes for toggles, active states, and highlighted items
• Shared style files imported across multiple components for consistent branding

Global Styles

A global keyword tells Svelte to skip scoping for a specific rule, letting it apply everywhere in the project rather than staying locked to one component. This approach fits shared elements like the body tag or a site-wide font setting.

<style>
  :global(body) {
    font-family: Arial, sans-serif;
  }
</style>

Wrapping a selector inside the global function removes Svelte's usual scoping for that one rule alone, while every other rule in the same style tag stays scoped as normal.

Key Points

• Svelte styles live inside a style tag within the same file as the markup
• Styles stay scoped to their own component by default
• Inline styles can use expressions for values driven by data
• The class directive toggles a class based on a condition