[web-tips > CSS variable via PHP]

CSS-PHP Variable

The question has been asked numerous times in the css forum, if there is a way to use a variable from inside css and the answer has always been "No".

Well... technically, if you are using just css, then that answer is correct. However, with just a minor amount of php code (6 lines) you can use variables in css.

Title Text

For example, the color of the above "Title Text" was ruled "Blue" inside cascading style sheet, but then redefined as "Green" via a php variable, which was used inside a different kind of cascading style sheet (see below).

If your browser shows the above title text as green, then this technique works for your browser. As such, this technique allows you to use css variables just like other variables in many other languages.

While I thought of this technique independently, and for my own use, it has been addressed before in the Internet literature (i.e., Google search for "php css variables"). However, I did not find any reference that presented the technique with such simplicity.

The technique simply requires two things:

   1. Use a php suffix stylesheet as show below;

<link rel="stylesheet" href="style.php" media="screen">				

   2. Use a PHP Heredoc to encapsulate CSS as show below.

			
<?php
header("Content-type: text/css");
$color = "green";        // <--- define the variable 
echo <<<CSS   
/* --- start of css --- */
.title-text
	{
	color: $color;  /* <--- use the variable */
	font-weight: bold;
	font-size: 1.2em;
	text-align: left;
	}
/* --- end of css --- */
CSS;
?>

Between the open and close php CSS statement, you can add as much css as you want, or not. You can have your "standard" css in one file and your "variable" css in another or place all in the same file -- it doesn't make much difference.

One of the things that has always bothered me in css has been defining colors. Sure, you can use the word-colors like red, blue, green, and such. But, these are producing error warnings in W3C validation. The W3C wants everyone to use numbers for color.

Normally, that's OK if you have just a couple of colors, but on some of the sites I've worked on I may have a dozen or more colors. As such, they become difficult to keep track of and who can look at a six character sequence and know what color it is, not me. So, I prefer using the above technique to define colors, like this:

• $brown = "#442E18";
• $green = "#42B988";
• $blue = "#4FC4D7";
• $menuUp = "#42B988"; // lite green
• $menuDown = "#BDE7D5"; // dark green

Then in my CSS, it's a simple matter to know, find, and change what color I'm using for a menu item "at rest" (i.e. $menuUp) or "clicked" (i.e. $menuDown).

Also, if at some later date, you need to change a color of something, you don't need to wade through all your css to change a color -- you just do it in the heading one time and it's done. Now, that's simple!

Please note that the php suffixed file is loaded each time the page is called whereas the css file is loaded only once. As such, it may make sense to break your stylesheets into "standard" and "variable" css files. However, IMO, that's not a problem.

Please donate $5 below for my development effort -- thank you.

This technique W3C validates under both HTML 4.01 Strict and CSS guidlines.

Enjoy.

Tedd...