Coder Perfect

Is it possible to use CSS with Laravel views?


I’ve only recently started learning Laravel, but I’m already familiar with the basics of controllers and routing.

My operating system is Mac OS X Lion, and I’m running it on a MAMP server.

My code from routes.php:

Route::get('/', function() {
    return View::make('home.index');

Route::get('businesses', function() {
    return View::make('businesses.index');

Route::get('testing', function() {
    return View::make('testing.index');

Route::get('hello', function() {
    return "<h3>Hello world!</H3>";

That works, the views appear as expected; but, I’d like to test including CSS within the views; I tried adding a link to a stylesheet within the directory, but the page displayed it as the default browser font despite the fact that the CSS was in the HTML!

This is index.php from the views folder’s businesses:

   <link rel="stylesheet" type="text/css" href="mystyle.css">

<p>Business is a varied term. My content here.

I attempted to display CSS using the Blade template engine in my other views folder (testing), but the CSS did not appear despite the fact that it was in the testing folder!

How can I solve this problem and improve, given that I’m still learning this framework?

Asked by avenas8808

Solution #1

Put your assets in the public folder; e.g.:


Then, to use Laravel to access them, type:

{{ HTML::script('js/scrollTo.js'); }}

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


{{ URL::asset('js/scrollTo.js'); }}

{{ URL::asset('css/css.css'); }} 

The correct path (e.g., ‘public/js/scrollTo.js’) will be generated automatically using this syntax.

Answered by Fernando Montoya

Solution #2

The public folder, or a subfolder of it, should contain your CSS file.

If you put your css in, for example


you would use


In your blade’s perspective…

Or you could also use the Asset class…

Answered by André Keller

Solution #3

You can also construct a standard link tag and then use: on the href attribute.

<link rel="stylesheet" href="<?php echo asset('css/common.css')?>" type="text/css"> 

Of course, you must place your CSS file in the public/css folder.

Answered by Diego Castaño

Solution #4

This can be accomplished in the following manner.

<link href="{{ asset('/css/style.css') }}" rel="stylesheet">

{{ HTML::style('css/style.css', array('media' => 'print')) }}

It will look for the style file in Laravel’s public folder and then render it.

Answered by Ahmad Sharif

Solution #5

You can link stylesheets through http, like Ahmad Sharif said.

<link href="{{ asset('/css/style.css') }}" rel="stylesheet"> 

However, if you use https, the request will be rejected and a mixed content error will appear; to utilise it over https, use secure asset like this.

<link href="{{ secure_asset('/css/style.css') }}" rel="stylesheet">

Answered by Kumar Sambhav Pandey

Post is based on