Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-08-14T14:47:50.370Z
Answers.Text: 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.
Answers.UserDisplayName: Crafty Cockney
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-08-14T18:21:57.517Z
Answers.Text: 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.
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-08-15T00:45:00.347Z
Answers.Text: 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.
Answers.UserDisplayName: Crafty Cockney
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-08-15T01:47:32.110Z
Answers.Text: 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.
Answers.UserDisplayName: Crafty Cockney
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-03-30T14:20:59.010Z
Answers.Text: @CraftyCockney i just stumbled across this question and solved your problem by using `{% includeCssFile siteUrl ~ "assets/styles/index.css" %}`
Answers.UserDisplayName: GlabbichRulz
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-08-14T14:04:22.590Z
Answers.LastActivityDate: 2016-08-14T14:35:31.737Z
Answers.LastEditDate: 2017-04-13T12:51:00.200Z
Answers.UserDisplayName: Mats Mikkel Rummelhoff
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-13T20:04:06.800Z
Answers.LastActivityDate: 2017-09-13T20:04:06.800Z
Answers.UserDisplayName: royalenfield
Body: <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>
  
Tags: <css><include>
Title: Newbie: Trying to understand includeCssFile
ThreadText: # 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:
  
  ```
  <head>
  <meta charset="utf-8" />
  <title>{% if title is defined %}{{ title }} - {% endif %}{{ siteName }}< /title>
  <link rel="home" href="{{ siteUrl }}" />
  {% includeCssFile "styles/index.css" %}
  </head>
  
  ```
  
  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](https://craftcms.stackexchange.com/questions/15662/including-css-js-assets), [link 2](https://craftcms.stackexchange.com/questions/15264/why-is-news-entry-not-extending-layout))
  
  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](https://craftcms.com/docs/routing). 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](https://craftcms.stackexchange.com/a/3093/1098). 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](https://github.com/aelvan/Inlin-Craft) for all your inlining needs:
  
  ```
  <head>
      <style>
          {{ craft.inlin.er('styles/index.css') }}
      </style>
  </head>
  
  ```
  
  If you want to inline files without a plugin, you can use the Twig `source` function – outlined in [this answer](https://craftcms.stackexchange.com/a/12314/1098).
  
  > **Comments:**
  > **username_0**: Thank you @username_1. 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**: @username_0 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" %}`.
  
  
  ---
  
  