CODEWITHSUNDEEP
htmlcssxmlxslt
Braden
Braden

Reputation: 5

How to utilise both CSS and XSLT together on XML?

I am trying to utilise my CSS stylesheet with my XML that also has a XSLT stylesheet attached, this causes it to go completely out of its formatting once the CSS is attached into a massive clump.

Linking the CSS stylesheet and playing around with its styles in the chat to get it to format.

XML 

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


   <cuisines>
       <cuisinetype>
        <cuisine>Greek</cuisine>
            <name>Food from Zeus</name>
            <address>96 Almighty Road</address>
            <phone>02 2321 5592</phone>
            <deliveryfee>Delivery fee is $7</deliveryfee>
            <URL>https://zeusfoods.com.au/</URL>
            <takeaway>Yes</takeaway>
            <dinein>Yes</dinein>
            <openhours>9-5 Mon-Sat,Sunday Closed</openhours>
            <description>Food created by us, that even the almighty would 
            die for.</description>       
      </cuisinetype>
    </cuisines>

XSLT

   <?xml version="1.0" encoding="UTF-8"?>
   <xsl:stylesheet version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   <xsl:output method="html"/>
   <xsl:stylesheet type="text/css" href="ofd.css">

   <xsl:template match="/">
   <html>
   <body>
   <h1>Cuisine Restaurants</h1>  
   <xsl:apply-templates/>  
   </body>
   </html>
   </xsl:template>

   <xsl:template match="cuisinetype">
   <xsl:for-each select="cuisines/cuisinetype">
       <xsl:sort select="name"/>
   </xsl:for-each>
        <p>
        <xsl:apply-templates select="cuisine"/>
            <xsl:apply-templates select="name"/>  
            <xsl:apply-templates select="address"/>
            <xsl:apply-templates select="phone"/>
            <xsl:apply-templates select="deliveryfee"/>
            <xsl:apply-templates select="URL"/>
            <xsl:apply-templates select="takeaway"/>
            <xsl:apply-templates select="dinein"/>
            <xsl:apply-templates select="openhours"/>
            <xsl:apply-templates select="description"/>
        </p>
     </xsl:template>

    <xsl:template match="cuisine">
    Cuisine type: <span style="">
    <xsl:value-of select="."/></span>
    <br />
  </xsl:template>


 </xsl:stylesheet>   


CSS

here is the css, this is what is like overriding the xslt,

  body {
    background-color: lightpink;
}

h1 {
    color: black;
    text-shadow: 3px 2px grey;
    font-size: 60px;
    text-align: center;
}

h2 {
    color: black;
    margin-left: 20px;
    text-decoration: underline;
    text-transform: uppercase;
    text-align: center;
    font-size: 35px;
    text-shadow: 2px 1px grey;
}

h3 {
    color: black;
    font-size: 25px
}

h4 {
    color: black;
    margin-left: 20px;
    margin-right: 20px;
    font-family: "Times New Roman", Times, serif;
    text-align: center;
}

body {
    background-image: url("Graphics/background2.jpg");
}

#para1 {
    text-align: center;
    color: red;
}

.lightgrey {
    background-color: lightgrey;
}

.padding {
    border: 3px solid black;
    padding: 1px 125px 1px 125px;
    background-color: grey;
}

.footer {
    border: 3px solid black;
    padding: 1px 125px 1px 125px;
    background-color: grey;
}

div.picture {
    border: 2px solid #000000;
    width: 600px;
    height: 4oopx
}

div.picture:hover {
    border: 2px solid #000000;
}

div.picture img {
    width: 100%;
    height: auto;
}

div.imagedescription {
    padding: 2px;
    text-align: centre;
    background-color: lightgrey;
}

.site-info::after {
    content: "Copyright Hisham Echafaki 2017 - All Rights Reserved ";
}

.parastyle1 {
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    font-size: 28px;
    font-weight: bold;
}

.parastyle2 {
    font-family: Arial, Helvetica, sans-serif;
    color: black;
    font-size: 20px;
    font-weight: bold;
}

.box {
    position: relative;
}

.yeet_time {
    position: absolute;
    bottom: 0;
    right: 0;
}

p {
    margin-left: 150px;
    margin-right: 150px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: black;
    font-weight: bold;
}

pw {
    margin-left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
    color: white;
    font-weight: bold;
}

pw2 {
    margin-left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: white;
    font-weight: bold;
}

pw3 {
    font-family: Arial;
    color: black;
    font-size: 20px;
    font-weight: bold;
    margin-left: 40px;
    margin-right: 40px;
}

pw4 {
    font-family: Arial;
    color: black;
    font-size: 20px;
    font-weight: bold;
    margin-left: 150px;
    margin-right: 0px;
}

pw5 {
    margin-left: 880px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: black;
    font-weight: bold;
}

pw6 {
    font-family: Arial;
    color: black;
    font-size: 20px;
    font-weight: bold;
    margin-left: 275px;
    margin-right: 0px;
}

a:link {
    color: blue;
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    color: aqua;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: navy;
    background-color: transparent;
    font-size: 23px;
}

a:active {
    color: fuchsia;
    background-color: transparent;
    text-decoration: underline;
}

h5 {
    color: black;
    margin-left: 40px;
    text-decoration: underline;
    text-transform: uppercase;
    text-align: left;
    font-size: 35px;
    text-shadow: 2px 1px grey;
}

a.zoom:hover {
    transform: scale(1.5);
    /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

</style> <div class="a"></div> margin1 {
    margin-left: 1cm;
}

Upvotes: 0

Views: 484

Answers (1)

Tim C
Tim C

Reputation: 70618

This was a bit too long to write in comments, but it does not make sense to link an XML to both a XSLT stylesheet and a CSS stylesheet, like you have done

<?xml-stylesheet type="text/xsl" href="cuisinexsl.xsl"?>
<?xml-stylesheet type="text/css" href="ofd.css"?>

However, in your case, you are not trying to style the XML with CSS, but the HTML you are creating with the XSLT.

In this case, you need to do the following

  1. Remove the <?xml-stylesheet type="text/css" href="ofd.css"?> from the XML
  2. Remove the rogue <xsl:stylesheet type="text/css" href="ofd.css"> from the XSLT (as your XSLT would not be well-formed otherwise).
  3. Add the line <link rel="stylesheet" type="text/css" href="ofd.css" /> to the <head> section of the HTML

For example:

<xsl:template match="/">
  <html>
    <head>
      <link rel="stylesheet" type="text/css" href="ofd.css" />
    </head>
    <body>
      <h1>Cuisine Restaurants</h1>  
      <xsl:apply-templates/>  
    </body>
  </html>
</xsl:template>

Upvotes: 2

Related Questions