Using PHP to generate a CSS file.
One advantage of CSS is that your styles can be kept in a separate file from the pages that use them. This is simply a text file that ends with the .css suffix such as style.css. The suffix tells the server to treat the contents of the file as CSS. Unfortunately, the CSS standard doesn’t allow for variables within a .css file. The solution is to use a PHP file, such as style.php and include code to let the server know that the contents of the file should be treated as CSS. This can be accomplished by including the following line of PHP at the top of the style sheet;
<?php header(“Content-type: text/css”); ?>Your style definitions can then follow so that the top of your style.php document looks something like this:
<?php header(“Content-type: text/css”); ?>Your .php style sheet will now function exactly like a .css one. We’ll get to the variables in a minute but first…
a:link { text-decoration : none; color : #FF0000; }
a:active { text-decoration : underline; color : #FF0000; }
a:visited { text-decoration : none; color : #FF0000; }
a:hover { text-decoration : underline; color : #660000; }
Linking to your .php style sheet
You can link to your .php style sheet exactly as you would a regular style sheet. Here’s the code I placed in the <head> section of my webpage:
<link href=”style.php” rel=”stylesheet” type=”text/css” />Using variables in your style.php file
The advantage of a PHP style sheet is that it allows you to define variables and then use those variables throughout your style sheet. So, for the example I gave above where the a:link, a:active and a:visited styles all use the same color (#3366cc), we could define a “$linkColor” variable (The “$” before linkColor simply indicates it is a variable.) and use it in all three styles. The variable definition would look like this:
<?php header(“Content-type: text/css”);Remember all PHP code must be contained within a php tag which opens with “<?php” or simply “<?” and closes with “?>”
$linkColor = ‘# #FF0000;
?>
We can now insert the variable into our css code like this:
<?=$linkColor?>Notice the opening and closing php tags.
So the beginning of our CSS file now looks like this:
<?php header(“Content-type: text/css”);Now to change the color of the a:link, a:active and a:visited links from red (#FF0000) to blue (#0000FF) we need only change the definition of $linkColor:
$ linkColor = ‘#FF0000;
?>
a:link { text-decoration : none; color : <?=$ linkColor?>; }
a:active { text-decoration : underline; color : <?=$ linkColor?>; }
a:visited { text-decoration : none; color : <?=$ linkColor?>; }
a:hover { text-decoration : underline; color : #000021; }
<?php header(“Content-type: text/css”);A word about variables and variable names
$ linkColor = ‘#0000FF;
?>
It should be easy to see how this trick can make editing your style sheets a lot easier. What’s less obvious (at least initially) is that, if you create a variable for every possible style, your variable list will soon become nearly as complicated and confusing as your original style sheet. Here are a couple tips to keep things simple:
- Build your color palette carefully so that you can color as many pieces of the design as possible using the same variable. For instance, if your header, footer and sidebar will be the same color, you can use the same variable (perhaps $secondColor) to define them.
- Don’t be too specific with your variable names. You don’t want to use the variable name $red, if you might be changing it to blue later on. Similarly, you probably don’t want to use the variable name $headerColor if the variable is also used for the footer and sidebar. I prefer names such as $themeColor, $hiliteColor, etc.
- Plan carefully so that you don’t force yourself into a situation where your type and background have insufficient contrast. In spite of #1 above, you might sometimes need to define more than one variable with the same color to provide future flexibility.
- Use PNG graphics for images that are partially transparent. Since PNGs offer true transparency, you can create a drop shadow that will work over any background color. That’s important if you’ll be changing those background colors. Just remember, you need to use a png javascript fix for PNGs to display properly in Explorer 6.
NOTE:
header(’Content-type: text/css’); seems to cause problems for Safari. Try this instead:
header(”Content-Type: text/css; charset: utf-8?);
