1. Creating an XSLT Style Sheet for Formatting Data
Tutorial 04
Creating an XSLT Style Sheet for Formatting Data

2. Contents
The CyberShoppe Problem
Solution

3. The CyberShoppe Problem
CyberShoppe needs to display product details, such as product ID, name of the product, and price per unit. The output should be displayed as shown below: In the output, all details about products should be displayed in red.

4. Solution Creating a style sheet
Applying the style sheet to the XML document
Testing

5. 1. Creating a style sheet
1.1 Creating a new XSL file 1.2 Inserting template 1.3 Using for loop to retrieve data 1.4 Sorting data 1.5 Displaying data

6. 1.1 Creating a new XSL file
Open XML Spy > New > xsl > Generic XSL/XSLT Transformation > OK

7. 1.2 Inserting template
Use the pattern “/” to perform the action from the root node.

8. 1.3 Using for loop to retrieve data

9. 1.4 Sorting data
to retrieve the attribute value

10. 1.5 Displaying data
Use tag <li> to display the list, <xsl:text> to display text, <font> to format the text color. Save it as product.xsl

11. 2. Applying the style sheet to the XML document
2.1 Creating a new XML document 2.2 Applying the XSL file to the XML file

12. 2.1 Creating a new XML document
Create a new XML document which has the following content, save it as product.xml

13. 2.2 Applying the XSL file to the XML file
Insert a xml syntax as below:

14. 3. Testing
Open the xml file with a web browser to check it again

15. References
New Perspectives on Creating Web Pages with HTML and XML (Patrick Carey & Mary Kemper) - Course Technology Publisher
Creating Cool Web Sites with HTML, XHTML and CSS - Taylor, Dave, Wiley