<p>Whenever Craft receives an URL request, <a href="https://craftcms.com/docs/routing" rel="nofollow noreferrer">it tries to figure out what resource to serve the client</a>. Among other things, it'll look inside your <code>templates</code> folder and try to find the requested resource there – which is why a request to <code>styles/index.css</code> works if that file exists inside your templates folder. However, Craft only looks at files in your templates folder when it evaluates the request URL, nowhere else – which is why <code>../styles/index.css</code> doesn't work.</p>

<p>In any case, <a href="https://craftcms.stackexchange.com/a/3093/1098">it's usually a bad idea to serve external resources (CSS, JS files etc) from outside your public web root</a>. If you can, put your CSS and JavaScript files somewhere in your public root directory, and make sure you're not using relative URLs for <code>{% includeCssFile %}</code> – i.e. you should use <code>{% includeCssFile '/styles/index.css' %}</code> if you have a folder called <code>styles</code> in your public web root (alongside your <code>index.php</code> file).</p>

<p>Another option is to inline your CSS files, in which case you can put the files whereever you want. I recommend <a href="https://github.com/aelvan/Inlin-Craft" rel="nofollow noreferrer">the Inlin plugin</a> for all your inlining needs:</p>

<pre><code>&lt;head&gt;
    &lt;style&gt;
        {{ craft.inlin.er('styles/index.css') }}
    &lt;/style&gt;
&lt;/head&gt;
</code></pre>

<p>If you want to inline files without a plugin, you can use the Twig <code>source</code> function – outlined in <a href="https://craftcms.stackexchange.com/a/12314/1098">this answer</a>.</p>

CC BY-SA 3.0
2016-08-14T14:47:50.370Z
Thank you @Mats. I placed the **styles** folder inside the **public** folder and used this line

{% includeCssFile "public/styles/index.css" %}

to 'call' it.

Worked like a charm.

Thanks also for the 'inlin' plugin info as well.
Crafty Cockney
CC BY-SA 3.0
2016-08-14T18:21:57.517Z
No problem, happy to help out. It might be obvious, but it's also worth mentioning that you don't _have_ to use `includeCssFile` to add an external stylesheet to your markup – a plain old, hard coded `<link>` tag will do just fine (one of the best things about Craft is that it makes no assumptions about your front end). The primary use case for `includeCssFile` is when you want to include a CSS file from inside a [`{% block %}`](http://twig.sensiolabs.org/doc/tags/extends.html) tag or an included template partial.
Mats Mikkel Rummelhoff
CC BY-SA 3.0
2016-08-15T00:45:00.347Z
Re 'plain old hard code' - You know what it's like when you've got the chance to use some exciting new (Twig) code. You just 'medically' need to use it :)

