How to Control CSS Variables with PHP

PHP

CSS doesn't have support for variables like a programming language does, by default. However, there are a couple of things that can be done to incorporate variables into CSS styles. In this tutorial, I will demonstrate how to add dynamic styles to CSS with the help of PHP variables.

CSS provides static styles for your web pages, in other words, when you declare CSS rules in your stylesheet, those rules stay in effect statically and they don't change dynamically based on other things on your website. Though CSS was never intended for the generation of dynamic styles (not that it wouldn't be wonderful), it is possible to create dynamic styles in a number of ways such as using CSS pre-processors and extensions like Less or Sass, as well as server-side scripting languages like PHP.

If you are just starting with PHP, you can get familiar with PHP on PHP.net site.

TIP: As of writing this post, an experimental technology to bring variables support to CSS is under development. You can follow the details about this new technology on MDN's page here and check the current browser support here.

Now, let's continue with how we can control the CSS of a web page using PHP.

Create PHP Style File and Link to It

When we create an external style sheet, we use the .css file extension while saving it, e.g. style.css. And when we link to this file, we use the following code in the head section of our HTML page:

<link rel='stylesheet' href='style.css'>

Since we will be using PHP variables to achieve dynamic CSS styles on our page, we will need to create a PHP file with .php extension, e.g. style.php, put our variables and style rules into it and link to it like the following:

<link rel='stylesheet' href='style.php'>

Content Type of the PHP Style File

Since we will serve our style.php file as a stylesheet file, we need to declare its content type at the top of the file as follows:

<?php
header("Content-Type: text/css");
?>

This will assure that the style.php file will be served as a CSS style file.

PHP Style File Caching

Regular CSS files, style files that have the .css extension, are static files that are not generated on runtime. However, PHP files are dynamically generated on runtime, i.e. their content are generated when the visitor makes a request to that file. Hence, whenever the visitor makes a new request, unlike the static CSS files which are cached and stored in the browser cache, the PHP style files will need to be generated again. This will create additional load on the server, which is not desirable for performance reasons.

What we can do is that we can add a caching mechanism to the PHP style file so that it is not generated from scratch every time it is requested by the visitor. Simply add the following to your style.php file:

<?php
header("Content-Type: text/css");
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + (60*60*24*30)) . ' GMT');
?>

The above code will make the browser treat the PHP style file as a static one and cache it for the next 30 days. You can change the value of 30 in the above line as you wish.

We can now continue with creating some PHP variables that we can use in our CSS.

CSS Variables with PHP

We first create PHP variables for the body background color, font family and font size as shown in the following example:

<?php
header("Content-Type: text/css");
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + (60*60*24*30)) . ' GMT');

$body_background_color = '#8f071d';
$body_font_family = 'Arial, sans-serif';
$body_font_size = '15px';
?>

Then, we use these variables in CSS rules like below:

<?php
header("Content-Type: text/css");
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + (60*60*24*30)) . ' GMT');

$body_background_color = '#8f071d';
$body_font_family = 'Arial, sans-serif';
$body_font_size = '15px';
?>

body {
  background-color: <?php echo $body_background_color ?>;
  font-family: <?php echo $body_font_family ?>;
  font-size: <?php echo $body_font_size ?>;
}

You can name your PHP variables as you wish, and keep them as short or as long as you want.

You can also use PHP's Heredoc syntax to get rid of the frequent opening and closing PHP tags and echo statements as follows:

<?php
header("Content-Type: text/css");
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + (60*60*24*30)) . ' GMT');

$body_background_color = '#8f071d';
$body_font_family = 'Arial, sans-serif';
$body_font_size = '15px';

echo <<<CSS   
body {
  background-color: $body_background_color;
  font-family: $body_font_family;
  font-size: $body_font_size;
}
CSS;
?>

Inline CSS Styles with PHP Variables

If you just need to apply a few styles inline as per your project requirement, you can use the following syntax to apply inline styles to HTML elements with the help of PHP variables:

<div id="header" style="height: <?php $header_height ?>px">

Obviously, you will need to define the $header_height variable at the top of your PHP page.

CSS Style Calculations with PHP

PHP is not only good for allowing the use of variables in CSS, but it also makes it possible to make calculations which you may need in your style files. Here is a basic example that gets the half of the width value of the container and assigns it to the inner content div.

#container { width: <?php echo $container_width ?>px }
#content { width: <?php echo $container_width / 2 ?>px }

TIP: If you want to control JS with PHP variables, please check the other post about how to include PHP variables in JavaScript.

f t g+ in