CSS not working on Localhost

Question

I am building a site and had all of my CSS, HTML working wonderfully. I wanted to add in some PHP functionality so I have created a local development environment on my mac with Apache. I then moved all of my site folders to my new Sites folder that can be accessed by localhost. When loading my website and now none of my CSS styles are loading. I am using Twitter Bootstrap locally. This is what my css links look like in my html:

link rel="stylesheet" type="text/css" href="http://localhost/~tromph/YoointooSite/bootstrap.min.css">
link rel="stylesheet" type="text/css" href="http://localhost/~tromph/YoointooSite/main.css">

I've tried just about every other path that I can think of and nothing else seems to work.

I changed my folder structure and the file path to:

<link rel="stylesheet" type="text/css" href="/bootstrap-3.3.2-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/bootstrap-3.3.2-dist/css/main.css" />

This fixed my problem of not having the CSS render. Now the images linked in the CSS are not showing. Dev tools is telling me that I am getting an error 403 (forbidden) on each of my images. What should I do to change this permission?

I spent some time updating permissions. Everything is working now. Thanks for your help!

Answer 1

I would recommend referencing the CSS files relatively. So if you have the following folder structure.

myProj
  - css
    - bootstrap
      - bootstrap.min.css
  - index.html (or php)

Then you would reference the bootstrap file like so

<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css" />

Guessing at your folder structure from your example I would then assume that all you need is

<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="main.css" />

If however your css files are not in your project, but instead are served externally, then you would need to reference them from wherever you are serving them. For example if serving them to port 8080, then you would need to reference them using that address instead.

<link rel="stylesheet" type="text/css" href="http://localhost:8080/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://localhost:8080/main.css" />

Again, the above is only if you are serving them externally from the site that you are attempting to use them from. If they are inside of the project you are working on, then reference them relatively from the file attempting to use them.