Dynamic cascading style sheets
internal or external?

This article presents an easy way of using dynamic cascading style sheets that are linked to Web pages rather that used in-line. Session variables are used to inform the dynamic cascading style sheet of the color themes that are selected by the site administrator. Four color themes with three color shades are used on this Web site.

A style is simply a rule describing how to format a particular portion of a web page. A style sheet is a set of such styles. They allow the HTML author to separate presentation from content in HTML documents. They are an amazing tool which has transformed Web Design as an industry and the Web as an effective communications medium. However, CSS has some flaws, the most frustrating of which is that it does not have variable capability. The corrective to this situation is: use dynamic cascading style sheets using PHP.

Cascading Style Sheets

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language [Wikipedia]. It the result of past efforts by the Internet community to separate design from content. They come in three flavors: internal, external, and inline.

Internal CSS are inserted in the <head> section of the HTML page as in this exemple.

<style type="text/css">    
p {color: white; }  
body {background-color: black; }  
</style>

However, when using CSS it is preferable to keep the CSS separate from the HTML. Placing CSS in a separate file allows the web designer to completely differentiate between content (HTML) and design (CSS). External CSS is a file that contains only CSS code and is saved with a ".css" file extension. This CSS file is then referenced in the HTML using the <link> instead of <style> tag.

<head>
  <link rel="stylesheet" type="text/css"  href="mystyle.css" />
</head>

However, it is possible to place CSS right in the thick of the HTML code, and this method of CSS usage is referred to as inline CSS. It looks like this:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

A lot of people think that PHP can only be used to deliver dynamic HTML pages. This is by no means the whole story! Did you know, for example, that with PHP you can deliver dynamic CSS files? PHP is a free server-side scripting language which can be embedded in HTML code and cannot be disabled by the user. It provides various means of generating and enabling dynamic cascading style sheets.

The question that I raise here is: is it better to use internal or external dynamic cascading style sheets to enable dynamic-CSS?

Internal dynamic CSS

The display of my Web site is almost totally under the control of a dynamic CSS file which can display four different color themes (blue, brown, red and teal) with three shades of the selected color and three font sizes (12, 13 and 14 pt). Years ago, I used four cascading style sheets that I had to update and keep synchronized. The task was tedious, time consuming and prone to errors. As a result, about two years ago, I started using dynamic cascading style sheets without knowing it. I developed a CSS file with embedded PHP code and called it "gtrolayout.php". It displayed the pages in four color themes and the PHP code code enabling these color themes were embedded in the various styles of the CSS file. It is only recently that I haddeed the possibility of modifying the font size.

Now I use only one CSS file that I have called gtrolayout.php. The following snippet shows part of this file with the embedded PHP code highlighted in yellow:

body
{
  font-family: verdana, sans-serif;
  background-image: url(../include/images/acc-bg.gif);
  scrollbar-track-color: <?php echo  $Colors[1] ?>;
  scrollbar-face-color: <?php echo  $Colors[0] ?>;
}

My approach was been quite simple: in my site's PHP "page generator" program, I used the following code:

// Uses only one stylesheet for all themes
//******************************************************************************
  if ($Theme == 'teal')
    $Colors = array('#006633', '#66cc99', '#99ffcc');
  if ($Theme == 'blue')
    $Colors = array('#0000ff', '#6666ff', '#ccccff');
  if ($Theme == 'brown')
    $Colors = array('#663300', '#cc9966', '#ffcc99');
  if ($Theme == 'red')
    $Colors = array('#FF0000', '#ff6666', '#ffcccc');
print '<STYLE TYPE="text/css">';
include_once $myIncPath . "gtrolayout.php";
print '</STYLE>';
//******************************************************************************

Since the variable $Theme had been initialized to its default value (blue) earlier in the code, the inclusion of the gtroloyout.php file produces an internal cascading style sheet that is embedded in the <head> portion of the page and the embedded PHP code is parsed and the values of $Colors[i] set to the proper values. It displays the pages according to the selected color theme instantly. It works very well and allows a lot of flexibility.

External dynamic CSS

While the preceeding method works very well and is quasi immediate when the theme or the font size is modified interactively, I wondered if it would be possible to use a dynamic cascading style sheet containing PHP code externally (linked to the page rather than included). In fact, there is no problem if all the PHP variables of the file are initialized. If the external CSS file contains uninitialized variables which are set by the main program, the problem of passing the value of one or several variables to an external dynamic cascading style sheet is a very serious one.

Among the several methods that were investigated, I have examined two quite extensively. Here they are.

