Variables can be very useful in CSS. Unfortunately CSS isn’t particularly variable-friendly. In comes PHP. It is very easy to dynamically create portions of your CSS style sheet using PHP. You can also generate the entire style sheet using PHP if you wish, but I find it usually more practical to only generate needed sections of my CSS with PHP. Either way, here is how it is done:
Convert Existing CSS Style Sheet to PHP
Lets start with an existing webpage with the below index.html and style.css files.
Content of index.html:
<head><title>CSS & PHP Example</title>
<link rel=”stylesheet” type=”text/css” href=”style.php”>
<p>This is text inside a p tag which is inside of the box div…</p>
In index.html, the only required change to convert to a PHP enhanced CSS style sheet is to edit the link tag’s href attribute. In our above example HTML code’s link tag, we changed “style.css” to “style.php”. For example:
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<link rel=”stylesheet” type=”text/css” href=”style.php”>
That’s all for index.html. The rest of the changes will be done in the style sheet.
Content of style.css
Our original style.css file looks like this:
Edit style.css File
We will only be making a few minor changes to the above style.css file to make it work with dynamic PHP variables. Here’s the simple process:
- Save style.css as style.php – all we are doing in this step is changing the .css extension to .php.
- Add some PHP code to the top of the style.php file that changes the content type back to CSS. The php code needed is: <?php header(“Content-type: text/css; charset: UTF-8”); ?>
- Build a couple of variables for various CSS attribute values such as color, padding, height, width etc. You can set any values you wish using PHP by following our example. We are keeping it simple for learning purposes and only changing the background colors in our example webpage by setting a variable for the body’s background color and for the box’s background color with: <?php $body_bg = “red”; $box_bg = “blue”; ?>
- Save style.php and upload your two new files, index.html and style.php to your server for testing. Unlike using just HTML and CSS, when you use PHP and HTML files, you can no longer test the webpage from your desktop unless you have an active web server which most people don’t. But it will work fine if you upload it to your website and navigate to the index.html page.
Final HTML and PHP Code
I won’t list the HTML code again here because it is still the same as it was above, so simply use that if you are following along with this tutorial. The style.php file however has more changes so I am adding the final PHP code for style.php below:
Final PHP/CSS Style Sheet Code
header(“Content-type: text/css; charset: UTF-8”);
$body_bg = “red”;//”#DBF5F3″;
$box_bg = “blue”;//”#DBF5F3″;
background-color: <?php echo $body_bg; ?>;
background-color: <?php echo $box_bg; ?>;
The final solution is no more than a blue div with some simple text inside a red body and you can see my working version of it here: http://jafty.com/CSSnPHP/
Converting index.html to index.php
An optional idea which is often more convenient, is to convert your index.html file into a PHP file. All you have to do is change the .html extension to .php and that is done. One good reason why you might want to convert your HTML file to a PHP file is to be able to declare styles in your index.php file too using PHP. You may also want to set your main styles at the top of your index.php script to make them easy to find and edit. The only reason I used an HTML file in my example was to show you the simplest way to use PHP with CSS styles, in the real world, if you’re using PHP in your style sheet, you are probably going to want to use it in your index file as well. While it is not a requirement, it does make good sense in many situations.
The one caveat to using PHP variables in both your index.php and you style.php file is that when you use the link tag to include your PHP style sheet as in the above HTML example, the variables do not carry over from one page to the other. One possible fix to this is to create a new file just for configuration settings, I use this to set basic color variables and the like and call it config.php. Then other developers working with your code can very easily change colors, sizes and other styles all in one place without having to pour over all the css code.
Another possible solution to overcoming the passing of variables between index and style scripts is to eliminate the use of the link tag to include the style sheet. You could use a regular PHP include function instead, but you’d have to restructure your style sheet to read like an inline style sheet included in the head section of your index.php page. Basically you would not use the content declaration in PHP and wrap the CSS in <style> and </style> tags instead.
If this solution didn’t work for you. There’s a few possible causes.
If you’re on an Apache server and using WordPress with the above solution. You may need leave the file named style.css, and use .htaccess to parse it as PHP. Add the following code to the .htaccess file at the same directory level as the CSS file. Then just use PHP inside it as you would any other PHP file.
Another possible WordPress solution involves using PHP code such as:
$absolute_path = explode(‘wp-content’, $_SERVER[‘SCRIPT_FILENAME’]);
$wp_load = $absolute_path . ‘wp-load.php’;
Do whatever here…
If your PHP variables are not working as expected. Read above last two paragraphs under the heading “Converting index.html to index.php”. There I explain how to overcome this possible issue related to using the HTML link tag.
There you have it! Easy as pie. Of course, in the real world, you will be developing much more complex solutions than this, but the easy example code here should be just enough to get you started using PHP to generate CSS style sheets. If you have troubles when using WordPress with this solution, the troubleshooting tips should help.