blog icon

CSS variables with PHP

Want to have css variables in your css files?
Here’s a simple solution to have variables in your css.
Well, in fact this are PHP variables inside your css files.

Define all the variables that you want in your HTML document like this:

  1.  
  2. <?php
  3. $color1 = ‘#BB180E’;
  4. $color2 = ‘#666666′;
  5. ?>
  6.  

Use them in your CSS file like this:

  1.  
  2. h1 { color:<?php echo $color1 ?>; }
  3. p { color:<?php echo $color2 ?>; }
  4.  

Here you can see an example.

  1.  
  2. <?php
  3.  
  4. //Define variables here
  5. $red=‘#BB180E’;
  6. $grey=‘#666666′;
  7.  
  8. ?>
  9.  
  10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  11. <html lang="en">
  12. <head>
  13.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  14.         <title>CSS variables with PHP</title>
  15.  
  16.         <style type="text/css">
  17.         #content {
  18.                 font-family:Helvetica,Arial,sans-serif;
  19.                 font-size:12px;
  20.                 line-height:1.4em;
  21.                 width:150px;
  22.         }
  23.  
  24.         #content h1 { color:<?php echo $red ?>; }
  25.         #content p { color:<?php echo $grey ?>; }
  26.  
  27.         </style>
  28.  
  29.  
  30. </head>
  31. <body>
  32. <div id="content">
  33. <h1>Heading 1</h1>
  34. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
  35. <p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio.
  36. </p>
  37. </div>
  38. </body>
  39. </html>
  40.  
post separator
comment feed | 2 comments
February 19, 2008
Filed under: Tutorials
Tags: , ,

GoTo:

2 Responses to “CSS variables with PHP”

  1. pfwd Says:
    April 29th, 2008 at 12:38 am

    This is a very good example. I have written a similar tutorial here (http://blog.pfwd.org.uk/php/ussing-php-in-css/).
    I use this example when a site has multiple themes. The only problem that I have found is that sometimes the css won’t validate

  2. Dave Everitt Says:
    September 1st, 2008 at 11:21 pm

    You can use Apache’s SSI to do this - see my article here:
    http://ecoconsulting.co.uk/training/css_includes.shtml