Newbie: Trying to understand includeCssFile 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 &lt;head> section of the _layout.html script:

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

So that the &lt;head> section looked like this:

&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;


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?
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:

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


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