Have you ever wanted your CSS to respond differently depending upon your page content? It is possible to have interplay between PHP and CSS. If you want to try using CSS and PHP together, here are a few simple suggestions to get you going:

STEP ONE: The html:

In this technique for integrating Dynamic CSS, or PHP enhanced CSS into your projects, your HTML will remain essentially the same. To try this method in your own work, start off with something simple. Find an HTML document in which you’ve applied styling using CSS. You should use an External stylesheet for the bulk of your CSS in this document. Doing so will help you to separate what is constant and what is dynamic.

If you’re used to using an external stylesheet, then you probably don’t use the embedded <style> tag. For this technique, you will be using it in addition to your external stylesheet– again to help in separating dynamic from static CSS, and for the sake of proper functioning with the PHP parser. I’ve tried using the @import rule to pull the dynamic data into the external stylesheet, but the PHP parser doesn’t have a chance to produce the values for those variables, so that method produces errors. (note: if you’re experienced with a way of using the @import method for PHP flavoured CSS, please let me know as I am curious about how to do it)

STEP TWO: PHP in CSS Clothing

place any CSS Values you wish to be dynamic into a php variable, such as:

$intro = "display:block;font-weight:bold;color:red;"; 
$stepone = "display:block;text-align:right;color:blue;"; 
$steptwo = "display:none;";

then combine it together into a string for placing in the HTML head, in the <style> tags, such as:

$dynamiccss = "div#intro {".$intro.";} \n ". 
  "div#stepone {".$stepone."} \n ". 
   "div#steptwo {".$steptwo."} \n ";

NOTE: the reason i’ve separated the lines using concatenation is for the purpose of visual clarity. you don’t have to do it this way, but you may find that you prefer it. the \n is important as it creates a new line in the source code. without the \n, once the data is parsed and displayed on the server, it would be one continuous line of code. it may work that way, but this way is much more easier for a human to interpret, for debugging purposes, or simply viewing the source in general. To effectively have these styles recognized when the page is loaded, this is where we go back to using the style tag in the HTML head. you will need to “print” the output into the page, like so:

<style type="text/css"> 
<!-- <?php print $dynacss;  ?> --> 
</style>

STEP THREE: Conditional Logic:

You may be asking yourself why you would make the effort to have PHP create the CSS style declarations when, by the time it reaces the style element, the PHP output is no different than any other CSS you might put there using a more traditional method. The magic lies in the ability to modify those PHP CSS String values by using conditional logic.

Think of it like this: What if you want a particular word on your navigation to be in bold type but ONLY when the user is viewing it from a certain page? You could use the built-in PHP function, pathinfo to determine the name of the current page, like so:

$path_parts = pathinfo($_SERVER['PHP_SELF']);
$currentpage = $path_parts['filename'];

then use conditional logic to control which HTML element will be modified by the collection of the PHP data, like so:

if(isset($currentpage) && ($currentpage= "index")) {
$indexNavStyle = "font-weight:bold;";
$aboutNavStyle = "font-weight:normal;";
} else if(isset($currentpage) && ($currentpage= "about")) {
$indexNavStyle = "font-weight:normal;";
$aboutNavStyle = "font-weight:bold;";
} else {
$indexNavStyle = "font-weight:normal;";
$aboutNavStyle = "font-weight:normal;";
}

… and so on. The possibilities are limitless.

You’ve already setup the structure for the CSS which can be modified– now all you need to do is decide how you might implement it in the real world!

Preview a Working Example

Have a look at a page I made for creating a custom browser sidebar panel. Note any changes in the page both before and after submitting the first part of the form. There are a couple of elements which are “hidden” by using a “display:none” which then change to “display:block” by using a conditional logic control structure, similar to the example above, which takes data from the form submission to decide which HTML elements you’re allowed to see at which point in the process of the panel creation. (don’t worry– your info isn’t recorded, and it won’t do anything to your browser until you proceed to Step Two, so you will be able to witness the dynamic CSS style changes.)

Good Luck!