CODEWITHSUNDEEP
cssxmlxslt
Brett Morris
Brett Morris

Reputation: 13

How to use CSS in XML and XSL

I am trying to use XML, XSL, and CSS all at once for a school assignment and I cannot find a good answer online. I have linked my xml file to my CSS file and it doesn't seem to read it. I tried it in the XSL file as well to no positive results. I'm just trying to apply CSS classes and properties to my XML file. Thank you in advance for help, I've been trying for hours and cannot find my error.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="test.xsl"?>
<?xml-stylesheet type="text/css" href="cdList.css"?>

<catalog>
    <cd>
        <artist>The Briefs</artist>
        <country>USA</country>
        <albums>
            <album>
                <name>Hit After Hit</name>
                <year>2002</year>
                <songs>
                    <song>Poor And Weird</song>
                    <song>I'm A Raccoon</song>
                    <song>Sylvia</song>
                    <song>Where Did He Go?</song>
                </songs>
            </album>
            <album>
                <name>Off The Charts</name>
                <year>2004</year>
                <songs>
                    <song>Ain't It The Truth</song>
                    <song>Tear It In Two</song>
                    <song>We Americans</song>
                    <song>Ouch Ouch Ouch</song>
                </songs>
            </album>    
        </albums>
    </cd>
    <cd>
        <artist>Dethklok</artist>
        <country>USA</country>
        <albums>
            <album>
                <name>The Deth Album</name>
                <year>2007</year>
                <songs>
                    <song>Go Into The Water</song>
                    <song>Awaken</song>
                    <song>Bloodrocuted</song>
                    <song>Go Forth And Die</song>
                    <song>Fansong</song>
                    <song>Better Metal Snake</song>
                    <song>The Lost Vikings</song>
                    <song>Thunderhorse</song>
                    <song>Birthday Dethday</song>
                    <song>Hatredcopter</song>
                    <song>Castratikron</song>
                    <song>Face Fisted</song>
                    <song>Dethharmonic</song>
                </songs>
            </album>
            <album>
                <name>Dethalbum II</name>
                <year>2009</year>
                <songs>
                    <song>Bloodlines</song>
                    <song>The Gears</song>
                    <song>Burn The Earth</song>
                    <song>Laser Cannon Deth Sentence</song>
                    <song>Black Fire Upon Us</song>
                    <song>Dethsupport</song>
                    <song>The Cyborg Slayers</song>
                    <song>I Tamper With Evidence</song>
                    <song>Murmaider II: The Water God</song>
                    <song>Comet Song</song>
                    <song>Symmetry</song>
                    <song>Volcano</song>
                </songs>
            </album>
            <album>
                <name>Dethalbum III</name>
                <year>2011</year>
                <songs>
                    <song>Crush The Industry</song>
                    <song>Andromeda</song>
                    <song>The Galaxy</song>
                    <song>Starved</song>
                    <song>Killstardo Abominate</song>
                    <song>Ghostqueen</song>
                    <song>Biological Warfare</song>
                    <song>Skyhunter</song>
                    <song>The Hammer</song>
                    <song>Rejoin</song>
                </songs>
            </album>
        </albums>
    </cd>
</catalog>

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"         xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
  <body>
  <h2>Britts Cd Collection</h2>
    <table border="1">
      <tr>
        <th style="text-align:left">Artist</th>
        <th style="text-align:left">Country</th>
        <th style="text-align:left">Year</th>
        <th style="text-align:left">Album name</th>
        <th style="text-align:left">Song List</th>
      </tr>
      <xsl:for-each select="catalog/cd">
      <tr>
        <td><xsl:value-of select="artist"/></td>
        <td><xsl:value-of select="country"/></td>
        <xsl:for-each select="albums/album">
            <tr>
                <td colspan="2"></td>
                <td><xsl:value-of select="year" /></td>
            <td><xsl:value-of select="name" /></td>
            <xsl:for-each select="songs/song">
            <tr>
              <td colspan="4"></td>
              <td><xsl:value-of select="." /></td>
            </tr>
          </xsl:for-each>
          </tr>
        </xsl:for-each>
      </tr>
      </xsl:for-each>
    </table>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

cd {

    display: block;

}

artist {

    background-color: yellow;
    border: 2px solid green;
    display: block;
    margin-bottom: 10px;

}

country {

    background-color: yellow;
    border: 2px solid green;
    display: block;
    margin-bottom: 10px;

}

albums {

    display: block;

}

album {

    display: block;

}

name {

    display: block;

}

year {

    display: block;

}

songs {

    display: block;

}

song {

    display: block;

}

.test {
    background-color: yellow;
    border: 2px solid green;
    display: block;
    margin-bottom: 10px;

}

Upvotes: 0

Views: 2489

Answers (1)

michael.hor257k
michael.hor257k

Reputation: 117175

There are two ways to apply CSS to XM. Unfortunately, you are attempting a mixture of the two and that cannot work.

Your CSS stylesheet is obviously designed to be applied directly to your XML: it contains selectors for cd, artist, country, etc. - these are all elements in your XML. These elements are not present in the result of the XSL transformation, that transforms your XML to an HTML document containing (mostly) a table. To style the table, you need selectors for the table's elements, such as tr and td.

If you remove the link to the XSLT stylesheet and keep only the link to the CSS styleheet, like this:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="cdList.css"?>
<catalog>
    <cd>
    ...

then you can display the XML file directly in a browser and have it styled by the linked CSS.

If, OTOH, you want to transform the XML to HTML first, then you need to:

  1. Keep only the other link, the one to the XSLT stylesheet.

  2. Next, you need to modify the XSLT stylesheet so that the resulting HTML includes a link to a CSS stylesheet. You do this by inserting:

    <head> <link rel="stylesheet" type="text/css" href="mynewcss.css"/> </head>

    into the <html> tag, before the <body> element.

  3. Finally, you need to write the mynewcss.css stylesheet, and make it style the elements in the result of the XSLT transformation, not the source XML.

Upvotes: 1

Related Questions