add style to xml document with Css

[crmpicco]

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'
<?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>
<sex>M</sex>
</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>
<sex>M</sex>
</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>
<sex>M</sex>
</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>
<sex>M</sex>
</employee>
</staff>


modern.css

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

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

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?

[Alex Vincent]

You're following the example too literally. For instance, there are no ARTICLE elements in your XML document, so the ARTICLE selector won't select anything, and that CSS rule won't apply.

It's up to you (or whomever you're working with to style the XML document) to come up with CSS which matches the document or XML language you're working with.

[crmpicco]

thanks, when i change the css to the code below, it doesnt show up as a 'tree' -
just as text, but it does colour it as specified......
how can i get it to display as a tree? (but still styled)
classic.css

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


modern.css

staff { font-family: sans-serif; background: black; color: red}
staff { margin: 1em; color: red }
staff { text-align: right; margin-bottom: 2em }
staff { line-height: 1.5; margin-left: 15% }
staff { color: yellow }


common.css

staff { display: inline }
staff, staff, staff, staff { display: block }

[rpgfan3233]

The point of styling it is so it won't look like a tree. Even using a non-existant XML stylesheet or CSS document will make Firefox render normal text rather than the tree view:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="blank.css"?>
<example>
<emptyelement/>
</example>


Something as simple as that will make the tree view in Firefox go away. I'm not sure about how Internet Explorer would behave though.

[crmpicco]

I decieded to look into XSL, and tried this out:
crm.xml

<?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>


picco.xsl

<?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>

Worked great.
Picco