CSS Stylesheet Sampler Script
By Peter A. Bromberg, Ph.D.
Printer - Friendly Version
Peter Bromberg

Recently at work I got handed a CSS stylesheet to use that I was completely unfamiliar with, and asked to doctor up some HTML reports I'm working on to make them look nicer. That's pretty easy stuff if you are the person who authored the CSS or if you are familiar with using it.

But generally, stylesheets have rules that are related to each other by design, in order to create a "content concept" for the site they were designed for, and simply looking over the stylesheet rules or trying them out one by one is a slow, relatively unproductive way to get and be able to embrace the "concept".

I reasoned, "Woudn't it be great if there was a script I could feed this stylesheet to that would display every rule and its visual appearance by name!" So I searched the 3,083,324,652 web pages on Google using various combinations of keywords, and though I picked up a few things I didn't know about CSS in the process, I really was unable to find the script I needed. So, being the enterprising and ever - curious developer that I am, I set out to build it for myself.

The process is really not that difficult: The document.styleSheets collection's items each expose a rules collection which of course has a length property so you can determine how many rules you are dealing with, and each rule item exposes a selectorText property that represents the tag (or combination of tags or class name) for that rule. For example, the selectorText for this style:

.standardFontBldLft {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-align:left
}

would be ".standardFontBldLft", and where we wish to use it inline to apply to a specific tag, we would use it as follows:

<div id=myDiv class="standardFontBldLft" >.standardFontBldLft</div>

Note that in a tag we do not use any preceding periods and we also do not use any trailing colons. At this point we now are in possession of 100% of the knowlege we need to construct our script to display all the rules, their names, and an example tag showing exactly how each rule appears in a page:

<LINK href=LogStyle.css rel=Stylesheet>
<script>
// get the number of rules in the stylesheet
var theLen=document.styleSheets[0].rules.length;
function show(){
var stuff;
var sample;
// iterate through the rules collection
for(var i=0;i< theLen;i++)
{
// get selectorText property of this rule
sample=document.styleSheets[0].rules[i].selectorText;
// get rid of the stylesheet junk so we can use it in a style= attribute
sample=sample.replace(".","");
sample=sample.replace(": ","")
// test to accomodate different HTML control types
if(sample.indexOf("TD")!=-1 || sample.indexOf("td")!=-1 )
{
stuff+="<table><tr><td class='" + sample + "'>" + sample + "</td></tr></table>";
}
else if(sample.indexOf("H1") !=-1)
{
stuff+="<H1 class='" + sample + "'>" + sample + "</H1>";
}
else if(sample.indexOf("H2") !=-1)
{
stuff+="<H2 class='" + sample + "'>" + sample + "</H2>";
}
else if(sample.indexOf("H3") !=-1)
{
stuff+="<H3 class='" + sample + "'>" + sample + "</H3>";
}
else if(sample.indexOf("H4") !=-1)
{
stuff+="<H4 class='" + sample + "'>" + sample + "</H4>";
}
else if(sample.indexOf("H5") !=-1)
{
stuff+="<H5 class='" + sample + "'>" + sample + "</H5>";
}
else if(sample.indexOf("UL") !=-1 || sample.indexOf("ul") !=-1)
{
stuff+="<ul class='" + sample + "'>" + sample + "</ul>";
}
else if(sample.indexOf("LI") ==0 || sample.indexOf("li") ==0)
{
stuff+="<li class='" + sample + "'>" + sample + "</li>";
}
else if(sample.indexOf("TABLE") !=-1 || sample.indexOf("table") !=-1)
{
stuff+="<table class='" + sample + "'><tr><td>" + sample + "</td></tr></table>";
}
else if(sample.indexOf("INPUT") !=-1 || sample.indexOf("input") !=-1)
{
stuff+="<input class='" + sample + "'>" + sample + "</input>";
}
else if(sample.indexOf("A") ==0 || sample.indexOf("a") ==0)
{
stuff+="<BR><a class='" + sample + "' href=http://www.yahoo.com>" + sample + "</a>";
}
else if(sample.indexOf("P") ==0 || sample.indexOf("p") ==0)
{
stuff+="<p class='" + sample + "' >" + sample + "</p>";
}
else if(sample.indexOf("IMG") ==0 || sample.indexOf("img") ==0)
{
stuff+="<img class='" + sample + "' src='http://www.google.com/images/logo.gif' >" + sample + "</img>";
}
else
{
stuff+="<div class='" + sample + "' >" + sample +"</div><BR>";
}
}
res.innerHTML=stuff;
}
</script>
<body > <div align="center">Pete's Nifty Stylesheet Iterator<BR/>
<input type=button value="show" onclick="show();"></div>
<BR><BR>
<div id=res ></div>
</body>

The above should be self-explanatory. If you'd like to see it in action, try this page. Enjoy!


Peter Bromberg is a C# MVP, MCP, and .NET consultant who has worked in the banking and financial industry for 20 years. He has architected and developed web - based corporate distributed application solutions since 1995, and focuses exclusively on the .NET Platform.