CODEWITHSUNDEEP
phphtmlcss
Nilton Frederico Teixeira
Nilton Frederico Teixeira

Reputation: 75

How to add css files using PHP inside the <head> tag?

Ok, let me explain:

I have a some files, something basic like this:

index.php

<html>
      <head>

            <title>Simple page</title>

      </head>

      <body>

            <?php include 'home.php'; ?>

      </body>
</html>

home.php

<div class="thisWillBeBlue">Still not blue</div>

style.css

.thisWillBeBlue {background: blue}

Now the question: Using php I want to insert the style.css inside the head tag, calling it from the file home.php. Well, I came out with a solution, but it was not very effective:

index.php

<?php $css = array(); 
      $css[] = 'linktothecss.css'

?>

<html>
      <head>

            <title>Simple page</title>

            <?php

                foreach($css as $item){

                    echo "<link rel='stylesheet' href='".$item."' />";

                }

            ?>

      </head>

      <body>

            <?php include 'home.php'; ?>

      </body>
</html>

But the problem it is, If I call the css from home.php it will be added to the array later, therefore it will not be echoed inside the head tag. Any ideas?

Upvotes: 0

Views: 4247

Answers (3)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123367

You could do it using ob_start() and ob_end_flush() functions e.g.

index.php

<?php

$csspage = "default.css";
function loadCSS($buffer) {
  global $csspage;  
  return (str_replace('{{ css }}', $csspage, $buffer));
}

ob_start("loadCSS"); ?>

<html>
   <head>
      <!-- the string {{ css }} is just a placeholder that will be replaced 
           with the new value of $csspage defined later in the code, otherwise
           it will replaced with its initial value (default.css)
      -->
      <link href="{{ css }}" /> 
   </head>

<body>
     <?php include 'home.php'; ?>
</body>

</html>

<?php ob_end_flush(); ?>

home.php

 <?php $csspage = "custom_style.css";  ?> 
 <div class="thisWillBeBlue">blue</div>

Further reference: https://www.php.net/ob_start

Upvotes: 1

Harvtronix
Harvtronix

Reputation: 854

CSS file references can be placed in the body of your code, if needed.

<body>
  <link href="linktothecss.css" rel="stylesheet" type="text/css" />
  <div class="thisWillBeBlue">
    I'll be blue as soon as linktothecss.css finishes loading!
  </div>
</body>

The only difference is that when in the HEAD, they are guaranteed to be loaded before the page is rendered. When they are in the BODY, there may be a split-second where they are still loading and the styles haven't been applied yet.

If you definitely want them in the HEAD, you could define the css requirements in a separate folder with the same file name, like so:

index.php:

<html>
  <head>
    <?php
    include('css-requirements/home.php');
    ?>
  </head>

  <body>
    <?php include('home.php'); ?>
  </body>
</html>

and

css-requirements/home.php:

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

Upvotes: 0

newTag
newTag

Reputation: 2169

I think you are looking for something like this ..(include a piece of code in their header files, so that it will allow you to add more stylesheets )

This will allow you to add more stylesheets to it on each page. (add this to <head>)

<?php
if (!empty($styles) && is_array($styles)) {
    foreach ($styles AS $style) {
        echo '<link rel="stylesheet" href="/assets/css/'. $style .'">';
    }
}
?>

You can put a variable at the top of an individual script if you need a specific stylesheet:

<?php
$styles = array('custom_style.css');
?>

Upvotes: 0

Related Questions