Creating Dynamic Cascading Style Sheets with ASP
By Peter Piotti
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 style sheet content from one user to another.
Happy Programming!
