adding style via CSS to XML documents

crmpicco · November 22nd, 2006, 08:44 AM

I have been looking at ways to add style to my XML document, i came across http://www.w3.org/Style/styling-XML and tried doing what he says: This is my xml document 'employees.xml'

Code:

<?xml version='1.0'?>
<?xml-stylesheet href="common.css" type="text/css"?>
<?xml-stylesheet href="modern.css" title="modern" media="screen" type="text/css"?>
<?xml-stylesheet href="classic.css" alternate="yes" title="classic" media="screen, print" type="text/css"?> 
<staff>
  <employee>
    <age>
      <dob>10-02-1967</dob>
    </age>
    <department>
      <departmentname>Operations</departmentname>
      <title>Manager</title>
    </department>
    <location>
      <town>
        <county>East Ayrshire</county>
        <name>Auchinleck</name>
      </town>
    </location>
    <name>
      <forename>John</forename>
      <surname>Doe</surname>
    </name>
    <************>M</************>
  </employee>
  <employee>
    <age>
      <dob>05-03-1982</dob>
    </age>
    <department>
      <departmentname>Internet</departmentname>
      <title>Developer</title>
    </department>
    <location>
      <town>
        <county>South Ayrshire</county>
        <name>Ochiltree</name>
      </town>
    </location>
    <name>
      <forename>Craig R.</forename>
      <surname>Morton</surname>
    </name>
    <************>M</************>
  </employee>
  <employee>
    <age>
      <dob>15-10-1981</dob>
    </age>
    <department>
      <departmentname>Internet</departmentname>
      <title>Developer</title>
    </department>
    <location>
      <town>
        <county>North Ayrshire</county>
        <name>Kilmarnock</name>
      </town>
    </location>
    <name>
      <forename>Alan</forename>
      <surname>McCann Jr</surname>
    </name>
    <************>M</************>
  </employee>
  <employee>
    <age>
      <dob>10-05-1972</dob>
    </age>
    <department>
      <departmentname>Management</departmentname>
      <title>Manager</title>
    </department>
    <location>
      <town>
        <county>Cumbria</county>
        <name>Ambleside</name>
      </town>
    </location>
    <name>
      <forename>Bill</forename>
      <surname>Brown</surname>
    </name>
    <************>M</************>
  </employee>
</staff>

modern.css

Code:

ARTICLE { font-family: sans-serif; background: white; color: black }
AUTHOR { margin: 1em; color: red }
HEADLINE { text-align: right; margin-bottom: 2em }
PARA { line-height: 1.5; margin-left: 15% }
INSTRUMENT { color: blue }

classic.css

Code:

ARTICLE { font-family: serif; background: white; color: #003 }
AUTHOR { font-size: large; margin: 1em 0 }
HEADLINE { font-size: x-large; margin-bottom: 1em }
PARA { text-indent: 1em; text-align: justify }
INSTRUMENT { font-style: italic }

common.css

Code:

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

however, there seem no styling at all on the document as when i open it with FF it all runs in a line....

any ideas?

www.crmpicco.co.uk
www.ie7.com

bonekrusher · November 30th, 2006, 08:47 AM

Have you ever tried XSLT? Its much better than CSS. Check out the Forum.

bonekrusher · November 30th, 2006, 08:48 AM

I think you can only declare one stylesheet at the top of you XML file.

crmpicco · December 1st, 2006, 11:50 AM

thanks for the tip-off. i tried this setup.
try it yourself...
piccoxml.xml (my XML file i want styled)

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="picco.xsl"?>
<breakfast_menu>
    <food>
        <name>Belgian Waffles</name>
        <price>8.95</price>
        <description>two of our famous Belgian Waffles with plenty of real maple syrup</description>
        <calories>650</calories>
        <currency>USD</currency>
    </food>
    <food>
        <name>Strawberry Belgian Waffles</name>
        <price>5.95</price>
        <description>light Belgian waffles covered with strawberries and whipped cream</description>
        <calories>900</calories>
        <currency>GBP</currency>
    </food>

    <food>
        <name>Berry-Berry Belgian Waffles</name>
        <price>16.95</price>
        <description>light Belgian waffles covered with an assortment of fresh berries and whipped cream</description>
        <calories>900</calories>
        <currency>AUD</currency>
    </food>
    <food>

        <name>French Toast</name>
        <price>114.50</price>
        <description>thick slices made from our homemade sourdough bread</description>
        <calories>600</calories>
        <currency>JPY</currency>
    </food>
    <food>
        <name>Homestyle Breakfast</name>
        <price>16.95</price>
        <description>two eggs, bacon or sausage, toast, and our ever-popular hash browns</description>
        <calories>950</calories>
        <currency>CAN</currency>
    </food>
</breakfast_menu>

piccostyle.xsl (my XSL file)

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
    <body style="font-family: Verdana, Arial, Helvetica; font-size:12pt; background-color: #EEEEEE">
        <xsl:for-each select="breakfast_menu/food">
            <div style="background-color:teal;color:white;padding:4px">
                <span style="font-weight: bold; color: white">
                    <xsl:value-of select="name"/>
                </span>
                - <xsl:value-of select="price"/>
                <span style="font-weight: italic; color: #FFFFFF;">
                    (<xsl:value-of select="currency" />)
                </span>
            </div>
            <div style="margin-left:20px;margin-bottom:1em;font-size:10pt">
                    <xsl:value-of select="description"/>
                    <span style="font-style:italic">
                    (<xsl:value-of select="calories"/> calories per serving)
                    </span>
              </div>
        </xsl:for-each>
    </body>
</html>

www.crmpicco.co.uk
www.ie7.com