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

CC BY-SA 3.0
2016-02-25T19:12:11.490Z
2016-02-25T19:12:11.490Z
Brandon Kelly
<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>

<templating><getheadhtml>
getHeadHtml() not outputting CSS included with {% includeCss %}
# 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: 


  
    
    Title
     
        {{ getHeadHtml() }}
     
  
  

      {% set myCss %}
        .content {
            color:  red;
        }
      {% endset %}


      {% includeCss myCss %}

  


It outputs the following code:


  
    
    Title
     

     
  
   
  


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  tag.
So, if you had this in your template instead:
{% includecss %}
  .content {
      color:  red;
  }
{% endincludecss %}



  
    
    Title
     
        {{ getHeadHtml() }}
     
  
  

  


Then the CSS would get included between the HTML comments as you’d expect.


---

