christnick
Posts: 2
Joined: Fri Jan 06, 2017 3:03 am

CSS not linking with Apache 2 Server

Fri Jan 06, 2017 3:32 am

Hello,
I'm having some trouble trying to have my external CSS linking correctly. The HTML is showing up just fine but no styling. I've done a bit of searching and tried variations of the href but haven't had any luck. I'm very new to coding so its probably something obvious to everyone but me.

My index file is sitting here: /var/www/html/index.html. My CSS sheet is here: /var/www/CSS/style.css. This is my HTML and CSS respectively:

Code: Select all

<html>

    <head>
        
        <title>Webpage With Style</title>
        
        <link href="https://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="../CSS/style.css">
        
    </head>

    <body>
        
        <div>
        <p>This is some right aligned text</p>
            
        <p class="centered"> This text is centered</p>
        </div>
    </body>

</html>
And CSS:

Code: Select all

p{
text-align: right
}

div{
width:300px;
height:100px;
background-color: blue;
}

.centered{
text-align: center;
}

These files work just fine on my laptop and actually on the pi as well if I load the index.html style in chrome.
From what I read its probably something to do with the browser not being able to find the CSS sheet and I get error 404 in the chrome console but I can't seem to fix it!

Any help greatly appreciated!
Nick

User avatar
rpdom
Posts: 15056
Joined: Sun May 06, 2012 5:17 am
Location: Chelmsford, Essex, UK

Re: CSS not linking with Apache 2 Server

Fri Jan 06, 2017 5:33 am

Code: Select all

        <link rel="stylesheet" type="text/css" href="../CSS/style.css">
The web server will not allow ".." in the path as that will take it outside the DocRoot directory that it bases all the URLs from.

I assume that when you say
christnick wrote:These files work just fine on my laptop and actually on the pi as well if I load the index.html style in chrome.
that you are loading them with a "file:///blah..." URL. That accesses the filesystem directly and doesn't know about the DocRoot security aspect of the web server.

There are a couple of ways of fixing your issue. The simplest is to move the CSS directory from /var/www/CSS to /var/www/html/CSS (or the less shouty /var/www/html/css) and change your hrefs to get rid of the "..". The other is to put something like a Alias statement in your web server config so that if you specifiy href="CSS/something" it looks in /var/www/CSS instead. In Apache this could be

Code: Select all

Alias /CSS/ /var/www/CSS/
in the config file.

christnick
Posts: 2
Joined: Fri Jan 06, 2017 3:03 am

Re: CSS not linking with Apache 2 Server

Sat Jan 07, 2017 3:36 am

Wow thank you so much for the detailed response I really appreciate it. Helps me learn and fixed my problem. I'm all go for now - I just moved the CSS into the HTML file. I'll try the Apache config file at some stage too... for now I'm pretty keen to get going with the php side of my project. Really appreciate the help! :D

User avatar
rpdom
Posts: 15056
Joined: Sun May 06, 2012 5:17 am
Location: Chelmsford, Essex, UK

Re: CSS not linking with Apache 2 Server

Sat Jan 07, 2017 8:41 am

No worries. Setting up webservers is part of my day job :-)

anubis_gatekeeper
Posts: 1
Joined: Sat Feb 16, 2019 1:27 pm

Re: CSS not linking with Apache 2 Server

Sat Feb 16, 2019 1:37 pm

simple solution: no need to change any of your html codes.

1. I logged into raspberry pi as a "root" user.

2. then go the /var/www and right click on the "www" folder then properties
and i change the permission on "view content", "change content", and "access content" to allow "anyone"

view content: anyone
change content: anyone
access content: anyone

3. restart apache2 server type: service apache2 restart
4. then test the webpage

i hope this helps, it worked fine with me.

User avatar
rpdom
Posts: 15056
Joined: Sun May 06, 2012 5:17 am
Location: Chelmsford, Essex, UK

Re: CSS not linking with Apache 2 Server

Sat Feb 16, 2019 6:40 pm

Bad practice. Permissions are there for a reason.

Also, replying to a two year old post is silly.

User avatar
DaveyDave1999
Posts: 28
Joined: Tue Apr 16, 2019 9:16 pm
Location: United States, Hawaii

Re: CSS not linking with Apache 2 Server

Tue Apr 16, 2019 10:02 pm

Id rather put the stylesheet inside /var/www/html/style.css.

Why? Because if you want to upload your code to another server, you wont be forced to set new permissions again.
With those changes in place, your CSS markup should look like this:

Code: Select all

<link rel="stylesheet" type="text/css" href="style.css">
Hope this helps.
Blog about Raspberries coming soon...

Return to “General programming discussion”