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 contains a number of attributes. For starters, the
should contain the value
"stylesheet", while the
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:
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
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:
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.
|Return to user tips...|