Cascading Style Sheets (CSS) are used to separate style and layout rules from HTML content. Normally these rules are stored in a separate file called a cascading style sheet. By setting properties for a tag or class once, its appearance is changed everywhere it is displayed. CSS can save you an incredible amount of time both developing and maintaining your Web sites, and they promote display consistency across multiple pages. For an introductory article on style sheets go to http://wdvl.internet.com/Authoring/Style/Sheets/. The remainder of this article will assume a working knowledge of style sheets.

If you are already using style sheets, you are probably using a static text file with a .CSS file extension. Sometimes you may want to change the look of a page based on dynamic content. One way to do this is by dynamically producing the cascading style sheet.

A Web page can specify to use a particular style sheet via the link tag. The link tag contains a number of attributes. For starters, the rel attribute should contain the value "stylesheet", while the type attribute of the link tag should be set to "text/css". Finally, the href attribute must point to a file containing the style rules. In using this href attribute you can make your stylesheets dynamic, since the href attribute can point to any file that returns the rules in text format, even an ASP page! A querystring parameter can be used to pass along dynamic values, which can be used to determine the content of the style sheet rules. The end result? Dynamic style sheets!

Why would you want to use dynamic style sheets? A simple example: Bank X uses ASP to produce pages where customers can view information about their credit card accounts. Bank X has three types of cards: standard, gold and platinum. One ASP page can be used to display transaction information for all three account types, and it can pass the type of card to a style sheet generating ASP-page; the style sheet generated would be appropriate to the user's card type.

So, let's look at some code! First, here's what the style sheet link tag looks like:

<link rel="stylesheet"
         href="dynastyle.asp?cardtype=<%= cardtype %>"
         type="text/css">




where the variable cardtype has the value of either standard, gold or platinum, depending on the visitor's credit card type.

The ASP page dynastyle.asp can now create the correct properties of the style sheet rules dynamically based on the querystring value. For this article, I decided to make the code for dynastyle.asp fairly simple - the style sheet contents are simply hard-coded in. A more flexible solution, though, would be to have the style sheet values pulled from a database. The code for dynastyle.asp can be seen below:

<% LANGUAGE=VBSCRIPT %>
<%Option Explicit%>
<%
Dim cardtype, light_color, dark_color, cardimage

'Read in the querystring value
cardtype = request.querystring("cardtype")

'Set our stylesheet values based on the
'querystring value passed in
select case cardtype
  case "gold"
    light_color = "gold"
    dark_color = "navy"    
    cardimage = "goldcard.gif"
  case "platinum"
    light_color = "silver"
    dark_color = "green"    
    cardimage = "platinumcard.gif"
  case "standard"
    light_color = "#ddffdd"
    dark_color = "#339933"    
    cardimage = "standardcard.gif"
end select
%>

h2 { FONT-FAMILY: Arial; FONT-STYLE: italic;
     COLOR: <%= dark_color %> }
     
li {LIST-STYLE-IMAGE: URL("<%= cardimage %>");}

table.transactions{BACKGROUND-COLOR:<%= light_color %>;
    COLOR:<%= dark_color %>;
    BORDER: THICK DOUBLE <%= dark_color %>;}

.reverse{BACKGROUND-COLOR:<%= dark_color %>;
    COLOR:<%= light_color %>;}




That's all there is to it. Other triggers, such as cookies and session variables, can also be used to vary the