# Styling with Ignite-Element

Ignite-Element provides flexible styling options for your web components. Whether you use global styles, scoped styles, or utility-based frameworks like Tailwind CSS, you can easily manage and customize the appearance of your components.

***

### Styling Options

* **Global Styles**:\
  Apply styles globally across all components using `setGlobalStyles`. This is useful for shared design systems or CSS frameworks like Tailwind CSS or Bootstrap.
* **Scoped Styles**:\
  Use inline `<style>` tags within components to encapsulate styles. This ensures styles are limited to specific components and do not affect others.
* **Dynamic Styles**:\
  Dynamically apply styles based on component state or properties.

***

### Using Global Styles

Global styles allow you to define CSS rules that apply to all components. This is particularly useful for design systems or when using a CSS framework.

**Example: Setting Global Styles**

You can include styles from frameworks like Tailwind, Bootstrap, or custom stylesheets by referencing their paths in `setGlobalStyles`:

{% tabs %}
{% tab title="JavaScript" %}

```javascript
import { setGlobalStyles } from "ignite-element";

// Using a CSS framework like Tailwind or Bootstrap
setGlobalStyles("./styles/tailwind.css");

// Using a custom CSS stylesheet
setGlobalStyles("./styles/custom-theme.css");
```

{% endtab %}
{% endtabs %}

This approach ensures the styles are globally accessible while keeping the setup simple and maintainable.

***

### Using Scoped Styles

Scoped styles are defined directly inside components using `<style>` tags. These styles are encapsulated, ensuring they do not leak into other parts of the application.

#### Example: Scoped Styles in a Component

{% tabs %}
{% tab title="JavaScript" %}

```javascript
igniteElement.shared("scoped-styled-button", () => {
  return html`
    <style>
      .button {
        padding: 10px 20px;
        background-color: #0077cc;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      .button:hover {
        background-color: #005fa3;
      }
    </style>
    <button class="button">Click Me</button>
  `;
});

```

{% endtab %}
{% endtabs %}

***

### Using Dynamic Styles

Dynamic styles allow you to update the appearance of a component based on its state or properties. This approach is particularly useful for creating interactive or stateful UI components.

#### Example: Dynamic Styles

{% tabs %}
{% tab title="JavaScript" %}

<pre class="language-javascript"><code class="lang-javascript"><strong>igniteElement.shared("dynamic-button", (state, send) => {
</strong>  const color = state.value === "active" ? "#28a745" : "#0077cc";

  return html`
    &#x3C;button
      style="padding: 10px 20px; background-color: ${color}; color: white; border: none; border-radius: 4px; cursor: pointer;"
      @click=${() => send({ type: "TOGGLE" })}
    >
      ${state.value === "active" ? "Active" : "Inactive"}
    &#x3C;/button>
  `;
});

</code></pre>

{% endtab %}
{% endtabs %}

***

### Best Practices

* **Use Global Styles for Shared Rules**:\
  Apply global styles for consistent branding and design systems across all components.
* **Encapsulate Styles When Necessary**:\
  Use scoped styles to prevent style leakage and conflicts between components.
* **Leverage Dynamic Styles for Interactivity**:\
  Dynamically adjust styles based on the component’s state or context for interactive elements.
* **Keep Paths Simple**:\
  Use `setGlobalStyles` to include paths to stylesheets instead of directly embedding large CSS rules, ensuring clean and maintainable code.

With Ignite-Element, you can manage styles flexibly and efficiently, from global design systems to highly dynamic, scoped styles. This ensures your components remain modular and adaptable to various projects.
