enter image description here

I wanted to place the contents of style tag in a seperate folder and wanted to include it into this customtext.phtml file.

How can I do this?

  • Have you separate css file in your module/theme? Commented Jun 24, 2017 at 5:11

3 Answers 3


You can add css file in phtml file using below line,

<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('css/mystyle.css')?>">

where path of mystyle.css will be at below location,



  • I have my customtext.phtml file inside my Magento_Search directory. Should I need to give the full path of css file in href ??
    – learner
    Commented Jun 24, 2017 at 10:32
  • If I wanted to add a javascript file how should I do it..?
    – learner
    Commented Jun 24, 2017 at 10:32
  • Try with code, <script type="text/javascript"><?php echo $block->getViewFileUrl('js/myscript.js')?></script> Commented Jun 24, 2017 at 10:48
  • sorry Its not working.. !!
    – learner
    Commented Jun 24, 2017 at 10:54
  • 1
    if you are using modules you can use <link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('MODULENAME::css/mystyle.css')?>">
    – warch
    Commented Apr 10, 2018 at 6:47

You should avoid add styles to template. It not good for maintaince and hard to debug in future

For your purposes
Option add css styles to templates
Ex: styles.phtml

/** @var $block your block class extend \Magento\Framework\View\Element\Template **/
<style type="text/css">
   // Your css code here

Option include file css in template


<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="head.additional">
            <block class="Magento\Framework\View\Element\Template" name="head.additional.custom.styles" template="styles/style.phtml">
                    <argument name="file_name" xsi:type="string">yourstyle.css</argument>

Block Magento\Framework\View\Element\Template is my example. Use your own block to get url, use block class example as ancenstor

Template style.phtml

 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.

// @codingStandardsIgnoreFile


<link rel="stylesheet" type="text/css" media="all" href="<?php /* @escapeNotVerified */ echo $block->getCssUrl() ?>"/>

First option for test. You should use second one


Follow below steps.

Create css file at the below path.


Create default_head_blocks.xml file if not exist at below path:


Put below code in default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
        <css src="css/customcss.css" />

Hope this helps you!!

  • so shall we use classes in any module by just mentioning class name in the tag??!!
    – learner
    Commented Jun 27, 2017 at 8:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.