Can't call the external CSS property from external css from Views in CodeIgniter

user_10268798 0
Viewed 150

I'm having some trouble , when it comes to calling the external CSS property in Code Igniter. I have a custom css file called custom.css and it is from the assets folder. However, when I am calling it from a View, it does not call it. I have the property as follows:

.project-description{
    background-color: #fff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0px 0px 3px 1px;
}

I have a custom view called display.php and I call it as follows:

    <p id='project-description'>
        <?php echo $project_data->project_body; ?>
    </p>

And in my main view which is the layouts in which I call the external css file to which the css property resides:

<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/custom.css">

In the custom view which is the display.php, it does not call the CSS property even though I already include the external CSS file. What will be the solution to this??

codeigniter css
3 Answers

There are two problems with this code:

Your <p> element specifies it's ID as project-description,
However you've specified it as a Class in your CSS file.

The prefix for an ID is #,
The prefix for a Class is .

Classes can be used more than once in an HTML page,
ID's can be used ONLY ONCE.

If you would only like to use this type of element once on the page, you need to change your CSS file to use #project-description rather than .project-description

If you would like to use this type of element more than once on the page, you need to change your HTML file to use:

<p id='project-description'>

To:

<p class='project-description'>

The second "problem" is that the CSS URL is being grabbed in a weird way. (I would fix it for readability/consistency)

Currently you have:

<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/custom.css">

I think it needs to be changed to:

<link rel="stylesheet" href="<?php echo base_url('assets/css/custom.css'); ?>">

If this doesn't solve the problem, it might be because an old version of a CSS file is cached, and its not being reloaded with the newest most up-to-date version. This can be a problem when making many changes to your CSS. When making changes to a CSS file, you can put a version number on the end like this:

<link rel="stylesheet" href="<?php echo base_url('assets/css/custom.css?version=0.1'); ?>">

Every time you update the CSS file, you can change the version number and it will MAKE SURE to reload the CSS file, or else you may be getting a cached version of your CSS file.

Hope this helps!

user_81215830

I have see your code of css. You have use:

.project-description{
background-color: #fff;
padding: 20px;
border-radius: 6px;
box-shadow: 0px 0px 3px 1px;}

You have use . symbole in css and you have use in html is id:

<p id='project-description'>
    <?php echo $project_data->project_body; ?>
</p>

There is two way to correct your code.

  1. project-description{ }

    use # in the css property.

  2. Change in your HTML file id to class.
user_89369280

After recently going from my files if there are any problems, I experimented it when I view the project on Firefox and it does work!. And I just restarted my browser in order for the CSS call to work..

user_102687980
Related