Add CSS to Head from Template File in Magento

Add css to head from template file in Magento

To add a CSS file from a controller after you've loaded the layout, but before you've rendered the layout, you'd do something along the lines of:

public function indexAction() {
    $this->loadLayout();

    $head = Mage::app()->getLayout()->getBlock('head');
    $head->addItem('skin_css', 'css/additional.css');

    $this->renderLayout();
}

The problem with doing something this this in the template file is that it's highly likely that the head template has already been rendered, and so the additional directives you give the block instance are useless because they are too late.

Just use a layout file and do the following:

<?xml version="1.0">
<layout>
    <default>
        <reference name="head">
            <action method="addItem"><type>skin_css</type><file>css/additional.css</file></action>
        </reference>
    </default>
</layout>

Magento 2 custom css file include

The documentation is able to answer that. See here: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-themes.html.

Here's an excerpt from it:

The recommended way to do this is adding an extending
default_head_blocks.xml in your theme, and including the required
stylesheets in this file.

Your custom default_head_blocks.xml should be located as follows:
<theme_dir>/Magento_Theme/layout/default_head_blocks.xml. To include a
CSS file, add the <css src="<path>/<file>" media="print|<option>"/>
block in <head> section in a layout file. <path> is specified relative
to the theme web directory (/web) For example, the
following illustrates how stylesheets are included in the default
Blank theme:

<Magento_Blank_theme_dir>/Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/styles-m.css" />
        <css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
        <css src="css/print.css" media="print" />
    </head>
</page>

If you are using the Luma theme, you could edit it directly, but it's best to create your own theme that extends it and add the css there. See here: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html.

How to call css in before closing body tag in magento

There is a block with the name before_body_end where you can add everything you want with template or text block.

You need something like this, you have no page/html_head block to refer too:

<!-- get the block which we want our content in -->
<reference name="before_body_end">
    <!-- add another block of type page/html_head to have all the great functionality to add/remove css and js stuff -->
    <!-- it is important to set your own template, because the head block has a defined default template page/head.phtml which has all the stuff of the head. Using this will bring a lot of problems -->
    <block type="page/html_head" name="scripts_in_footer" template="YOUR TEMPLATE">
        <!-- add whatever you want as you are used to in the head via the standard magento api -->
        <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
    </block>
</reference>

And inside of your template, you need:

<?php // and to echo the whole stuff later in the template, you need to add the code, so the added js/Css files are echoed ?>
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>

Add css from a block

My alternative solution was to add this in my xml layout :

<default>
  <reference name="head">
      <action method="addCss"><stylesheet>css/interactiveslider.css</stylesheet></action>
  </reference>
</default>

Thank you for your help

Add CSS to Head from Template File in Magento