SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Styling the XML document... Questions

    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

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    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>
    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.

    Hope you can make some sense of it.

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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:
    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>
    CSS file:
    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;
    }
    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.

  4. #4
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks guys, I will give it a go

  5. #5
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by someonewhois
    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

  7. #7
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, for sure.

  8. #8
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  9. #9
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    It's working for me in Firefox.

  10. #10
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works for me in FF and IE.

  11. #11
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the stylesheet i have linked has a font-family Verdana,Arial,Geneva,Helvetica,sans-serif

    But this is not showing, does anyone know why?

  12. #12
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  13. #13
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have changed VoucherInfo to th in the css file, but it still does not pick it up, why is this?

  14. #14
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you moved the CSS inclusion into the XSL file?

  15. #15
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  16. #16
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  17. #17
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay thanks for the help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •