Managing colour schemes in CSS

Managing colour schemes in CSS can be difficult. With a bit of PHP you can take control of colour schemes in your stylesheets.

Why bother?

A fair question. The find and replace option will do a good job of changing the colours in your stylesheet if you need to. But wouldn't it be easier if you just had to change the colours in one place? What if you want to use a variable to set the colours? You would need to change many lines of code. Learning from CSS it is much easier and less time consuming to keep everything in one place. Furthermore I believe it helps to maintain integrity over a design.

An example colour scheme

Here's an example colour scheme. I usually like to have five colours ranging from darker primary colours to supplementary highlight colours. These colours have a logic in the design. They are not just applied randomly. So for me it makes sense to make this logic explicit in the stylesheets.

PHP to the rescue

PHP allows you to parse any document using the PHP engine. This means you can use PHP in your CSS files. To do this you need to add the following lines to your .htaccess file:

<IfModule mod_mime.c>
AddType application/x-httpd-php .css
</IfModule>

You also need to add the following to the top of all of your css files, even if you don't use PHP in them


<?php header("Content-type: text/css"); ?>

Colour scheme as variables

Once you have set up your CSS files to use PHP you can declare your colour scheme as variables.

<?php
// Colour scheme
$primary = "#669966";
$secondary = "#99cc99";
$tertiary = "#ccffcc";
$quaternary = "#e8fed8";
$quinary = "#effce4";
?>

This can sit at the top of your css file or you can choose to keep it in a separate file and include it. It is up to you.

When you write CSS rules instead of writing the colour use the variable instead.

}
#example-id h4
    {
    background-color:<?php echo $secondary ?>;
}

Many benefits

I find there are many benefits to using this method:

By separating the colour scheme from the main CSS you make it much easier to manage. If in future you want to allow users to choose colours it will simple to do so.
If you want to apply a totally new colour scheme you can do so in a matter of minutes.
Using this method forces you to think more carefully about the colour scheme.
If a colour is not appropriate for an element of the design then you can quickly switch it to another one from the palette.
I have always found large CSS files are difficult to wade through. Using this method solves the problem for colour at least.

Comments

carvingCode May 8 2007

Interesting. Hadn’t realized that we could parse CSS with PHP. Will give this a try. Thx!

web design May 8 2007

Interesting. I am not sure till I try using it whether it makes it simpler than having a colours css, a size css and a main css for the structure? That’s what I do and as well as my self, I can allow my visitors to change the colours and size to what they want.

I’m not criticizing you, but just wondering how necessary the php is.

George Ornbo May 9 2007

just wondering how necessary the php is

@Web design - For smaler sites I think you have a point. There is just no need. I personally find it difficult to manage large stylesheets and that this techniques makes them more flexible and easier to maintain. Of course it is a matter of personal choice though!

Sven SÃ¶hnel May 9 2007

Hi and thanks!

Looks cool and interesting!
I’ll combine this with some SQL, just for fun..
...and flexibility!

Bye!

Andrew Rickmann May 10 2007

I have used something very similar in conjunction to a query string to change colours depending on the collection that the current post is in.

I have also used something a little more complex to simplify the typography on my site.

Sven SÃ¶hnel May 11 2007

Hi again,

(sorry for my bad english)
Currently I get the standard-CSS from within a DB,
so I can only switch complete CSS-Constructions.

With your Idea i can do this more specific - great!

(Hope I can try it next week, I’m bussy by my local
Apache/PHP-Debug-Construction...)

Have a nice Weekend!

By!

doob May 11 2007

Interesting.
It also works without a .htaccess if you start and include the Style Sheets as a PHP-file.
<link rel="stylesheet" href="styles.php" type="text/css">
instead
<link rel="stylesheet" href="styles.css" type="text/css">

hAVE pHUN
~~~d(o.o)b~~~

Andrew Rickmann May 11 2007

It didn’t occur to me to use the .htaccess file to be honest so I just linked directly to the PHP file.

As I use dreamweaver I found it best to name the files as what they were, i.e. I used a PHP file to import the CSS files. That way the code highlighting and code completion functions still worked appropriately for each file type.

benni3005 May 14 2007

Parse CSS with PHP? ThatÂ´s a good idea and IÂ´m using it, too. But thereÂ´s a big problem using this method:
You declare all *.css-files as PHP within the .htaccess. This means all the *.css-files get parsed, even when they not contain any PHP-code and this causes a lot of power the server needs somewhere else.
The better method is either declare only specific files or directories, where PHP gets parsed within *.css-files or you split the code of the CSS in 2 files. One of them is an ordinary *.css-file and the other one is a *.php-file with CSS- and PHP-codes inside. The *.php-file should look like this:
<?php
header('content-type: text/css');
[weitere PHP-Befehle]
?>

Chris Jun 27 2007

Hello. I just like to comment, thank you very much for this. This was exactly what I wanted to do, except I wanted an effecient method, which undeniably this is. Thank you.

ØµÙˆØ± Dec 19 2007