PHP Include & CSS

Question

In my website, I'd like to use the PHP include line within the index.php page to add in important sections like the header and footer.

Now, the folder structure is as follow:

/index.php

/css/style.css

/includes/header.php

/includes/footer.php

Keep in mind I am working in a localhost environment.

Now my question to you is how do I properly reference my CSS file in the index.php and header.php? Should I use a config.php file? I'd like to avoid using absolute paths if that's possible.

Currently, my CSS file is read and displays properly, however, when I make changes, the CSS does not display the changes made and keeps the original unchanged file.

index.php

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

<body>
  <?php include 'includes/header.php';?>
  <div class="container">
    <div class="inner-container">
      <?php include 'includes/javascript.php';?>
    </div>

header.php

<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
  <header>
      <div id="logo">
        <div class="logo-container">
          <img src="img/final_logo_400px.png" alt="">
        </div>
      </div>
      <nav>
        <ul>

to load css files inside your web pages , you will need to use html's <link /> tag, not php's include function; — hassan
– hassan, Commented Mar 10, 2017 at 20:18
I should have mentioned that I am well aware of this but thank you for your response. — ColeGauthier
– ColeGauthier, Commented Mar 10, 2017 at 20:18

mayersdesign · Accepted Answer · 2017-03-10 20:25:42Z

2

Simply use a relative link no? ie:

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

I presonally do the following which checks whether the file is local or remote, and versions the file using its modification time if it is remote (that check fails locally):

 $url = $_SERVER['DOCUMENT_ROOT'];
 $parts = explode('/',$url);
 $base = $parts[0];
 if ($base == 'C:') { ?>
   <link href="/css/style.css" rel="stylesheet" type="text/css" />
 <?php } else { ?>
   <link href="/css/style.css?v=<?php echo filemtime($basepath."/css/style.css")?>" rel="stylesheet" type="text/css" />
 <?php } ?>

answered Mar 10, 2017 at 20:25

mayersdesign

5,3704 gold badges40 silver badges51 bronze badges

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

11 Comments

ColeGauthier Over a year ago

Hey! Thanks for your response! Where would we place the php code above? In the index.php, header.php or a separate config.php file?

mayersdesign Over a year ago

Well, technically (I am guessing!) any of those would work, but I suppose header.php would make most sense. Be aware this code is not "paste and go" it illustrates a concept of including a CSS file in a way that prevents caching issues.

mayersdesign Over a year ago

...just to add if you are relatively new to coding I would simply go with my first example... a standard relative link. It will need to be altered to reflect your directory structure.

ColeGauthier Over a year ago

See the thing is, with relative links, I can't seem to get the css to properly work when I modify the css styles. Maybe I should do an example on codepen or something.

takendarkk Over a year ago

After making changes do you refresh your browser without a cache? As in like, ctrl + f5?

|

Collectives™ on Stack Overflow

PHP Include & CSS

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related