CSS not being loaded in CodeIgniter

Am I losing my mind dealing with CSS and Codeigniter? I can't figure out if it's a permissions issue or something else...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

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

<body>

<?php echo base_url(); ?>css/style.css

In my header file, everything seems correct. Even checked by echoing it out. The source of the page shows it right... yet, there's no visual change. Here's the CSS snippet that should give a gray background:

body{

background: #b6b6b6;
margin 0;
padding 0;
font-family: arial;
 }

I've confirmed that my base URL is correct as it echoes out properly and navigates to the intended location: $config['base_url'] = 'http://localhost/block/application';

What could possibly be causing this frustration?

.htaccess configuration:

Deny from all

Answer №1

To ensure that base_url() generates the correct URL, all you need to do is provide the path as an argument.

base_url('path/to/stylesheet.css');

Answer №2

If you want to include CSS styles in your HTML document, there are a couple of ways to do it. One way is to use the following code:

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

Alternatively, you can use this code:

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

Answer №3

After experimenting with several methods, I found that the most effective solution was to move the assets folder to the main directory instead of the app directory.

Answer №4

Suppose your base_url() returns

http://localhost/block/application
, the correct path to the css file should be
http://localhost/block/application/css/style.css
. It seems like you forgot to include a "/" in your URL.

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

Answer №5

Try adding an extra / in the link like this: /css/style.css

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

Answer №6

Avoid having an htaccess file containing Deny From All within resource directories.

It is recommended to segregate the css directory from the applications folder.

Answer №7

It is important to move the CSS folder or file into the root directory rather than keeping it in the application directory. Additionally, make sure to utilize the base_url function as mentioned below:

<link href="<?php echo base_url();?>site.css"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for effectively personalizing the dropdown menu made with ul-li elements

https://i.sstatic.net/7kkqL.png https://i.sstatic.net/dCwkI.png After creating a drop-down menu using ul and li tags, I realized that when the menu is opened, it shifts the blocks below on the screen. To prevent this from happening, I adjusted my CSS as ...

Use jQuery to add an anchor tag before an image and then close the anchor tag

Here is the code snippet I am working with: <div id="slider"> <img src="images/p1.jpg" /> <img src="images/p2.jpg" /> <img src="images/p3.jpg" /> </div> I am looking to dynamically add <a> tags before ...

Remove the excess white space surrounding the header background image on the website above the fold

How do I eliminate the white spaces on the left, right, and top of my background image that covers the header area above the fold on my webpage? I am currently testing in Google Chrome and using VS Code as my editor. html, body { width: 100%; height: ...

Changing the color of a pseudo element in Material-UI

I'm having trouble changing the border color of the ::after pseudo element on a standard text field from MUI. I've been unable to figure it out. <TextField id="standard-basic" label="Email" variant="standard"/> ...

Having trouble getting your Bootstrap v4 carousel to function properly?

Currently, I have implemented the carousel feature from Bootstrap v4 in a Vue web application. I am following the same structure as shown in the sample example provided by Bootstrap, but unfortunately, it is not functioning correctly on my local setup and ...

What is the best method to style a div using CSS to replicate the functionality of this image tag?

I have a dilemma with my image tag: <img src="/images/blah.gif" alt="blah" /> Is there a way to make this work using only CSS? I attempted the following, but unfortunately, the image is not showing up. What could be the issue? .blah { backgr ...

Can you answer this straightforward query about CSS positioning?

I am currently facing a challenge in creating a small div (header class) that overlays a main banner image div (banner class). When I maximize my browser window, the positioning is correct. However, upon resizing the browser, the header div maintains its m ...

Is there a way to make a text area move along with the mouse cursor?

I have been working on my first website and everything is running smoothly so far. However, I have a new idea that I am struggling to implement. Some of the pages on my site feature a video player with buttons to select different videos. When a viewer hove ...

No modifications to the CSS can be made within the "alterations" section of the Console drawer in Chrome

Is there a way to easily track and summarize all of my live CSS changes in the Chrome browser? I've searched on Stack Overflow, but haven't found a solution that works for me. This specific answer seems like it could be the most helpful for achie ...

Adaptable Design for Smartphones

Currently in the process of creating a website for my brother with Joomla 3.4 and Bootstrap. This marks my first venture into building a responsive site, so I'm seeking guidance on essential elements to include in my CSS such as font sizes in specific ...

Tips for keeping the header text in place when navigating the navbar breadcrumb on mobile devices

When viewing the site on a mobile device, clicking on the breadcrumb causes the header text and button to shift down, extending beyond the header image. Is there a way to keep the button and text in a fixed position without moving the navigation outside of ...

What could be causing the navigation bar to not display properly in Bootstrap?

While attempting to create a navbar with Bootstrap, I encountered an error. The expected result should be a navbar, but instead it is not displaying correctly. In an effort to understand the nature of the error, I copied the code from W3schools (available ...

Adjusting CSS Div Blocks for Different Screen Sizes

I am currently working on designing a page layout that includes two sidebars and a main article area. My goal is to have the sidebars stack vertically beside the main area when viewed on a tablet or phone, with both eventually moving below it. However, I a ...

JS instant Toggle (just one click) - initial value of toggled item

Can you explain why we have to click twice on this link (http://jsfiddle.net/xL8hyoye/4/): html: <a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a> <div id="foo">This is foo< ...

What is the interaction between CSS and URL fragments (the #stuff)?

Can URL fragments affect CSS behavior? For instance, let's consider a sample page at: http://example.boom/is_this_a_bug.html. You can view the code for this page on https://gist.github.com/3777018 Upon loading the page with the given URL, the element ...

Enhance Your Cards with Hover Zoom Text

I'm looking to place some text in front of a card hover zoom effect, but currently it appears behind the zoomed image upon hover. <div style="margin-top: 50px;" class="container imgzoom"> <div class="row ...

Could someone please clarify a specific aspect of how floats work?

Could someone simplify this explanation for me? A float is positioned next to a line box if there is a vertical space that meets these conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margi ...

How can you change a particular inline style using the Firefox browser?

I am looking for a solution to override an inline style on a specific webpage within the Firefox browser without access to the source code. Previously, I would manually modify the page source using Firefox development tools. Specifically, I encounter a we ...

Tailwind CSS not applying styles to my Next.js project on Ubuntu operating system

I'm experiencing a strange issue where Tailwind CSS is not applying any styles to my project on Ubuntu 20.04. Interestingly, the project works perfectly fine on Windows but for some reason, it's not styling at all on Ubuntu. https://i.sstatic.n ...

Display or conceal several elements using JQUERY/HTML upon hovering

Here is the current progress: <div style="position: relative;"> <a href="#games"> <div class="sidenavOff"> <img src = "images/card_normal.png" /> <img src = "images/category_icons/icon_games.png" style = "position: a ...