CSS Not Loading for Include PHP File

Question

I cannot figure out how to apply styles to a page I am including as a template. I have the following directory structure:

app
│   index.php
│   styles.css   
│
└───include
│   │   mainmenu.php

My INDEX file looks like this

<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
    <title>Learn Algorithm Tracing</title>
    <link rel="stylesheet" type="text/css" href="styles.css"</link>
</head>
<body>
<?php
include 'includes/menu.php';
?>
<h1>Welcome</h1>

The CSS works fine in this page and loads OK. However I'm having trouble understanding how to get CSS styles to apply to my mainmenu.php file. At the moment it looks like this.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../styles.css"/>
</head>
<body>
<p class="menuitem">HOME</p>
<p class="menuitem">I KNOW</p>
<p class="menuitem">I WANT</p>
<p class="menuitem">I GOT</p>
</body>
</html>

I added ..\ as the styles for this are stored in the main CSS file which is in the parent directory. However, it doesn't apply the menuitem style here. I've tried every combination I can think of but how do I go about it? How do I apply the styles in the main stylesheet to my mainmenu.php page when it's been included in index.php

EDIT:

Interestingly, when I include one of the styles already used in the index page it works fine, but for some reason it doesn't like the menuitem style. Here is the CSS

body{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    font-family: "Verdana", sans-serif;
}

.maintext {
    font-family: "Arial", sans-serif;
}
.entryprompt{
    width: 50px;
}
.menuitem{
    font-family: "Arial Narrow", sans-serif;
    font-size: 16pt;
    width: 30px;
    margin: 10px;
}

Do you have the CSS in a folder? Or how comes ur using "\..\styles.css" — Putte
– Putte, Commented Mar 9, 2019 at 14:58
Try changing it to this <link rel="stylesheet" type="text/css" href="../styles.css"/> — joka00
– joka00, Commented Mar 9, 2019 at 14:58
I think the issue may have lay somewhere else. I have updated by question — Jane Sampson
– Jane Sampson, Commented Mar 9, 2019 at 15:06
why is there include/mainmenu.php (tree) and includes/menu.php (not in the tree, but in index.php) ? — progysm
– progysm, Commented Mar 9, 2019 at 15:12

Guy Sudai · Accepted Answer · 2019-03-09 15:04:22Z

2

try using ../styles.css instead of \..\styles.css and close the

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

edited Mar 9, 2019 at 15:04

answered Mar 9, 2019 at 14:55

Guy Sudai

2273 silver badges12 bronze badges

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

1 Comment

Jane Sampson Over a year ago

It doesn't work, and PHPStorm doesn't seem to like that I closed the tag

joka00 · Accepted Answer · 2019-03-09 15:12:20Z

2

You are using bad slash in html link tag change \ to this / so CSS import will look like this.

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

Update:

When you include some file then you should use path from the file you are including it to. Try this.

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

edited Mar 9, 2019 at 15:12

answered Mar 9, 2019 at 15:02

joka00

2,5771 gold badge12 silver badges29 bronze badges

Collectives™ on Stack Overflow

CSS Not Loading for Include PHP File

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related