Link to CSS File in Laravel 4 using the HTML Class


Update – May 3, 2017 – if you are using Laravel 5.3 you can check out the Html class in Laravel Collective’s class here.  The Html class is no longer part of a vanilla Laravel install—for good reason in my opinion—and Laravel Collective is now the maintainer.  All the same functionality, just install their package.

Original – October 13, 2013 Here is a simple how-to with Laravel if you are wondering how to link to CSS correctly from a View.  I was having trouble finding it in the documentation or in an article online, so hopefully people can find this article and rejoice!

In your Blade template you can just include:

{{ HTML::style('css/main.css') }}

By using the HTML class using the style method you can take care of the linking to the public folder.  I typically store my Sass files (.scss) in a stylesheets folder that compile into a main.css file in a css folder.  Since the HTML class using the style method links to the public folder, I just need to include that extra directory level in my URI.

Here it is in a sample Blade layout:

<!doctype html>
<html lang="en">
  <meta charset="UTF-8">
  <title>How to Link to CSS using HTML class in Laravel</title>
  {{ HTML::style('css/main.css') }}
  <h1>How to use the HTML class in Laravel to link to CSS.</h1>

If you are looking for more info on the style method or the HTML class in general check out the /vendor/laravel/framework/src/Illuminate/Html/HtmlBuilder.php html/src/HtmlBuilder.php in your project the Laravel Collective Html package. There is more happening than just linking to the public directory when using the style method – you can even do things like specify the screen type.

Feel free to comment if you have any thing to add to this quick, easy example!

By Tanner