[php] How to import/include a CSS file using PHP code and not HTML code?

I have googled a lot but it seems that I am doing something wrong.

I want to do this:

<?php
include 'header.php';
include'CSS/main.css';
...
?>

However, my page prints the CSS code.

Note: I want to use PHP to include the CSS file, and not use I also do you want to rename my CSS file to a PHP file as some website mentioned.

Any clues?

Many thanks.

This question is related to php html css import

The answer is


You could do this

<?php include("Includes/styles.inc"); ?>

And then in this include file, have a link to the your css file(s).


You are including the CSS code as text in your PHP page. Why not just link it in the traditional fashion?

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

The best way to do it is:

Step 1: Rename your main.css to main.php

Step 2: in your main.php add

<style> ... </style>

Step 3: include it as usual

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

That is how i did it, and it works smoothly..


I don't know why you would need this but to do this, you could edit your css file:-

<style type="text/css">
body{
...;
...;
}
</style>

You have just added here and saved it as main.php. You can continue with main.css but it is better as .php since it does not remain a css file after you do that edit


Then edit your HTML file like this. NOTE: Make the include statement inside the tag

<html>
<head>
 <title>Sample</title>
 <?php inculde('css/main.css');>
</head>
<body>
...
...
</body>
</html>

This is an older post, however as the info is still relevant today an additional option may help others.

  • Define a constant for the file path per Stefan's answer. The definition can be placed at the top of the PHP page itself, or within an included/required external file such as config.php. (http://php.net/manual/en/function.include.php)

  • Echo the constant in PHP tags, then add the filename directly after. That's it!
    Works for other linked files such as JavaScript as well.

<?php
define('CSS_PATH', 'template/css/'); //define CSS path 
define('JS_PATH', 'template/js/'); //define JavaScript path 
?>
<!-- Doctype should be declared, even in PHP file -->
<!DOCTYPE html> 
<html>
<head>
<link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>main.css">
<script type="text/javascript" src="<?php echo JS_PATH; ?>main.js"></script>
</head>
<body>
</body>
</html>

<?php
  define('CSSPATH', 'template/css/'); //define css path
  $cssItem = 'style.css'; //css item to display
?>    
<html>
<head>
 <title>Including css</title>
  <link rel="stylesheet" href="<?php echo (CSSPATH . "$cssItem"); ?>" type="text/css">
</head>
<body>
...
...
</body>
</html>

YOUR CSS ITEM IS INCLUDED


I solved a similar problem by enveloping all css instructions in a php echo and then saving it as a php file (ofcourse starting and ending the file with the php tags), and then included the php file. This was a necessity as a redirect followed (header ("somefilename.php")) and no html code is allowed before a redirect.


Just put

echo "<link rel='stylesheet' type='text/css' href='CSS/main.css'>";

inside the php code, then your style is incuded. Worked for me, I tried.


You have to surround the CSS with a <style> tag:

<?php include 'header.php'; ?>
<style>
<?php include 'CSS/main.css'; ?>
</style>
...

PHP include works fine with .css ending too. In this way you can even use PHP in your CSS file. That can be really helpful to organize e.g. colors as variables.


You can also do the following:

  1. Create a php file in includes folder, name it bootstrap_css.php for example
  2. paste the css code files to file created above

     <?php 
      $minCss=' <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">';
    
     $business = '<link href="bootstrap/css/modern-business.css" rel="stylesheet">';
    
      echo $minCss;
      echo $business;
    ?>
    
  3. in the html header, include the css files as follows

     <?php include_once 'includes/bootstrap_css.php'; ?>
    

To use "include" to include CSS, you have to tell PHP you're using CSS code. Add this to your header of your CSS file and make it main.php (or styles.css, or whatever):

header("Content-type: text/css; charset: UTF-8");

This might help with some user's connections, but it theoretically (read: I haven't tested it) adds processor overhead to your server and according to Steve Souder, because your computer can download multiple files at once, using include could be slower. If you have your CSS split into a dozen files, maybe it would be faster?

Steve's blog post: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ Source: http://css-tricks.com/css-variables-with-php/


you can use:

<?php
$css = file_get_contents('CSS/main.css');
echo $css;
?>

and assuming that css file doesn't have it already, wrap the above in:

<style type="text/css">
...
</style>

_trace its directory, I guess

echo css('lib/datatables_rqs/jquery.dataTables.css');

If you want to import a CSS file like that, just give the file itself a .php extension and import it anyway. It will work just fine :)


Examples related to php

I am receiving warning in Facebook Application using PHP SDK Pass PDO prepared statement to variables Parse error: syntax error, unexpected [ Preg_match backtrack error Removing "http://" from a string How do I hide the PHP explode delimiter from submitted form results? Problems with installation of Google App Engine SDK for php in OS X Laravel 4 with Sentry 2 add user to a group on Registration php & mysql query not echoing in html with tags? How do I show a message in the foreach loop?

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to import

Import functions from another js file. Javascript The difference between "require(x)" and "import x" pytest cannot import module while python can How to import an Excel file into SQL Server? When should I use curly braces for ES6 import? How to import a JSON file in ECMAScript 6? Python: Importing urllib.quote importing external ".txt" file in python beyond top level package error in relative import Reading tab-delimited file with Pandas - works on Windows, but not on Mac