Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-06-22T11:59:06.857Z
Answers.Text: 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).
Answers.UserDisplayName: Max Strebel
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-06-21T17:14:00.583Z
Answers.LastActivityDate: 2023-06-21T17:14:00.583Z
Answers.UserDisplayName: Lindsey D
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-08-04T13:37:08.253Z
Answers.LastActivityDate: 2023-08-04T13:37:08.253Z
Answers.UserDisplayName: Seth Warburton
Body: <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>
  
Tags: <templating><css>
Title: Applying custom CSS to a page based on custom ID or class
ThreadText: # 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](https://craftcms.com/docs/4.x/dev/tags.html#css)...
  
  ```
  {% 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:
  
  `<body class="{% if entry %} entryId-{{ entry.id }}{% endif %}">`
  
  Then in your css simply target the ID, e.g:
  `.entryId-19 { color: #bada55 }`
  
  
  ---
  
  