TopXML CSS library : Formatting XML with CSS (a.k.a my favorite jokes)

Home Page

Add/Edit your code items

Search the code library

Browse for the code library

CSS
CSS
CSS Contents

By	David Silverlight
First Posted	05/24/2003
Times viewed	247

Formatting XML with CSS (a.k.a my favorite jokes)

This post contains attachments
v20030524132157.zip

Summary This snippet demonstrates using CSS to do rudimentary formatting of XML elements. I happen to use my favorit joke list to demonstrate it.

View this snippet in Action

This page is a simple listing of some of my favorite jokes. The data is stored in an XML file and the formatting is accomplished using nothing more than Cascading Style Sheets.

okay, so the jokes are a bit dated, but they were really funny when I originally put the list together about 3 years ago. I even added a new one at the top.

Additional information
Below are the contents of the XML document: ---------------------------------------------------- <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="jokes.css"?> <JOKES> <TITLE>Dave's Favorite Jokes</TITLE> <COLLECTOR>David Silverlight</COLLECTOR> <JOKE> <QUESTION>Did you hear that the FBI stopped this guy at the airport for carrying a calculator and compass?</QUESTION> <PUNCHLINE>They thought that he was with the terrorist organization "Al Gebra" and confiscated his other weapons of Math Instruction.</PUNCHLINE> </JOKE> <JOKE> <QUESTION>What's another name for the Intel sticker they put on computers?</QUESTION> <PUNCHLINE>A Warning Label</PUNCHLINE> </JOKE> <JOKE> <QUESTION>Did you hear about Adolph, the brown-nosed reindeer?</QUESTION> <PUNCHLINE>He could run as fast as Rudolph, he just couldn't stop as fast...</PUNCHLINE> </JOKE> <JOKE> <QUESTION>Knock Knock...who's there? Monica...Monica who?</QUESTION> <PUNCHLINE>A:Good job, Mr. President, just like we practiced....</PUNCHLINE> </JOKE> <JOKE> <QUESTION>How are politicians like diapers?</QUESTION> <PUNCHLINE>They should both be changed regularly, and for the same reason.</PUNCHLINE> </JOKE> <JOKE> <QUESTION>Did you hear Richard Simmons had plastic surgery to get his love handles removed?</QUESTION> <PUNCHLINE>Yeah...now he has no ears.</PUNCHLINE> </JOKE> <JOKE> <QUESTION>What is the best way to remember your wife's birthday?</QUESTION> <PUNCHLINE>Forget it once.</PUNCHLINE> </JOKE> <JOKE> <QUESTION>There's a new variety of Viagra on the market called Super Viagra?</QUESTION> <PUNCHLINE>You can get a hard-on even with your wife.</PUNCHLINE> </JOKE> <JOKE> <QUESTION>Did you hear that they raised the minimum drinking age in West Virginia to thirty-two?</QUESTION> <PUNCHLINE>They want to keep alcohol out of the high schools.</PUNCHLINE> </JOKE> <JOKE> <QUESTION>What's O. J. Simpson's Internet address?</QUESTION> <PUNCHLINE>Slash, slash, backslash, slash, slash, escape.</PUNCHLINE> </JOKE> <JOKE> <QUESTION>What does Microsoft and a halter top have in common?</QUESTION> <PUNCHLINE>Both offer very little support.</PUNCHLINE> </JOKE> <JOKE> <QUESTION>Did you hear about the new Mike Tyson Computer?</QUESTION> <PUNCHLINE>It has two bytes and no memory.</PUNCHLINE> </JOKE> <JOKE> <QUESTION>What is the difference between a lawyer and a sperm cell?</QUESTION> <PUNCHLINE>The sperm cell has one in a millon chance of becoming a human being</PUNCHLINE> </JOKE> <JOKE> <QUESTION>What is the german word for brassierre?</QUESTION> <PUNCHLINE>It's called "Stoppenzumfromfloppen.".</PUNCHLINE> </JOKE> <JOKE> <QUESTION>How do you know if a blonde has been sending e-mail?</QUESTION> <PUNCHLINE>There's a bunch of envelopes stuffed into her disk drive.</PUNCHLINE> </JOKE> </JOKES>

Further additional information
Below are the contents of the CSS document: ---------------------------------------------------- JOKE { COLOR: red; DISPLAY: block; FONT-FAMILY: 'Arial Black', Arial; WHITE-SPACE: pre } COLLECTOR { COLOR: blue; DISPLAY: block; FONT-FAMILY: Arial; FONT-SIZE: 10pt; FONT-WEIGHT: bold; MARGIN-BOTTOM: 10px } PUNCHLINE { COLOR: black; DISPLAY: block; FONT-FAMILY: Arial; LINE-HEIGHT: normal; MARGIN-BOTTOM: 10px; TEXT-ALIGN: left } QUESTION { COLOR: red; DISPLAY: block; FONT-FAMILY: Arial; FONT-SIZE: larger; FONT-VARIANT: normal } TITLE { COLOR: black; DISPLAY: block; FONT-FAMILY: 'Arial Black'; FONT-SIZE: 14pt } CATEGORY { FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-VARIANT: small-caps; TEXT-TRANSFORM: uppercase }

Rate this article on a scale of 1 to 10 (1 votes, average 10)

Your vote :

<< BizTalk


Leave a comment for this article
Your name
Your email (optional)
Your comment
Optional: Upload an attachment
Enter the code shown:



	Recent Jobs Sr. Software Engineer - Analytics Immediate Mainframe openings for Chennai Immediate TANDEM-TAL openings for Chenna Immediate ASP.NET/C# Openings for Chandi Sr. Software Engineer View all Jobs (Add yours) View all CV (Add yours)

	teleconferencing service water softener Teleconference Host Department NOLIMIT Web Hosting MSN sunglasses spoc

	Partners Dream.In.Code dotNet Slackers dotNet Spider Your HTML Source VisualBuilder.com DevGuru Planet Source Code ZVON.ORG Web Design ASPAlliance XML Pitstop Scripts The Spot 4 SAP Bitshop Web Hosting

Email TopXML