How to load CSS into CodeIgniter

Problem :

I am totally new in CodeIgnitor. In the controllers folder I created a file named caller.php and I created a file home.php in views. In views I also created a folder named css and I created style.css in that css folder. In views I have some pictures. Those pictures are also part of design. Now I want to use style.css and the pictures. But I can't.

In caller.php I have:

class caller extends CI_Controller
{
    function index()
    {

        $this->load->view('home');  
        // What do I have to write here to load css?
    }
}

In home.php I have:

<html>
<head>

***------what i have to write here to load css--------***

</head>

<body>

<div id="outer">
...
</div>

</body>

</html>

If additional configs are needed please mention that.

Solution :

Leading on from what Oliver said of including the stylesheet with:

<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/style.css">

If you have removed index.php from your URL's make sure you include your css directory in the rewrite rule.

RewriteEngine on
RewriteCond $1 !^(index\.php|css)
RewriteRule ^(.*)$ /index.php/$1 [L]

This is assuming your stylesheet is located in a folder called css at the root of your application.

- index.php
+ system
+ application
+ css
   - style.css

Make sure that you have enabled the URL helper to use commands such as base_url(). This can be done globally inside config/autoload.php by adding url to the helper array.

$autoload['helper'] = array('url');

Unfortunately, with CSS only, you're not able to do it. You need to use JS. I am giving you a jQuery example - $(document).ready(function(){ $('input').addClass('disableHotkeys'); }); or $(document).ready(function(){ $('input').each(function(){ $(this).addClass('disableHotkeys');...

Try this code. It is working fine for me. <select name="complaintsForm" class="width_4" property="product"> <option value="">- Please Select -</option> <html:options name="complaintsForm" property="productList" /> </select> Or you can use styleClass attribute instead...

You simply need to define width and height of #fourohfour_home in order for the background image to know in what container to be contained. Something like: #fourohfour_home{ background-image:url('https://www.pandoragaming.net/img/404_home.png'); background-repeat:no-repeat; background-size:contain;...

How to add multiple CSS elements to a div using jQuery?

You're thinking correctly. Using the css(map) method is the way to go. $(".cIconSmall").css({ float: "left", width: "59px", background: "transparent url('http://download.com/47.jpg') no-repeat scroll -132px -1px" }); http://api.jquery.com/css/ A map of property-value...