<p>You can check a specific URL segment. For example if you need to load some CSS on the About page and that URL is yoursite.com/about you can do this:</p>

<pre><code>{% if craft.app.request.segments|first == 'about' %}
    {# Load CSS #}
{% endif %}
</code></pre>

<p>You could also check by <code>entry.id</code></p>

<pre><code>{% if entry is defined and entry.id == '123' %}
    {# Load CSS #}
{% endif %}
</code></pre>

<p>Replace "123" with the <code>id</code> of the entry you'd like to load the CSS for.</p>

CC BY-SA 4.0
2018-07-20T21:30:22.207Z
Good answer. But the second one will throw an error if you're on a page where `entry` does not exist.
Lindsey D
CC BY-SA 4.0
2018-07-20T21:32:55.027Z
Good point. I added a check for the entry being defined.
Simon Kuran
CC BY-SA 4.0
2018-07-20T18:16:35.417Z
2018-07-20T21:31:44.337Z
2018-07-20T21:31:44.337Z
Simon Kuran
<p>You can register your file with Twig at the place you need it</p>

<pre><code>{% do craft.app.getView().registerCssFile(alias('@assetUrl') ~ '/path/to/css') %}
</code></pre>

CC BY-SA 4.0
2018-07-20T17:16:33.340Z
yo there isn't something like {if this page} and then print the tag? I believe that's easier.
dawn
CC BY-SA 4.0
2018-07-20T18:05:17.990Z
@dawn Robin's answer is perfectly valid, and is exactly the right answer for many scenarios. If you'd like other options, please expand on your original question.
Lindsey D
CC BY-SA 4.0
2018-07-20T18:08:38.160Z
You can wrap it around an `{% if %}` condition if you want, but usually you want to register the file where you need it. So when you include a template that requires your css file you'll register it. You can execute the line as many times as you want, Craft won't mess around and only insert the `style` tag once in your header
Robin Schambach
CC BY-SA 4.0
2018-07-20T16:29:35.417Z
2018-07-20T16:29:35.417Z
Robin Schambach
<p>The best way to do that is to use the <a href="https://twig.symfony.com/doc/3.x/functions/parent.html" rel="nofollow noreferrer">Parent function of Twig</a>.</p>
<p>For this u have to define a block in your base template:</p>
<pre><code>{% block stylesheets %}
    &lt;link rel=&quot;stylesheet&quot; href=&quot;{{ rev('/assets/dist/css/main.css') }}&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://use.typekit.net/lrj4mhv.css&quot;&gt;
{% endblock %}
</code></pre>
<p>then in your page template (wich extends the base template) u just use it like this:</p>
<pre><code>{% extends &quot;_private/layout&quot; %}

{% block stylesheets %}
    {{ parent() }}

    {#here u can inject any css file u want to#}
{% endblock %}
</code></pre>

CC BY-SA 4.0
2020-08-15T11:14:57.110Z
2020-08-15T11:14:57.110Z
Slowwie
<p>I want to load a .css file <strong>only</strong> in a certain page.</p>

<p>What's the magic code I need?</p>

<templating><css>
Load a specific file/CSS only in a certain page
# Load a specific file/CSS only in a certain page

(Asked by: username_0 on 2018-07-20)

I want to load a .css file **only** in a certain page.

What's the magic code I need?

**Tags:** templating, css


---

## 3 answers

### Answer by username_1 on 2018-07-20. Score: 3

You can check a specific URL segment. For example if you need to load some CSS on the About page and that URL is yoursite.com/about you can do this:
{% if craft.app.request.segments|first == 'about' %}
    {# Load CSS #}
{% endif %}

You could also check by entry.id
{% if entry is defined and entry.id == '123' %}
    {# Load CSS #}
{% endif %}

Replace "123" with the id of the entry you'd like to load the CSS for.

> **Comments:**
> **username_2**: Good answer. But the second one will throw an error if you're on a page where `entry` does not exist.  
> **username_1**: Good point. I added a check for the entry being defined.  

---

### Answer by username_3 on 2018-07-20. Score: 3

You can register your file with Twig at the place you need it
{% do craft.app.getView().registerCssFile(alias('@assetUrl') ~ '/path/to/css') %}

> **Comments:**
> **username_0**: yo there isn't something like {if this page} and then print the tag? I believe that's easier.  
> **username_2**: @username_0 Robin's answer is perfectly valid, and is exactly the right answer for many scenarios. If you'd like other options, please expand on your original question.  
> **username_3**: You can wrap it around an `{% if %}` condition if you want, but usually you want to register the file where you need it. So when you include a template that requires your css file you'll register it. You can execute the line as many times as you want, Craft won't mess around and only insert the `style` tag once in your header  

---

### Answer by username_4 on 2020-08-15. Score: 1

The best way to do that is to use the Parent function of Twig.
For this u have to define a block in your base template:
{% block stylesheets %}
    
    
{% endblock %}

then in your page template (wich extends the base template) u just use it like this:
{% extends "_private/layout" %}

{% block stylesheets %}
    {{ parent() }}

    {#here u can inject any css file u want to#}
{% endblock %}


---

