stylesheet Tag

The stylesheet tag wraps inline CSS code in <style> tags. It’s useful for embedding dynamic styles or component-specific CSS directly in templates.

Syntax

{% stylesheet %}
  /* Your CSS code here */
{% endstylesheet %}

Output

The tag wraps your CSS in a <style> element:

Input
Output

{% stylesheet %}
  .hero {
    background-color: #333;
    color: white;
  }
{% endstylesheet %}

<style>
  .hero {
    background-color: #333;
    color: white;
  }
</style>

Example Usage

Dynamic colors from settings:

{% stylesheet %}
  :root {
    --header-bg: {{ settings.header.background | default: '#ffffff' }};
    --header-text: {{ settings.header.foreground | default: '#000000' }};
    --footer-bg: {{ settings.footer.background | default: '#1a1a1a' }};
    --footer-text: {{ settings.footer.foreground | default: '#ffffff' }};
  }
{% endstylesheet %}

Block-specific styles:

{# Hero block with custom background #}
{% if block.background_image %}
  {% stylesheet %}
    #hero-{{ block.id }} {
      background-image: url('{{ block.background_image | image_url: width: 1920 }}');
      background-size: cover;
      background-position: center;
    }
  {% endstylesheet %}
{% endif %}

<section id="hero-{{ block.id }}" class="hero">
  <h1>{{ block.heading }}</h1>
</section>

Responsive breakpoints with settings:

{% stylesheet %}
  .container {
    max-width: {{ settings.global.container_width | default: '1200px' }};
    margin: 0 auto;
    padding: 0 1rem;
  }

  @media (min-width: 768px) {
    .container {
      padding: 0 2rem;
    }
  }
{% endstylesheet %}

Conditional styling:

{% if settings.global.enable_animations %}
  {% stylesheet %}
    .animate-in {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .animate-in.visible {
      opacity: 1;
      transform: translateY(0);
    }
  {% endstylesheet %}
{% endif %}