The only problem I have with accessing the CSS code via the 'new' method is that when I do a 'Live Preview' within 'Entries', all the CSS code is lost. When I hard-code the CSS code into '_layout.html' (as per original setting), the 'Live Preview' works fine. However, when I use a full URL like this `{% includeCssFile http://localhost/sitename/assets/styles/index.css %}` the Live Preview works fine.
Crafty Cockney
CC BY-SA 3.0
2016-08-15T01:47:32.110Z
To resolve my own problem above, this [link](http://craftcms.stackexchange.com/questions/4728/how-to-set-up-siteurl-to-work-with-both-http-and-https) solves everything. Just place it in the craft/config/general.php script and use it like this `<link rel="stylesheet" href="{{ siteUrl }}assets/styles/index.css">`. However, I cannot get it to work in conjunction with the `includeCssFile` command.
Crafty Cockney
CC BY-SA 3.0
2018-03-30T14:20:59.010Z
@CraftyCockney i just stumbled across this question and solved your problem by using `{% includeCssFile siteUrl ~ "assets/styles/index.css" %}`
GlabbichRulz
CC BY-SA 3.0
2016-08-14T14:04:22.590Z
2016-08-14T14:35:31.737Z
2017-04-13T12:51:00.200Z
Mats Mikkel Rummelhoff
<p>In regards to the includeCssFile issue, I was able to get siteUrl to work by using <code>{% includeCssFile siteUrl~"css/application.css" %}</code>.</p>

CC BY-SA 3.0
2017-09-13T20:04:06.800Z
2017-09-13T20:04:06.800Z
royalenfield
<p>I'm a newbie to Craft and am working with a raw version of Craft CMS 2.6.2903 on localhost and am trying to understand some of the basics. The problem that I am encountering at the moment is to do with the Twig <strong><em>includeCssFile</em></strong> command.</p>

<p>I want to create a folder that will contain all my CSS details, so I went to <strong>_layout.html</strong> and moved all the CSS script from between the 
<strong>style</strong> tags into a new script which I saved at <strong>craft/templates/styles/index.css</strong>. I then deleted the <strong>style</strong> tags from _layout.html. </p>

<p>I added this line to the &lt;<strong>head</strong>> section of the <strong>_layout.html</strong> script:</p>

<p><code>{% includeCssFile "styles/index.css" %}</code></p>

<p>So that the &lt;<strong>head</strong>> section looked like this:</p>

<pre><code>&lt;head&gt;
&lt;meta charset="utf-8" /&gt;
&lt;title&gt;{% if title is defined %}{{ title }} - {% endif %}{{ siteName }}&lt; /title&gt;
&lt;link rel="home" href="{{ siteUrl }}" /&gt;
{% includeCssFile "styles/index.css" %}
&lt;/head&gt;
</code></pre>

<p>and once again the Home page worked perfectly.</p>

<p>The problem occurred after I moved the whole <strong>styles</strong> folder up one level (i.e. to the same level as the <em>templates</em> folder).</p>

<p>I changed the calling code to 
{% includeCssFile "../styles/index.css" %}
and refreshed the home page and had lost all the page styling. I played around with removing the '<strong>../</strong>' and changing it to '<strong>./</strong>' and even '<strong>/</strong>' but it still didn't work. When I returned the <strong>styles</strong> folder to the <strong>templates</strong> folder, it all worked okay again.</p>

<p>There have been a couple of similar questions already posted on this group, but they haven't resolved my problem (<a href="https://craftcms.stackexchange.com/questions/15662/including-css-js-assets">link 1</a>, <a href="https://craftcms.stackexchange.com/questions/15264/why-is-news-entry-not-extending-layout">link 2</a>)</p>

<p>Can someone please tell me what I need to do?</p>

<css><include>
Newbie: Trying to understand includeCssFile
# Newbie: Trying to understand includeCssFile

(Asked by: username_0 on 2016-08-14)

I'm a newbie to Craft and am working with a raw version of Craft CMS 2.6.2903 on localhost and am trying to understand some of the basics. The problem that I am encountering at the moment is to do with the Twig includeCssFile command.
I want to create a folder that will contain all my CSS details, so I went to _layout.html and moved all the CSS script from between the 
style tags into a new script which I saved at craft/templates/styles/index.css. I then deleted the style tags from _layout.html. 
I added this line to the <head> section of the _layout.html script:
{% includeCssFile "styles/index.css" %}
So that the <head> section looked like this:


{% if title is defined %}{{ title }} - {% endif %}{{ siteName }}< /title>

{% includeCssFile "styles/index.css" %}


and once again the Home page worked perfectly.
The problem occurred after I moved the whole styles folder up one level (i.e. to the same level as the templates folder).
I changed the calling code to 
{% includeCssFile "../styles/index.css" %}
and refreshed the home page and had lost all the page styling. I played around with removing the '../' and changing it to './' and even '/' but it still didn't work. When I returned the styles folder to the templates folder, it all worked okay again.
There have been a couple of similar questions already posted on this group, but they haven't resolved my problem (link 1, link 2)
Can someone please tell me what I need to do?

**Tags:** css, include


---

## 2 answers

### Answer by username_1 on 2016-08-14. Score: 3 | Accepted answer

Whenever Craft receives an URL request, it tries to figure out what resource to serve the client. Among other things, it'll look inside your templates folder and try to find the requested resource there – which is why a request to styles/index.css works if that file exists inside your templates folder. However, Craft only looks at files in your templates folder when it evaluates the request URL, nowhere else – which is why ../styles/index.css doesn't work.
In any case, it's usually a bad idea to serve external resources (CSS, JS files etc) from outside your public web root. If you can, put your CSS and JavaScript files somewhere in your public root directory, and make sure you're not using relative URLs for {% includeCssFile %} – i.e. you should use {% includeCssFile '/styles/index.css' %} if you have a folder called styles in your public web root (alongside your index.php file).
Another option is to inline your CSS files, in which case you can put the files whereever you want. I recommend the Inlin plugin for all your inlining needs:

    


If you want to inline files without a plugin, you can use the Twig source function – outlined in this answer.

> **Comments:**
> **username_0**: Thank you @Mats. I placed the **styles** folder inside the **public** folder and used this line  {% includeCssFile "public/styles/index.css" %}  to 'call' it.  Worked like a charm.  Thanks also for the 'inlin' plugin info as well.  
> **username_1**: No problem, happy to help out. It might be obvious, but it's also worth mentioning that you don't _have_ to use `includeCssFile` to add an external stylesheet to your markup – a plain old, hard coded `<link>` tag will do just fine (one of the best things about Craft is that it makes no assumptions about your front end). The primary use case for `includeCssFile` is when you want to include a CSS file from inside a [`{% block %}`](http://twig.sensiolabs.org/doc/tags/extends.html) tag or an included template partial.  
> **username_0**: Re 'plain old hard code' - You know what it's like when you've got the chance to use some exciting new (Twig) code. You just 'medically' need to use it :)  The only problem I have with accessing the CSS code via the 'new' method is that when I do a 'Live Preview' within 'Entries', all the CSS code is lost. When I hard-code the CSS code into '_layout.html' (as per original setting), the 'Live Preview' works fine. However, when I use a full URL like this `{% includeCssFile http://localhost/sitename/assets/styles/index.css %}` the Live Preview works fine.  
> **username_0**: To resolve my own problem above, this [link](http://craftcms.stackexchange.com/questions/4728/how-to-set-up-siteurl-to-work-with-both-http-and-https) solves everything. Just place it in the craft/config/general.php script and use it like this `<link rel="stylesheet" href="{{ siteUrl }}assets/styles/index.css">`. However, I cannot get it to work in conjunction with the `includeCssFile` command.  
> **username_2**: @CraftyCockney i just stumbled across this question and solved your problem by using `{% includeCssFile siteUrl ~ "assets/styles/index.css" %}`  

---

### Answer by username_3 on 2017-09-13. Score: 1

In regards to the includeCssFile issue, I was able to get siteUrl to work by using `{% includeCssFile siteUrl~"css/application.css" %}`.


---

