Build Your Site With Dynamic CSS

Image source

Changes to the style of the CSS of a website can be done very easily, with the magic of JavaScript. However, JavaScript can be disabled, so it should be avoided for important things.

The solution would be to use a server-side language, like PHP, to make it possible to create dynamic CSS files without having to resort to using JavaScript. Finally you can use dynamic CSS that works in all browser configurations.

First we will take a look at how this will work, and then we will go straight into two examples. We'll put together a simple grid-based generated by certain variables, and then we will create a script to modify the CSS based on the time of day.

How It Works

There are two crucial parts to ensuring that your dynamic CSS file works correctly.

  • Make sure that your dynamic CSS filename ends with a .php extension.
  • Insert the following line at the top of your CSS file, right after <?php
    header('content-type: text/css');

    This tells the browser to use the output of the script like if it was CSS, instead of the default HTML.

For this example we will call our dynamic CSS file css.php. Let's start out with something simple. In the file referencing our dynamic stylesheet, add the following line of HTML in the head section, like you would do with a normal CSS file.

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

Now let's get started with some simple PHP!

<?php
header('content-type: text/css');
 
$contentWidth = 500;
$bgColour = '#C0FFEE';
$textColour = '#DECAFF';
?>

Here we've set some variables that will hold the values for the width of our content section, the background colour, and the text colour. That's great, but how do we integrate that with our CSS?

body {
    background: <?php echo $bgColor; ?>;
    color: <?php echo $textColour; ?>;
}
 
#content {
    width: <?php echo $contentWidth; ?>px;
}

As you can see, we simply echo out the values where we need them, appending any units if needed. Let's look at slightly more advanced example.

#content {
    width: <?php echo $contentWidth * $contentHeight + 2; ?>px;
    height: <?php echo $contentHeight; ?>px;
}

Here you can see that we can do things such as making the width of the content box the value of $contentWidth times the height of the box plus two.

Now let's take a look at some more examples.

Your Own Grid Layout

You can use these techniques for dynamic CSS to make an easy-to-manage grid-based layout, with each column automatically resizing with the change of one value. Let's get started, shall we?

<?php
// Tell the browser that this is supposed to be CSS
header('content-type: text/css');
 
$mainWidth = 1000;
$spacing = 20;
 
$mainBg = '#FF0000';
$sidebar1bg = '#0000FF';
$contentBg = '#00FF00';
$sidebar2bg = '#C0FFEE';
 
$sidebar1width = ($mainWidth - ($spacing * 2)) * 0.2;
$sidebar2width = ($mainWidth - ($spacing * 2)) * 0.2;
$contentWidth  = ($mainWidth - ($spacing * 2)) * 0.6;
 
?>

These are the variables for a simple three-column layout. The content area takes up 60% of the width, and each sidebar 20%. The spacing in between each column is set and included in each calculation.

And now for the CSS part:

#wrapper {
	width: <?php echo $mainWidth; ?>px;
	background: <?php echo $mainBg; ?>;
	overflow: hidden;
}
 
#sidebar1 {
	width: <?php echo $sidebar2width; ?>px;
	margin-right: <?php echo $spacing; ?>px;
	float: left;
	background: <?php echo $sidebar1bg; ?>;
}
 
#content {
	width: <?php echo $contentWidth; ?>px;
	margin-right: <?php echo $spacing; ?>px;
	float: left;
	border: 1px solid #000 inside;
	background: <?php echo $contentBg; ?>;
}
 
#sidebar2 {
	width: <?php echo $sidebar2width; ?>px;
	float: left;
	background: <?php echo $sidebar1bg; ?>;
}

So try that out, and try changing the values of $mainWidth and $spacing, to see what happens, and to make sure that there are no bugs.

Time-Sensitive CSS

And now for a completely different example? How about having different styles for different times of day? That is made easy using PHP with CSS, and with PHP's built-in date/time functions.

<?php
header('content-type: text/css');
 
date_default_timezone_set("America/Vancouver");
$now = date('G');
 
if ($now < 12) {
    $bg = '#FFFFFF';
} else {
    $bg = '#000000';
}
?>
 
body {
    background: <?php echo $bg; ?>;
}

In this very simple example, we first set the default timezone. And then we use the date() function to return the current hour, in a 24-hour format.

If it is before 12:00, the background colour is set to white. If it is currently 12:00 or later in the day, a black background is displayed.

Couldn't get any simpler than that!

There are so many different possible applications for dynamic CSS. Can you think of any other ways to use this?

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

16 Comments

  1. March 11, 2010

    You could even go a step further (if your webhost supports it) by using url rewriting or adjust the webserver to have .css files parsed by the server-side engine. Then it would look like a static .css file to anyone looking at the code.

  2. March 11, 2010

    This just blew me completely away!
    This is amazing and incredibly useful, I didn't know about this before, but it opens a whole new world of CSS possibilities.
    I'm thinking about layouts for different screen resolutions, browsers, etc.

    Thanks so much for sharing!

  3. March 11, 2010

    You could come across problems if the style sheet is cached, meaning that the user may not see the black background if they have already visited earlier in the day.

    A better idea may be to put the dynamic data into a tag inside your main page, which will still be just as browser compatible but won't be cached.

    I like your thinking though, stay creative :)

    • March 11, 2010

      Yes, that could be a little problem. I hadn't thought about that!

      I'll have to try your idea out sometime :)

    • Alex
      April 29, 2010

      As long as we're editing the header to specify the content type, why not also set Cache-control: no-cache?

      Should fix the problem, provided the server allows it and the browser supports it. Not sure how often that's the case though.

  4. March 11, 2010

    Wauw! I've always missed the use of PHP in my stylesheets!
    I had never imagined it could be this simple!

    Other ways of using it?
    - include only the segments needed for the particular page.
    - calculation of needed sizes
    - load entire color profiles out of a database (templates?)

    Thank you very much for this article!

    • March 11, 2010

      Hmm, I like the idea of getting the colours from a database!

      • March 11, 2010

        Yeah, i just figured that you could probably give GET variables through the link src as well...

        • March 11, 2010

          Yes, you could do that as well! The possibilities are infinite :)

  5. Ryan
    March 12, 2010

    Hey Eric, your idea is innovative, clever and thought provoking. Kudos all around to you! Nifty. :)

    I wanted your feedback about a technique I used to do something similar on a corporate web server.

    I link to one CSS file (mystyles.css). Copies of other CSS files that alter the style and format of the site are stored in the same web directory, but with a .txt extension. I use PHP to then copy the contents of the needed CSS style file from the relevant .txt CSS file, overwriting 'mystyles.css' as needed. When the user refreshes their browser, the new CSS styles would be picked up. I chose this convoluted way since we work in a large team system, and I wanted the other users to be able to change the style without using much programming. I'll probably blog on this when I get my blog set up back again.

    Nice blog by the way Eric!

    Best regards, Ryan.

    • March 12, 2010

      That sounds like an interesting technique. But are you constantly writing to mystyles.css? If so, that might not be extremely efficient. I'm not sure...

      But you have a very interesting idea, it sounds like you could make something great out of that!

  6. ganesh
    March 24, 2010

    great CSS u implemented

    thanxxxxxx a lot for sharing

  7. Saroj
    September 10, 2010

    thanks ,nice n clear tut

  8. Andrew
    March 10, 2011

    Another step for lazy guys (as I usually do myself) is to separate .css part from .php and just include it with:
    include("somestyle.css");
    because this way you could edit .css with for example Dreamweaver :-)))

  9. July 10, 2011

    Can CSS be used on a website that is already been built, or do you have to use it on new websites only? Thanks.