Click here to Skip to main content
13,403,376 members (53,926 online)
Click here to Skip to main content
Add your own
alternative version


32 bookmarked
Posted 17 Dec 2006

CSS Variables

, 17 Dec 2006
Rate this:
Please Sign up or sign in to vote.
Using HTTPHandlers to support dynamic CSS.


Users want flexibility in the websites they visit; they want to define what content they see, and how it is shown. Website developers want to give them that ability, but need to balance it against maintainability. Using Cascading Style Sheets (CSS), the developer can specify certain base layouts, or themes, and allow the user to change these at runtime. However, creating separate files for all possibilities is just not reasonable. A better way would be to change certain CSS values at runtime based on settings specified by the user, yet CSS does not have variables that can be evaluated at runtime.


To get around the problem of not having variables in CSS, one must read the CSS file and replace the given values at runtime. The good news is that in ASP.NET, this is a relatively easy task.


Generic HTTPHandler

Using Visual Studio 2005, you can easily add a Generic HTTPHandler.

Add New Item

This will create an ashx file and add it to your project. This file implements the IHTTPHandler interface, with its one and only method, ProcessRequest, and includes the WebHandler page directive.

<%@ WebHandler Language="C#" Class="Handler" %>

The .NET Framework treats these files as HTPPHandlers without the need to register them in the <httpHandlers> section of the web.config file.

<%@ WebHandler Language="C#" Class="CSSHandler" %>

The code-behind:

using System;
using System.Web;
using System.Configuration;

public class CSSHandler : IHttpHandler 
    public void ProcessRequest (HttpContext context) 
        context.Response.ContentType = "text/css";
        // Get the file from the query stirng
        string File = context.Request.QueryString["file"];
        // Find the actual path
        string Path = context.Server.MapPath(File);
        //Limit to only css files
        if(System.IO.Path.GetExtension(Path) != ".css")

        //Make sure file exists

        // Open the file, read the contents and replace the variables
        using( System.IO.StreamReader css = new System.IO.StreamReader(Path) )
            string CSS = css.ReadToEnd();
            CSS = CSS.Replace("#BG_COLOR#", 
    public bool IsReusable 
        get { return false; }

As we can see, the ProcessRequest method simply opens the file specified on the query string, reads it, and uses string replace to add the value for the variable that has been specified in the web.config file. Not much to it.

<link rel="Stylesheet" href="CSSHandler.ashx?file=default.css" />

   <add key="BGColor" value="Red"/>


Using a generic webhandler has a disadvantage in that you must specify the style sheet to parse. This breaks down when using ASP.NET 2.0 Themes, however, because any stylesheet placed in the theme folder will automatically be linked, no need to manually add it to your web pages. Although you can manually add each one, it isn't a very maintainable model.

Better solution

A better solution is to create a custom HTTPHandler and add it to the httpHandlers section of the web.config file.

    <add verb="*" path="*.css" 

       type="CustomHandler.CSSHandler, CustomHandler"/>

The code:

public class CSSHandler : IHttpHandler 
#region IHttpHandler Members

    public bool IsReusable
        get { return false; }

    public void ProcessRequest(System.Web.HttpContext context)
        // Get the physical path of the file being processed
        string File = context.Request.PhysicalPath;

        // Open the file, read the contents and replace the variables
        using(System.IO.StreamReader reader = new System.IO.StreamReader(File))
            string CSS = reader.ReadToEnd();
            CSS = CSS.Replace("#BG_COLOR#", 


The only difference from the previous example is that the CSS file to parse is obtained from the context.Request.PhysicalPath property. Since the handler is registered for CSS files, it will process any stylesheet file regardless of its location in the web project.


This article has hopefully shown a method that can be used to provide dynamic settings to an otherwise static file and give website users a more positive experience.


This article, along with any associated source code and files, is licensed under The Common Development and Distribution License (CDDL)


About the Author

You may also be interested in...

Comments and Discussions

GeneralMy vote of 1 Pin
spdev@201228-Feb-12 9:00
memberspdev@201228-Feb-12 9:00 
GeneralRe: My vote of 1 Pin
Mark Nischalke28-Feb-12 10:42
mvpMark Nischalke28-Feb-12 10:42 
GeneralMy vote of 1 Pin
Carl Jung10-Apr-11 11:50
memberCarl Jung10-Apr-11 11:50 
GeneralRe: My vote of 1 Pin
Mark Nischalke28-Feb-12 10:43
mvpMark Nischalke28-Feb-12 10:43 
GeneralCool concept but... [modified] Pin
HoyaSaxa936-Oct-10 1:25
memberHoyaSaxa936-Oct-10 1:25 
GeneralRe: Cool concept but... Pin
Mark Nischalke6-Oct-10 3:27
mvpMark Nischalke6-Oct-10 3:27 
Generalan excellent contribution, thanks ! Pin
BillWoodruff7-Jun-10 17:58
memberBillWoodruff7-Jun-10 17:58 
GeneralMy vote of 1 Pin
William Dyson9-Apr-10 7:07
memberWilliam Dyson9-Apr-10 7:07 
GeneralRe: My vote of 1 Pin
Mark Nischalke7-Jun-10 17:27
mvpMark Nischalke7-Jun-10 17:27 
GeneralNot working in Firefox Pin
pavithru17-Feb-10 4:14
memberpavithru17-Feb-10 4:14 
GeneralRe: Not working in Firefox Pin
Mark Nischalke17-Feb-10 12:40
mvpMark Nischalke17-Feb-10 12:40 
GeneralMy vote of 2 Pin
BooGhost29-Dec-09 10:13
memberBooGhost29-Dec-09 10:13 
GeneralRe: My vote of 2 Pin
Mark Nischalke17-Feb-10 12:37
mvpMark Nischalke17-Feb-10 12:37 
Generalperformance Pin
liorgold31-Jul-07 23:25
memberliorgold31-Jul-07 23:25 
GeneralRe: performance Pin
Mark Nischalke1-Aug-07 2:43
mvpMark Nischalke1-Aug-07 2:43 
GeneralRe: performance Pin
Evyatar Ben-Shitrit1-Aug-07 9:24
memberEvyatar Ben-Shitrit1-Aug-07 9:24 
Questionare there other versions?? Pin
nilskyone19-Jun-07 0:13
membernilskyone19-Jun-07 0:13 
AnswerRe: are there other versions?? Pin
Mark Nischalke19-Jun-07 3:03
mvpMark Nischalke19-Jun-07 3:03 
GeneralRe: are there other versions?? Pin
nilskyone9-Jul-07 15:37
membernilskyone9-Jul-07 15:37 
GeneralRe: are there other versions?? Pin
molebrain13-Jul-07 4:52
membermolebrain13-Jul-07 4:52 
Questionthis is working for localhost but not for online.. Pin
rakesh_csit24-May-07 19:54
memberrakesh_csit24-May-07 19:54 
AnswerRe: this is working for localhost but not for online.. Pin
Mark Nischalke25-May-07 3:12
mvpMark Nischalke25-May-07 3:12 
QuestionNot working for me Pin
Saumin24-May-07 13:05
memberSaumin24-May-07 13:05 
AnswerRe: Not working for me Pin
Mark Nischalke24-May-07 16:46
mvpMark Nischalke24-May-07 16:46 
GeneralRe: Not working for me Pin
Saumin25-May-07 5:52
memberSaumin25-May-07 5:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.1802120.2 | Last Updated 17 Dec 2006
Article Copyright 2006 by Not Active
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid