2

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!

Improve this question
2
  • 1
    I don't think the CSS link worked. Can you please try including your code again? Commented Jan 6, 2016 at 0:04
  • A note about markdown: Put 4 spaces in front of each line of code to create a code block. Check out the Mardown Help page for more details. Commented Jan 6, 2016 at 0:19

6 Answers 6

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I reorganized my folder structure slightly and tried your suggestion. It is still not working.
@trompher Can you edit your question with your current folder structure?
I'm trying to add the new HTML in the question and it isn't posting. I'm new to this so I'm obviously doing something wrong.
4

The first thing I would look at is whether or not it's a path issue with your styleheets. Use web inspector or dev tools in your browser and look for a 404 error in your CSS files. If there are any, dev tools will show the path it's looking for and you can adjust the path to your style sheets accordingly.

Good luck!

Improve this answer

1 Comment

In particular, you want to ensure that the ownership is set to www-data:www-data (for all files served from /var/www/html. This user:group pair is the standard created for Apache.
3

Thought I'd throw my input into the works.

I named one of my CSS files style.css than later went and deleted it and created a new style.css and my wamp server kept referencing the first style.css file I made.

So I renamed the second CSS file to main_style.css and everything worked perfectly.

Improve this answer

Comments

2

Use Developer tools in google chrome or other browser and in the sources tab look for errors. Two common errors are your css files not being found (see relative path answer above) or maybe your file permissions don't allow the Apache server to access the CSS files.

Improve this answer

Comments

2

I once faced the issue of CSS not being applied when I was working with PHP.

I fixed this issue by doing Empty Cache and Hard Reload (chrome).

To do that:

  • Open DevTools
  • Right-click on reload button(top-left)
  • Click on Empty Cache and Hard Reload

After doing this, all my CSS styles were applied.

Improve this answer

Comments

0

I also faced same problem but later found a solution to it. Just Press 'Ctrl+F5' when the css file doesn't open on the browser window.

Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.