You can add custom CSS to your project by following a few steps!
1. Add Your Custom CSS File
First, create a custom CSS file in the public directory or resources/css directory.
- Create a new file in the
public/css/directory:
public/css/custom.cssAlternatively, you can use the resources/css/ directory if you are using Laravel Mix for asset management:
resources/css/custom.css2. Link Your CSS in Blade Templates
Once the custom CSS file is created, you can link it in your Blade templates. If the file is located in public/css/custom.css, you can add it directly like this:
<!-- resources/views/layouts/app.blade.php or any Blade template -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 11 Custom CSS</title>
<!-- Link to the custom CSS -->
<link rel="stylesheet" href="{{ asset('css/custom.css') }}">
</head>
<body>
<div class="content">
<h1>Welcome to Laravel 11</h1>
</div>
</body>
</html>The {{ asset('css/custom.css') }} helper function generates the correct URL for your CSS file.
3. Using Laravel Mix (Optional)
If you are using Laravel Mix to manage assets, you can place your custom CSS in the resources/css directory and compile it.
- First, make sure that
webpack.mix.jsincludes the following:
const mix = require('laravel-mix');
// Compile your custom CSS
mix.css('resources/css/custom.css', 'public/css');Then, run the Mix command to compile your CSS:
npm run devOnce compiled, the public/css/custom.css file will be generated, and you can link to it as shown earlier.
4. Example of Custom CSS
You can write your custom styles in the custom.css file, for example:
/* public/css/custom.css */
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}With this setup, your custom styles will be applied across your Laravel 11 application.
Best Practices for Implementing Coding Filters!
To get the most out of coding filters, developers should follow best practices, such as creating reusable filter functions, keeping the logic modular, and ensuring consistent application of filters throughout the codebase. By doing so, developers can maintain clean, scalable code that is easier to modify and extend over time.
