CakePHP-4-How-To-Link-CSS-Styelsheet-Files-To-Layout

CakePHP 4 How To Link CSS Stylesheet Files To Layout

by
Reading Time: 4 minutes
3,262 Views

Inside this article we will see CakePHP 4 How to Link CSS Stylesheet files to layout. Article contains classified information about adding stylesheets. There are very simple ways by the help of which we can add CSS files to CakePHP views, layouts and templates.

We will see these ways to add CSS stylesheet to CakePHP layout –

  • Using Html Link Tag
  • Using URL Helper – build() Method
  • Using Html Helper – css() Method

Learn More –

Let’s get started.

CakePHP 4 Installation

To create a CakePHP project, run this command into your shell or terminal. Make sure composer should be installed in your system.

$ composer create-project --prefer-dist cakephp/app:~4.0 mycakephp

Above command will creates a project with the name called mycakephp.

Load CSS Stylesheet Files

Suppose you have a layout called app.php inside /templates/layout folder. In this layout we will see how to add CSS files.

Using Html Link Tag

Here, we will use link tag of HTML to add CSS file links.

<html>

<head>
    <title>Welcome to CakePHP 4 Application</title>
    <!-- CSS Links -->
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/custom.css"/>

</head>

<body>
  ...  
</body>

</html>

Using URL Helper To Create CSS Links

This method will create links of CSS files with application URL.

<html>

<head>
    <title>Welcome to CakePHP 4 Application</title>
    <!-- CSS Links -->
    <link rel="stylesheet" href="<?= $this->Url->build('css/bootstrap.min.css', ['fullBase' => true]) ?>"/>
    <link rel="stylesheet" href="<?= $this->Url->build('css/custom.css', ['fullBase' => true]) ?>"/>

</head>

<body>
  ...
</body>

</html>

Using HTML helper

We will use css() method of HTML helper to link CSS files. We can load either row by row or we can load multiple CSS files at once.

You can add .css with file name or not. It is optional to use inside css() method. If you add only file name then method will add .css automatically with it.

Load CSS file step by step:

<html>

<head>
    <title>Welcome to CakePHP 4 Application</title>
    <!-- CSS Links -->
    <?php echo $this->Html->css("bootstrap.min.css"); ?>
    <?php echo $this->Html->css("custom.css"); ?>

</head>

<body>
  ...
</body>

</html>

css() method picks file from /webroot/css directory. So don’t need to pass folder path here. If you have your css files into some different folder then you need to specify.

Load all CSS files at once:

<html>

<head>
    <title>Welcome to CakePHP 4 Application</title>
    <!-- CSS Links -->
    <?php echo $this->Html->css([
        "bootstrap.min.css",
        "custom.css"
    ]); ?>

</head>

<body>
    ...
</body>

</html>

We hope this article helped you to learn about CakePHP 4 How To Link CSS Stylesheet Files To Layout Tutorial in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.