Answers.Body: <p>This is just an order of operations issue. The documentation is correct, but incomplete.</p>
  
  <p><code>getHeadHtml()</code> will only output head HTML that was queued up for it <em>before</em> the function was actually called. Any head HTML that is queued up <em>after</em> you've called <code>getHeadHtml()</code> will end up getting inserted in the default location - right before the <code>&lt;/head&gt;</code> tag.</p>
  
  <p>So, if you had this in your template instead:</p>
  
  <pre class="lang-html prettyprint-override"><code>{% includecss %}
    .content {
        color:  red;
    }
  {% endincludecss %}
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
      &lt;!-- Here should the CSS start --&gt; 
          {{ getHeadHtml() }}
      &lt;!-- Here should the CSS end --&gt; 
    &lt;/head&gt;
    &lt;body&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then the CSS would get included between the HTML comments as you’d expect.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-25T19:12:11.490Z
Answers.LastActivityDate: 2016-02-25T19:12:11.490Z
Answers.UserDisplayName: Brandon Kelly
Body: <p>I think there is a bug in the getHeadHtml function of craft. In the Documentation (<a href="https://craftcms.com/docs/templating/includecss" rel="nofollow">https://craftcms.com/docs/templating/includecss</a>) it says: </p>
  
  <blockquote>
    <p>Your CSS snippet will be output by the getHeadHtml() function. If you aren’t calling that function anywhere, Craft will insert it right before the HTML’s &lt; /head> tag.</p>
  </blockquote>
  
  <p>But in my templates it works only, if the tag getHeadHtml() is placed after the includeCss Tag.
  So the following simple Example does not work as expected: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
      &lt;!-- Here should the CSS start --&gt; 
          {{ getHeadHtml() }}
      &lt;!-- Here should the CSS end --&gt; 
    &lt;/head&gt;
    &lt;body&gt;
  
        {% set myCss %}
          .content {
              color:  red;
          }
        {% endset %}
  
  
        {% includeCss myCss %}
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It outputs the following code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
      &lt;!-- Here should the CSS start --&gt; 
  
      &lt;!-- Here should the CSS end --&gt; 
    &lt;style type="text/css"&gt;
    .content {
              color:  red;
          }
    &lt;/style&gt;&lt;/head&gt;
    &lt;body&gt; 
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It outputs the CSS before the closing &lt; /head> Tag and not between the two comments. Is there any workaround/fix for this?</p>
  
Tags: <templating><getheadhtml>
Title: getHeadHtml() not outputting CSS included with {% includeCss %}
ThreadText: # getHeadHtml() not outputting CSS included with {% includeCss %}
  
  (Asked by: username_0 on 2016-02-25)
  
  I think there is a bug in the getHeadHtml function of craft. In the Documentation (<https://craftcms.com/docs/templating/includecss>) it says:
  
  > Your CSS snippet will be output by the getHeadHtml() function. If you aren’t calling that function anywhere, Craft will insert it right before the HTML’s < /head> tag.
  
  But in my templates it works only, if the tag getHeadHtml() is placed after the includeCss Tag.
  So the following simple Example does not work as expected:
  
  ```
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Title</title>
      <!-- Here should the CSS start --> 
          {{ getHeadHtml() }}
      <!-- Here should the CSS end --> 
    </head>
    <body>
  
        {% set myCss %}
          .content {
              color:  red;
          }
        {% endset %}
  
        {% includeCss myCss %}
  
    </body>
  </html>
  
  ```
  
  It outputs the following code:
  
  ```
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Title</title>
      <!-- Here should the CSS start --> 
  
      <!-- Here should the CSS end --> 
    <style type="text/css">
    .content {
              color:  red;
          }
    </style></head>
    <body> 
    </body>
  </html>
  
  ```
  
  It outputs the CSS before the closing < /head> Tag and not between the two comments. Is there any workaround/fix for this?
  
  **Tags:** templating, getheadhtml
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2016-02-25. Score: 6 | Accepted answer
  
  This is just an order of operations issue. The documentation is correct, but incomplete.
  
  `getHeadHtml()` will only output head HTML that was queued up for it *before* the function was actually called. Any head HTML that is queued up *after* you've called `getHeadHtml()` will end up getting inserted in the default location - right before the `</head>` tag.
  
  So, if you had this in your template instead:
  
  ```html
  {% includecss %}
    .content {
        color:  red;
    }
  {% endincludecss %}
  
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Title</title>
      <!-- Here should the CSS start --> 
          {{ getHeadHtml() }}
      <!-- Here should the CSS end --> 
    </head>
    <body>
  
    </body>
  </html>
  
  ```
  
  Then the CSS would get included between the HTML comments as you’d expect.
  
  
  ---
  
  