<p>Depending on how your template architecture is set up, it could be as simple as using the <a href="https://craftcms.com/docs/4.x/dev/tags.html#css" rel="nofollow noreferrer"><code>css</code> tag</a>...</p>
<pre><code>{% css %}
/* Any CSS that applies only to this page */
.example {
    color: red;
}
{% endcss %}
</code></pre>

CC BY-SA 4.0
2023-06-22T11:59:06.857Z
You might want to add to your example with a field in the backend and `{% css %}{{ entry.cssFieldMarkup }}{% endcss %}`  or `{% if entry.id == ID %}{% css %}...{% endcss %}{% endif %}`. @Andy: in general I always prefer to have the info in the entry as a field (your second approach).
Max Strebel
CC BY-SA 4.0
2023-06-21T17:14:00.583Z
2023-06-21T17:14:00.583Z
Lindsey D
<p>Another option could be to add the entry id as a style hook and then scope your styles to that:</p>
<p><code>&lt;body class=&quot;{% if entry %} entryId-{{ entry.id }}{% endif %}&quot;&gt;</code></p>
<p>Then in your css simply target the ID, e.g:
<code>.entryId-19 { color: #bada55 }</code></p>

CC BY-SA 4.0
2023-08-04T13:37:08.253Z
2023-08-04T13:37:08.253Z
Seth Warburton
<p>I want to apply custom CSS to 1 page and am wondering if there is an easy way to do either of the following:</p>
<p>-add some code to the Craft Template file that has the opening  tag that can add an ID based on page slug</p>
<p>-or add a custom body id to any specific page within the &quot;Entries&quot; panel on the backend.</p>
<p>thanks in advance for any insight!
Andy</p>

<templating><css>
Applying custom CSS to a page based on custom ID or class
# Applying custom CSS to a page based on custom ID or class

(Asked by: username_0 on 2023-06-21)

I want to apply custom CSS to 1 page and am wondering if there is an easy way to do either of the following:

-add some code to the Craft Template file that has the opening tag that can add an ID based on page slug

-or add a custom body id to any specific page within the "Entries" panel on the backend.

thanks in advance for any insight!
username_0

**Tags:** templating, css


---

## 2 answers

### Answer by username_1 on 2023-06-21. Score: 1

Depending on how your template architecture is set up, it could be as simple as using the css tag...
{% css %}
/* Any CSS that applies only to this page */
.example {
    color: red;
}
{% endcss %}

> **Comments:**
> **username_2**: You might want to add to your example with a field in the backend and `{% css %}{{ entry.cssFieldMarkup }}{% endcss %}`  or `{% if entry.id == ID %}{% css %}...{% endcss %}{% endif %}`. @username_0: in general I always prefer to have the info in the entry as a field (your second approach).  

---

### Answer by username_3 on 2023-08-04. Score: 0

Another option could be to add the entry id as a style hook and then scope your styles to that:

Then in your css simply target the ID, e.g:
`.entryId-19 { color: #bada55 }`


---

