# Why the variable in the template ?

**URL:** <https://community.hubspot.com/t/why-the-variable-in-the-template/77234>\
**Category:** CMS Development\
**Tags:** free\
**Created:** [March 15, 2023, 1:22pm UTC](https://community.hubspot.com/t/why-the-variable-in-the-template/77234 "2023-03-15T13:22:24Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![DOchieng](https://avatars.discourse-cdn.com/v4/letter/d/51bf81/32.png) [@DOchieng](https://community.hubspot.com/u/DOchieng)\
**Post date:** [March 15, 2023, 1:22pm UTC](https://community.hubspot.com/t/why-the-variable-in-the-template/77234/1 "2023-03-15T13:22:24Z")

</div>

Why do we need this variable in this template :

{% set template\_css = “../../css/templates/blog.css” %}

 ![Screenshot (3).png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/8/2/825c051a70ce302f5e6e3b052e519f24237f9ccf.png)

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [March 15, 2023, 2:50pm UTC](https://community.hubspot.com/t/why-the-variable-in-the-template/77234/2 "2023-03-15T14:50:19Z")

</div>

It loads css specific to that template. You’ll find the file at [your-theme]/css/templates/blog.css

* * *

 ![profile2022a.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7273a34ccfe3489fceebc8a36eca751481b59531.jpeg)

**Barry Grennan**

[Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity)

[Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/#contact?utm_source=HubSpotCommunity) | [LinkedIn](https://www.linkedin.com/in/barrygrennan)

---

<div class="post-metadata">

**Author:** ![DOchieng](https://avatars.discourse-cdn.com/v4/letter/d/51bf81/32.png) [@DOchieng](https://community.hubspot.com/u/DOchieng)\
**Post date:** [March 15, 2023, 3:23pm UTC](https://community.hubspot.com/t/why-the-variable-in-the-template/77234/3 "2023-03-15T15:23:27Z")

</div>

But can’t we just have it in another file ? Must it be in the template for  
it to load ?

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [March 15, 2023, 3:28pm UTC](https://community.hubspot.com/t/why-the-variable-in-the-template/77234/4 "2023-03-15T15:28:48Z")

</div>

The css is in another file.

It’s only used by that specific template so it’s only called by that template. Otherwise you’d be calling it on pages that don’t need it and that’d add to load time unnecessarily.

Edit: slight correction, I’m assuming this is the boilerplate/a theme based on the boilerplate. blog.css is used in both the blog-index template and the blog-post template, but the reasoning would be the same. I am also assuming that’s why it’s loaded like that but it would stand to reason.

* * *

 ![profile2022a.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7273a34ccfe3489fceebc8a36eca751481b59531.jpeg)

**Barry Grennan**

[Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity)

[Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/#contact?utm_source=HubSpotCommunity) | [LinkedIn](https://www.linkedin.com/in/barrygrennan)

---

<div class="post-metadata">

**Author:** ![DOchieng](https://avatars.discourse-cdn.com/v4/letter/d/51bf81/32.png) [@DOchieng](https://community.hubspot.com/u/DOchieng)\
**Post date:** [March 15, 2023, 3:36pm UTC](https://community.hubspot.com/t/why-the-variable-in-the-template/77234/5 "2023-03-15T15:36:29Z")

</div>

Sorry Barry … but I’m still not getting it .

How is it being called in the template?

What’s the syntax of calling a css file to only a specific template ?

Thanks !

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [March 15, 2023, 3:42pm UTC](https://community.hubspot.com/t/why-the-variable-in-the-template/77234/6 "2023-03-15T15:42:04Z")

</div>

You can demo it pretty simply by going into the blog.css file and adding some css.

I added this to mine:

```lia-code-sample
h1 {
 color: purple !important;
}

```

and the h1 tags on my blog became purple.

You can also see that if you remove

`{% set template_css = "../../css/templates/blog.css" %}`

from your template, the css contained in blog.css no longer applies to any pages using that template.

* * *

 ![profile2022a.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7273a34ccfe3489fceebc8a36eca751481b59531.jpeg)

**Barry Grennan**

[Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity)

[Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/#contact?utm_source=HubSpotCommunity) | [LinkedIn](https://www.linkedin.com/in/barrygrennan)