Normal CSS stylesheets may be used to control the display formatting of the information in an XML document. Here is a very simplified style sheet to use on our example...

<Code
  language="xml"
  text={`title, age_group ,comments {display:block;}
title {font-size:14px; color:#f00; text-decoration:underline;}`}
/>

The first line will make the contents of each element display in block formation. (it will take up the full line and put the next bit of information on the next full line).

The second line will format the information found within the **title** tags.

Saving that snippit as "example.css" we can then attach it to the XML example coding...

<Code
  language="xml"
  text={`<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="example.css"?>
   <list_of_movies>
      <movie>
         <title> Finding Nemo </title>
         <age_group> Kids </age_group>
         <comments> Fish are friends, not food. </comments>
      </movie>

      <movie>
         <title> Monty Python Holy Grail </title>
         <age_group> Adult </age_group>
         <comments> A shrubbery for the Knights who say Nee! </comments>
      </movie>

      <movie>
         <title> Harry Potter </title>
         <age_group> All </age_group>
         <comments> Very popular for all ages. </comments>
      </movie>
</list_of_movies>`}
/>

Now that there is some formatting applied to the XML page, it will actually display the data only instead of all of the raw tags.

This example wont win any great awards, but it does its job by showing the example in action :)

XSL and XSLT is used to format an XML document correctly. CSS is good for HTML coding, but XSL will take our XML document to a much higher level of formatting.

Learn about how XSLT is used to style XML.

Styling XML

Author

Table of Contents