How do I style my XML document. I know you use XSL, but how do you go about styling text, size, colour etc, do you do this through the XSL doc, or do you do it through an additional CSS file.?
Forgive my ignorance I am just starting to learn XML
Printable View
How do I style my XML document. I know you use XSL, but how do you go about styling text, size, colour etc, do you do this through the XSL doc, or do you do it through an additional CSS file.?
Forgive my ignorance I am just starting to learn XML
Hello
I am probably not the best person to explain XML/XSL but I wil try any way through examples.
The XML: addressbook.xml
Code:<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE addressbook SYSTEM "people.dtd">
<?xml-stylesheet type="text/xsl" href="addressbook.xsl"?>
<addressbook>
<people>
<name>Ben</name>
<number>555-5555</number>
<address>1234 Fake Street</address>
</people>
<people>
<name>John</name>
<number>555-5555</number>
<address>1234 Fake Street</address>
</people>
<people>
<name>Fred</name>
<number>555-5555</number>
<address>1234 Fake Street</address>
</people>
<people>
<name>Bob</name>
<number>555-5555</number>
<address>1234 Fake Street</address>
</people>
<people>
<name>Ted</name>
<number>555-5555</number>
<address>1234 Fake Street</address>
</people>
<people>
<name>Frank</name>
<number>555-5555</number>
<address>1234 Fake Street</address>
</people>
<people>
<name>Tim</name>
<number>555-5555</number>
<address>1234 Fake Street</address>
</people>
</addressbook>
The XSL: addressbook.xsl
I'm not completely sure that I have everthing correct but it must be close. Here is the link that led to me making that.Code:<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body style="color: #903;">
<h1 style="font: large Georgia, sans-serif;">My Address Book</h1>
<table cellpadding="1" cellspacing="20">
<tr>
<th style="border-bottom: 1px solid #333; font: medium Georgia, sans-serif; text-align: left;">Name</th>
<th style="border-bottom: 1px solid #333; font: medium Georgia, sans-serif; text-align: left;">Number</th>
<th style="border-bottom: 1px solid #333; font: medium Georgia, sans-serif; text-align: left;">Address</th>
</tr>
<xsl:for-each select="addressbook/people">
<tr>
<td style="border-bottom: 1px solid #333; font: small Tahoma, serif; font-weight: bold;"><xsl:value-of select="name"/></td>
<td style="border-bottom: 1px solid #333; font: small Tahoma, serif;"><xsl:value-of select="number"/></td>
<td style="border-bottom: 1px solid #333; font: small Tahoma, serif;"><xsl:value-of select="address"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Hope you can make some sense of it. :D
You can use XSLT like Johnny said, or you can directly style your XML elements with CSS. The approach you take depends on the results you want.
If you want markup that browsers can really understand and apply semantics to, then your best bet is using XSLT to transform it into HTML (you can add a <link /> or <style></style> element in your result HTML for additional style).
If you just want CSS to alter the look of your XML elements you can do something like this:
XML file:
CSS file:HTML Code:<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="test.css" type="text/css"?>
<people>
<person>
<name>John Smith</name>
<age>24</age>
<height>180cm</height>
<weight>100kg</height>
</person>
</people>
You have to be very explicit when styling XML though since the browsers don't have default styles for your elements. Be sure to apply every rule you need to in order to get the look you're after.Code:people {
display: block;
background-color: green;
}
person {
display: block;
margin: 0 50px;
}
name, age, weight, height {
display: block;
background-color: white;
font-size: 12px;
font-family: Georgia, Times, serif;
color: black;
}
thanks guys, I will give it a go
If you just want text formatting, CSS is easier than XSLFO. If you're going for a MUCH different look, then you might need XSL. :)
If you need to add semantics that a browser/search engine/etc can understand as well rather than just something easy to read, then XSLT is your only option. With all the arbitrary markup that can be created with XML documents, HTML/XHTML is about the only guaranteed language you'll find in wide use that has meaning attached to its elements :)Quote:
Originally Posted by someonewhois
Yeah, for sure. :)
For some reason it's not picking up the styles could you take a look
http://www.premier-resin-systems.co....ng-enquiry.xml
http://www.premier-resin-systems.co.uk/booking.xsl
http://www.premier-resin-systems.co.uk/booking.css
Thanks
This should be http://www.premier-resin-systems.co.uk/booking.xsl
It's working for me in Firefox. :confused:
Works for me in FF and IE. :)
the stylesheet i have linked has a font-family Verdana,Arial,Geneva,Helvetica,sans-serif
But this is not showing, does anyone know why?
You want to be styling the XSL output, not the input. :)
When you use XSL, you use CSS on the output of the XSL, not the XML itself. This means that you You can't use VoucherInfo. You can use body, table, th, h2, etc.., since those are tags you set in the XSL file.
You also should be including the CSS in the XSL file.
I have changed VoucherInfo to th in the css file, but it still does not pick it up, why is this?
Have you moved the CSS inclusion into the XSL file? :)
do you mean actuallt writing the css into the xsl document like this :
<style>
table{
font: 11px Verdana,Arial,Geneva,Helvetica,sans-serif;
}
h1{
font: bold 12px Verdana,Arial,Geneva,Helvetica,sans-serif;
}
</style>
No, I mean:
<link rel="stylesheet" type="text/css" media="all" href="yourfile.css" />
Inside the <head> tag of the output. Once again: You're styling the OUTPUT, not the input. :)
okay thanks for the help!