How to import/include a CSS file using PHP code and not HTML code?
Asked Answered
X

17

40

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.

Xerophagy answered 11/6, 2011 at 12:0 Comment(4)
Do you want to have the CSS interpreted as PHP, or do you just want the page to use that CSS file in how it displays the HTML?Linhliniment
Why do you want to include a css file without using it?Lebensraum
Your question is a bit confusing because it's unclear why you want to do this. CSS is meant to affect how the page looks. It can only do that if the user's browser reads the CSS and applies it to the HTML. The browser won't be given your PHP code, so it either has to see a reference to the CSS file and be able to fetch it, or see the CSS embedded in the HTML. Which one of those do you mean to have appear in the HTML: the reference to the CSS file, or the raw CSS code? If neither, what's the purpose of bringing in the CSS to your PHP script?Trapezium
I have really problems to understand what you want to do. PHP cannot include CSS.Mawkish
M
91

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.

Motivation answered 11/6, 2011 at 12:11 Comment(4)
This is the best solution, PHP includes don't necessarily have to end .php. Also the <style> tags don't need to be echoed so <style> <?php include 'style.css'; ?> </style> could be used for better readability.Middlebreaker
@Motivation this solution does not work for me. It is not picking the style at all. Any pointers?Maisiemaison
@Maisiemaison Check the source code in the browser. Is the CSS code showing up between the <style> tags? Maybe the include isn't working? Maybe instead of the CSS there is just a PHP error message?Motivation
@Maisiemaison It definitely SHOULD work - so the problem is almost surely this: when you do an include(), you need a filesystem based path, while in the document everything is web root based. Therefore, your php won't find the CSS file. An easy fix for this is using __ DIR __ (uppercase DIR with double underscores on both sides, no spaces; a magic constant of php) that will give you the filesystem path of the file you're in; then you only have to go relative from that.Millepore
E
52

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">
Expertise answered 11/6, 2011 at 12:3 Comment(3)
This (or an @import) is the best way to include CSS in the page. If you use PHP to dump the contents of your CSS file into your HTML, then every time your user requests a page, they will have to download the entire contents of your CSS file along with it, as part of the HTML. However, if you use this kind of tag, the browser can request the CSS seperately, and, the next time it sees a reference to the same CSS file, it will say "oh, I already have that," and not bother requesting it. That will make things faster for the user and will mean less work to your web server.Trapezium
FWIW: I believe this tag is meant to be in the <head></head> section.Balsamic
What if the CSS is in the HTML file?Clausewitz
N
13

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>
Neumark answered 11/6, 2011 at 12:4 Comment(4)
That would just print out the css contents on the HTML page, which is exactly what include doesByssus
I'm assuming his example is simplified, but that might not be the case. I'm also assuming he meant to say he didn't want to rename the file to php (and therefore possibly also didn't want to rename it .inc either) because he doesn't have control over it or some other reason. This method will include the css into the PHP file as he seemed to ask. Don't ding the answer because the question wasn't 100% clear.Neumark
This works better for situations where you are building a string, rather than necessarily rendering a page and since it's a simple matter to just print() the string afterwards, I consider this a more universal solution.Leucomaine
Thanks, this is useful if you need to do a find and replace on paths, for example: <?php echo str_replace ( 'url("..', 'url("http://domain.com/assets' , 'CSS/main.css') ); ?>Induplicate
S
7

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/

Sunbreak answered 19/8, 2013 at 20:41 Comment(0)
F
6
<?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

Fret answered 11/6, 2011 at 13:28 Comment(0)
L
6

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>
Lavellelaven answered 17/11, 2016 at 21:51 Comment(0)
L
2

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 :)

Locale answered 11/6, 2011 at 12:5 Comment(0)
J
1

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'; ?>
    
Juvenile answered 2/2, 2016 at 19:50 Comment(0)
G
0

You could do this

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

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

Gladiate answered 11/6, 2011 at 12:7 Comment(0)
C
0

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>
Condom answered 11/6, 2011 at 12:17 Comment(0)
C
0

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.

Corinacorine answered 14/10, 2015 at 12:52 Comment(0)
S
0

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.

Skulk answered 15/12, 2018 at 18:37 Comment(0)
K
0

This is the format of what I have which works:

<head>
<title>Site Title</title>

<?php include 'header.php'; ?>
</head>

Inside my header.php I have:

<!doctype html>
<html class="no-js" lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/png" href="assets/images/icon/favicon.ico">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
Kimberlite answered 11/10, 2021 at 12:43 Comment(0)
E
0

The file name must be something other than a .CSS index. Write the following:

<link rel="stylesheet" href="style.css" type="text/css" />
Enact answered 6/2, 2022 at 16:44 Comment(0)
S
0

I know its late but I fixed this way.

  • Step-1: <link rel=stylesheet href="/stylesheet.php" type="text/css">
  • Step-2: Apply your business logic in php and echo 'all required css'
  • Step-3: Include this at the top of the stylesheet.php header("Content-type: text/css; charset: UTF-8");
Sprinkling answered 11/4 at 10:8 Comment(0)
I
-2

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..

Incubation answered 7/9, 2014 at 4:14 Comment(0)
B
-2

_trace its directory, I guess

echo css('lib/datatables_rqs/jquery.dataTables.css');
Bayonet answered 7/6, 2016 at 3:50 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.