This quick tutorial will explain the basics of creating dynamic stylesheet or script files using PHP.

This will allow for database/user entry/changing scripts or stylesheets without having to manually update anything, but not require that the scripts/stylesheets are embedded in the page.

You also could potentially not even need your page to have any PHP on it, just html, and call the dynamic style sheet as you want.


First, PHP by default outputs html/text. You will want to change the content-type header.

Using PHP this is simple:

For CSS:

<?php
header('Content-type: text/css');
?>
Now, you can use on your page:
<link rel="stylesheet" type="text/css" href="that.php">

For JS:

<?php
header('Content-type: text/javascript');
?>
Now, you can use on your page:
<script type="text/javascript" src="that.php">

Though these files WILL end in '.php', they will act just like .js or .css.

Now for what you can do with them:

For the purposes of this, I will use CSS as the example, but Javascript can be used the same way.

1. The most basic example would simply be like this:

<?php
header('Content-type: text/css');
?>
/*your css below*/
.border {
border: 0;
}
That is just using the header at the top of the page, exiting the php block, then typing your plain text CSS or JS as normal. However, this won't give you much of an advantage if you aren't using PHP to do something you couldn't do with just normal text.

2. Do the same as above, but use PHP to alter the code based on a condition:

a) Use a database to grab code:

<?php
header('Content-type: text/css');
mysql_connect(****);
$row = mysql_fetch_assoc(mysql_query('SELECT `border` FROM `my_table`'));
echo '.border {
border: '.$row['border'].';
}';
?>
That basic example sets the border based on the border value in the database.

b) Use a database to grab code:

<?php
header('Content-type: text/css');
$hour = date('G');
if ($hour < 12) { $border='5'; }
else { $border = '3'; }
echo '.border {
border: '.$border.';
}';
?>
This checks if it is before 12 (noon), and will use a border of 5 if so, or, else, use a border of 3.

c) You could also use GET variables:
On your html/php page, you can use:
<link rel="stylesheet" type="text/css" href="yourcss.php?sheet=1">
This would set the variable $_GET['sheet'] to 1, or you could use any combination of ?variable=value.

<?php
header('Content-type: text/css');
switch ($_GET['sheet']) {
case 1:
$border = 1;
break;
case 2:
$border = 2;
break;
default:
$border = 0;
}
echo '.border {
border: '.$border.';
}';
?>
This is overly simplistic, but works as an example. If the value sent is 1 or 2, the border is that width. If not, it defaults to 0.

The better way to use GET variables, though, is likely using two or more stylesheets actually embedded in the page:

<?php
header('Content-type: text/css');
switch ($_GET['sheet']) {
case 1:
?>
.border {
border: 6;
}
<?php
break;
case 2:
?>
.border {
border: 10;
}
<?php
break;
default:
?>
.border {
border: 3;
}
<?php
break;
}
?>
This uses a switch statement to determine which style to use. You could have much longer styles, of course, since you have exited the PHP code. This allows for very easy use of a single file that can output different styles, for various reasons.
You could just set this in your html source, or you could use PHP to dynamically set the GET variable in the <link> tag if needed:
<link rel="stylesheet" type="text/css" href="yourcss.php?sheet=<?php echo $sheet; ?>>">


There are a lot of options with this, so I hope this helps you get an idea of where to start.