Storing the parameters in a session variable

A normal HTML website will not pass data from one page to another. In other words, all information is forgotten when a new page is loaded: in other words, HTML is stateless. A PHP session solves this problem by allowing you to store user information in an associative array on the server for later use but this session information is temporary and is usually deleted very quickly after the user has left the website that uses sessions.

Sessions work by creating a unique identification (UID) number for each visitor and storing variables based on this ID. This helps to prevent two users' data from getting confused with one another when visiting the same webpage.

In the code shown above, a theme (blue, brown, teal or red) has already been selected: it is the value of the $Theme variable. The sequence of if statements determines the array of colors associated with the selected theme and these values are saved in the session array variable. The dynamic cascading style sheet "gtrolayout.php" is then linked with the page as follows.

print '<link rel="stylesheet" href="' . $myWwwIncPath . 'gtrolayout.php" type="text/css">';

with gtrolayout.php evaluationg the session variables as follows:

if (isset($_SESSION['theme']))
	$Theme = $_SESSION['theme'];
else
	$Theme = 'teal';
if (isset($_SESSION['size']))
	$Font_Size = $_SESSION['size'];
else
	$Font_Size = 12;

The problem is that in all the tests that I have performed, the default values (blue and 12 pt) were always returned meaning that $_SESSION[] was never set. I conclude that, if the values of the session variables are transmitted from page to page, they are not transmitted to the linked CSS file. Failure!

Using the values stored in the accessibility cookies

Suddenly, I had an idea. When any of the accessibility features is modified, the code creates a cookie with the value of the accessibility feature. Then, why not use these cookies to initialize the PHP variables in the CSS file? gtrolayout.php is a CSS file with embedded PHP code that looks like this:

<?php
if (isset($_COOKIE['theme']))      // is cookie('theme') there?
	$Theme = $_COOKIE["theme"];      // set the theme
else $Theme = 'blue';             // set to default theme
if (isset($_COOKIE['font']))      // is cookie('font') there?
	$Font_Size = $_COOKIE['font'];  // set the font size
else $Font_Size = '12';           // set to default font size
if ($Theme == 'teal')
  $Colors = array('#006633', '#66cc99', '#99ffcc');
if ($Theme == 'blue')
  $Colors = array('#0000ff', '#6666ff', '#ccccff');
if ($Theme == 'brown')
  $Colors = array('#663300', '#cc9966', '#ffcc99');
if ($Theme == 'red')
  $Colors = array('#FF0000', '#ff6666', '#ffcccc');
?>

...

#container
{
  width: 90%;
  margin: 10 auto;
  text-align: left;
  border: 5px solid <?php echo  $Colors[0] ?>;
  -moz-border-radius: 15px;
  border-radius: 15px;
  overflow: hidden;
  background: url(../include/images/back.jpg);
}


...

When the file is linked, the file is parsed by PHP and the values stored in the cookies are transmitted to the $Theme and $Font_Size local variable, the $Colors array variable become effective and the page is displayed corrctly. On any modification performed by the user, the change in the display is almost immediate. For the first visit of a user, the CSS file is initialized with default values. It works!

Conclusion

I have consulted several references as shown in the list that follows. The external CSS file contained uninitialized variables which needed to be set by the main program: a very serious problem that I have solved using the values kept in cookies located in the user's browser cache. Given that these cookies would not have been set, the code uses default values for the color theme and the font size.

References

  1. "Des feuilles de style CSS dynamiques avec PHP"
  2. "Dynamic CSS with PHP"
  3. "Build Your Site With Dynamic CSS"
  4. Well House Consultant's "Using PHP to make dynamic style sheets"
  5. "Variables in your CSS via PHP" -
  6. Killersite.com "Dynamic CSS using PHP" - The following question is raised:"I need to pass it a VARIABLE...."
  7. Digital Web Magazine's "Generating dynamic CSS with PHP" - Answers the question in part...
  8. David Wassh Blog "CSS Variables using PHP" - CSS is an amazing formatting tool but it has one glaring omission: variables. In his My CSS Wishlist, he proposed a PHP-like syntax for CSS variables. Using PHP, he made the idea of easy, dynamic CSS a reality.
  9. BarelyFitz Design "CSS colors: take control with PHP" -
  10. Alex Jones "Dynamic CSS A.K.A. CSS Variables" -

    Warning!
    This source code has been written as an exercise and is not intended for anything else. You may freely use and modify it for use in your own applications including commercial applications.
    Anyone who decides to use it does so at its own risk and agrees not to hold the author responsible for its failure.