Link to CSS File in Laravel 4 using the HTML Class

By Tanner
In Development, Laravel
October 13, 2013
2 Min read
L

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">
<head>
  <meta charset="UTF-8">
  <title>How to Link to CSS using HTML class in Laravel</title>
  {{ HTML::style('css/main.css') }}
</head>
<body>
  <h1>How to use the HTML class in Laravel to link to CSS.</h1>
</body>
</html>

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!

  • Erich Casagrande

    Thanks, this post helps me a lot with little problems in .blade files 😀

    • Tanner Hearne

      No problem! It’s funny how simple things like this get lost in the documentation sometimes.

  • Ahmad Anshori

    what about {{ asset(‘css/main.css’) }} ? Is it make a different output? i’m new to laravel (my first MVC framework i try to learn) and found this asset management is confusing… Thanks!

    • @ahmad_anshori:disqus I think “{{ asset(‘path/goes/here’) }}” might just create an anchor tag, instead of the needed tag for including CSS in the head of the document. @odainebarnes:disqus’s solution would work great too – I like the simplicity of “HTML::style” though.

      • Ahmad Anshori

        i get it now. thanks!

  • Simple Developer

    Mine is driving me crazy because I have tried all things possible to no avail. I have used HTML::style and it does not work.

    • Hm…it should work – it’s still in Laravel as of 4.1 (which is the current version as of now). Can you post some code?

  • O’Daine Barnes

    I used this approach to link to my assets

  • Chris Harrison

    Im not sure if its the structure of Laravel 4.2 but i had to use: {{HTML::style(‘assets/css/style.css’)}}

  • Where have people been putting the css and js folders in L5?

    • Hey @RoderickSilva:disqus – I’m pretty sure they still need to be in the public folder. If you are using a build process like Gulp or Grunt, you could use an “assets” folder in your “app” folder and then just compile, uglify, etc. down to get your minified version in your “public/js” directory.

  • Ramiro Arizpe

    remember to put the assets in the public folder, after that, it works for me.

  • Reivax

    About the js? Is it the same processus ?

  • Tilottama Deb

    I used this code. But it shows error.
    ”
    Class ‘HTML’ not found”
    Could you please help me on that?

    • Hey @tilottamadeb:disqus – if you are using Laravel 5 the HTML class has been moved to an external package outside of the Laravel core. This package is maintained by the Laravel Collective.

      Also, I think they changed the class from “HTML” to “Html”

      You can find out more information here:
      https://laravelcollective.com/docs/5.2/html

      Does that answer your question?

  • adiakala raj

    I wanna access my files under the public/assets/css it is not accessible for me the styles are not coming

    • @adiakalaraj:disqus I have updated this post. If you are using Laravel 5.3 you can check out the Html class as maintained by Laravel Collective (see links above). 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.

Read more

By Tanner October 13, 2013
18 comments