Creating Dynamic Stylesheets with PHP – Part 1

This is a simple tutorial article which describes how you can dynamically generate a CSS code using PHP. Generally every programming book & online resource stresses more on the integration of PHP with HTML. Here we are gonna change the rule. We will show you how the repeated tasks such as setting the color of a webpage element in CSS can be automated with PHP.

I have divided this CSS tutorial into two parts. The first part of this CSS tutorial will tell you how to manually set the different hexadecimal values of colors in php variables & using those php variables directly instead of explicitly declaring the repeating colors over again.

Generating CSS Code Using PHP

Prerequisites: This tutorial requires a basic understanding of CSS, PHP concepts & their syntax as a prerequisite.

The following Steps describe how to use PHP in a CSS file & getting the same result in no time.
Step 1: Create a sample stylesheet & add the following CSS code in it:

body {
background:#fff;
color:#222;
}
h1, h2, h3, h4 {
color:#646574;
}
p {
color:#008400;
}

Step 2: Rename the style.css to style.php & add the following PHP code to the top of the file(before body):

<?php header(“Content-type: text/css”); ?> //tells the browser that the file is CSS

Now go to the HTML page where you will be using this stylesheet. Change the preferences in the head section from style.css to style.php. For example:

<link rel=”stylesheet” type=”text/css” media=”screen” href=”style.php”>

Step 3: Just a little bit of discussion before the real action. Guys the basic purpose of using PHP in CSS is to simplify our CSS work & make it fast & dynamic. The CSS attributes used very frequently(color is one of them) can be replaced with php variables which can dynamically fill the place in CSS code wherever we want to apply the attribute’s value.

It is to be noted that this part of the CSS tutorial will not create a dynamic stylesheet, though, it will show you the way to use PHP code in a CSS file & use variables instead of declaring the hexadecimal values. The upcoming part of this CSS tutorial will guide you on how to create a php page & dynamically change the style sheet values depending on the input entered by user.

Ok lets come back to the last step of this CSS-PHP tutorial. A brief summary of the previous steps – Up till now, we have successfully included the PHP header() function in the beginning of the CSS code & we have also changed the stylesheet reference in the head section of our html page.

Now create a PHP code to replace the CSS code at certain places. Starting with the header,

<?php
header(“Content-type: text/css”);

Now we define 3 variables which will replace the the values where we declare the CSS attributes. Lets create $white, $green & $blue to replace the colors white, green & blue respectively. After you are done with declaring the variables, assign the appropriate hexadecimal values to them corresponding to the hexadecimal value of the color which they resemble. Now close the PHP tags. The appropriate PHP code for the above procedure should is as follows:

<?php
header(“Content-type: text/css”);
$white = ‘FFFFFF’;
$green = ’00C000′;
$blue = ’0000FF’;
?>

Now we have successfully saved the hexadecimal values for various colors in seperate memory locations using php variables. We can now proceed to create the desired css-php code. Just write the php variable name in place of the corresponding attribute value. The complete final code for Step 3 is given below:

<?php
header(“Content-type: text/css”);
$white = ‘#FFFFF’;
$green = ‘#00C00′;
$blue = ‘#0000FF’;
?>
body {
background:<?=$white?>;
color:<? =$green ?>;
}
h1, h2, h3, h4 {
color:<? =$blue ?>;
}
p {
color:<? =$blue ?>;
}

You might also like:

1. CSS Tricks for Dummies!
2. Webby Green Theme
3. How to Track Clicks on Outgoing Links
4. Make your JavaScript to be XHTML compliant
5. CSS Pagination Links

Tags: css, css tutorial, php, php in css, php tutorial