How to call a css file in Phtml magento 2

[bharath553]

Hi guys,

               Here  i have a phtml and css file i.e

home.phtml

path :/var/www/html/gr/app/code/Magestore/Webpos/view/frontend/templates/home.phtml

In home.phtml  i was converted html code into js format. I.e below

<script type="text/javascript">
document.write('<div class="ms-webpos">');
document.write('<div class="ms-webpos">');
document.write('<div class="login-screen">');
document.write('<div class="wrap-login-form">');
document.write('<form class="form-login" role="form" id="webpos-login" method="post">');
document.write('<h1 class="title-page"><img src="<?php echo $block->getLogoUrl();?>" width="200px" height="200px" alt="logo"/></h1>');
document.write('<div class="form-group wrap-input">');
document.write('<div class="input-box"><input type="text" class="form-control required-entry required" id="username" name="username" placeholder="Username"></div>');
document.write('<div class="input-box"><input type="password" class="form-control required-entry required" id="pwd" name="password" placeholder="Password"></div>');
document.write("</div>");
document.write('<div class="form-group">');
document.write("<button type='submit' class='btn btn-default'><?php echo __('Login');?></button>");
document.write("</div>");
document.write("</form>");
document.write("</div>");
document.write("</div>");
document.write("</div>");
</script>

but the problem is am unable to access the class attribute in div tag.

login.css:

path ;/var/www/html/gr/app/code/Magestore/Webpos/view/frontend/web/css/login.css

I want to call login.css in home.phtml  ? Can any one guide me on this ?

[Rakesh Jesadiya]

You can call CSS in the phtml file like below way,

<link rel='stylesheet' href='<?php echo $block->getViewFileUrl("Magestore_Webpos::css/login.css") ?>' />

[bharath553]

i tried but its not working.Actually i wrote html code in between script tag ? I think that is the problem ? what do you say ?

[dharmesh]

Thanks you dostar

[shraddhash9dd4]

you can add css like below:

<script>
          
        // Get HTML head element
        var head = document.getElementsByTagName('HEAD')[0]; 
  
        // Create new link Element
        var link = document.createElement('link');
  
        // set the attributes for link element 
        link.rel = 'stylesheet'; 
      
        link.type = 'text/css';
      
        link.href = 'style.css'; 
  
        // Append link element to HTML head
        head.appendChild(link); 
    </script> 

or 

  <script>
      
        // Create new link Element
        var link = document.createElement('link'); 
  
        // set the attributes for link element
           link.rel = 'stylesheet'; 
      
        link.type = 'text/css';
      
        link.href = 'style.css'; 
  
        // Get HTML head element to append 
        // link element to it 
        document.getElementsByTagName('HEAD')[0].appendChild(link); 
  
    </script> 

[aminjabari973e]

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,

app/design/frontend/{Packagename}/{themenane}/web/css/mystyle.css

Thanks.

[aminjabari973e]

Start by changing your environment. A VPS is almost always a poor choice for Magento. Let me give you a few reasons why,

1. Your hardware is virtualized. This immediately introduces overhead and performance drop over running on bare metal.

2. Resources aren't guaranteed. Unless you set up the hypervisor, you don't REALLY know how resources are allocated. Whether resources are allocated 1:1 or oversold - extremely common with VPS/cloud as you have to account for mostly empty hardware and the fact most users won't use their VPS to it's limits.

3. The hardware is a complete question mark. You could have the latest generation Intel server CPU (whose features and HW acceleration are lost through the hypervisor anyway), or you equally could have a 5yr old desktop grade chip. You can't account for CPU clock speed (the single most important statistic for TTFB), for memory bandwidth, for disk IO, for network IO etc. All you know is that you have x cores, x GB RAM and x GB of storage - but not what that is comprised of.

Iraqi Dinar Guru

[shikharomac645]

You can directly use css in phtml file using style tag

<style>
/*  Write your css here */
</style>

Or you need to call css in layout file as given by magento devdocs and write your css in the same file.