Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

XML with CSS Formatting

7:15 pm on Jun 17, 2007 (gmt 0)

New User

10+ Year Member

joined:June 17, 2007
votes: 0

Hi All

I am new to this forum and need some urgent help. In fact, any help would be greatly appreciated!

I am doing a university degree and this is part of my current assignment on XML formatting using CSS.

It has baffled me for the past week and having Googled, asked around ..etc I have a major problem in that no one seems to like the idea of using CSS with XML. Couple that with lack of any detailed websites on using CSS with XML.

Having asked some guys at work they seem more interested in XSLT than CSS but I still need to do this assignment or else ...

Basically, I am given a simple XML file (sample-request2.txt - see end of email) and we are asked to format it according to the SUMMARY DISPLAY and FULL DISPLAY layouts according to the specification (See section Format Layout.html below)

My biggest problem is how to specify the CSS attributes for the following attributes:

customer-reference, customer-name and request-reference

I have tried doing the following:

<code>product-availability-request.customer-reference {


<code>product-availability-request[customer-reference] {


In fact when I did the following CSS :

<code>/* This .CSS file is used with sample-request2.xml file */

product-availability-request {
display: block;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 12pt;
background-color: white;
color: blue;

product-availability-request[customer-reference] {
color: red;

All I get is the following :

15/12/2006 17/12/2006 UK Essex SS15 6EE Technical Centre, Laindon, SS15 6EE Special order for alloy wheels to go on new RS model under development 100 17" RSR Shadow Chrome 17" Hybrid Shadow Chrome 15" Hybrid Shadow Chrome 300.00 200.00

Which as you can see does not include the contents of the 3 attributes that I've mentioned (customer-reference, customer-name and request-reference).

This is meant to be a simple CSS formatting but so far I have not even begun the race!

As I said, ANY help (references to other websites, forums ..etc) would be greatly appreciated.

Kind Regards



<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="request-summary.css"?>
<product-availability-request customer-reference="RDD" customer-name="Sports Development" request-reference="RS/2005/172">
<post-code>SS15 6EE</post-code>
<address>Technical Centre, Laindon, SS15 6EE</address>
<description>Special order for alloy wheels to go on new RS model under development</description>
<product-preference type="preferred">
<product ref="7017RSRSC" img="7017rsrsc.jpg">17" RSR Shadow Chrome</product>
<product-preference type="not">
<product ref="7017HYBRID">17" Hybrid Shadow Chrome</product>
<product ref="6515HYBRID"> 15" Hybrid Shadow Chrome</product>
<price-preference type="max">
<price currency="GBP">300.00</price>
<price-preference type="min">
<price currency="GBP">200.00</price>

Format Layout.html

This assessment is based on product availability information that Ms. Y might use within her business. Two client briefs are provided below that outline how Ms. Y would like to see data displayed. A sample availability request for use in this assignment is available on StudyNet in the file sample-request.xml.
Client Brief - Summary Display
Ms Y. would like to provide a minimal display of requests for information (RFIs) on product availability for use in listings or by stock pickers in warehouses via their mobile phones, PDAs or other small screen devices. Given screen display (and/or bandwidth) may be limited, the following subset of available information should be shown for each product availability . The information should be laid out with the borders shown below. The data descriptions in square brackets should be replaced with the relevant data from the sample RFI contained in the sample-request.xml file.

RFI - #[request-reference] - for [customer-name] ([customer-reference])
Delivery Period: start: [start-date] end: [end-date]
Delivery Location: [country] - [code]
[list of product information including the following for each product:
[preference-type] - [product ref] ([product name])

Price ([currency]): [price-preference type] [price]

The fonts should be a sans-serif font such as Arial or Helvetica, and the template above is an approximate indication of relative size and style. Where a request contains more than one price preference then they should both be shown on the same line, e.g. min 100 max 125.
Client Brief - Full Display
Ms. Y would also like to provide a more detailed description of product availability requests as shown below. This includes product pictures (for verifying the correct product codes have been used) and a description of the use for the product.

RFI: for [customer-name] ([customer-reference])
Delivery: Location [code] - [state, country]
Date [start-date] to [end-date]

Product Specification
Quantity: [quantity]
Price ([currency]): [price-preference type] [price]
[list of product information including the following for each product:
[image "NOT"] [product ref] ( [product name] )

Restrictions on products and prices should be highlighted as follows. Maximum prices should be shown in bold red text. Minimum price requirements (i.e. where price-preference type="min") should be shown in underlined, italic blue text.

The image for each desired product (i.e. where product-preference type="preferred" or "only") should be included as shown above. For product exclusions (i.e. where product-preference type="not"), the text "NOT" should be included instead as red, bold text.

Assessment 2.3 Sample Data
The following data should be used in task 2 of Assessment 2.3 to test the form you have created in task 1.

SS15 6EE

7:39 pm on June 17, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 21, 2005
votes: 0

Well, whenever you use XHTML with the "Coding to Standards" approach, you are using XML with CSS. XHTML is a flavor of XML.

I do this stuff all the time, but I always render the XML as a variant the browser can understand (either XHTML, or browser-rendered XSLT that creates XHTML).

CSS is worthless unless you have a rendering engine that can understand it (browsers and webkits).

For JavaScript and CSS, which are not XHTML, I generally use <![CDATA[...]]> [w3schools.com] sections.

Maybe this is what you are looking for?