CSS Style and Xslt

How to utilise both CSS and XSLT together on XML?

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

Remove the <?xml-stylesheet type="text/css" href="ofd.css"?> from the XML
Remove the rogue <xsl:stylesheet type="text/css" href="ofd.css"> from the XSLT (as your XSLT would not be well-formed otherwise).
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>

Use XSLT variable in external css stylesheet

If you want to use variables in CSS files you should take a look at CSS preprocessors like Sass.

With this kind of tools you can maintain "dynamic CSS templates" and generate static CSS files out of it.

Then you can simply assign static style-names to elements in your XSL code.

XSLT: How to test css styles?

Making my comment become an answer.

If I understand you correctly you want to run the XSLT and then get a list of changes that were applied, right? I'm fairly new to XSLT but I don't think that you will find a feature like this as part of XSL. However, you can always take the original file and the transformed one and perform a diff using any of the available diff tools. If your XSLT is part of a larger workflow it should be fairly easy to automate this.

If on the other hand you want a unit test, check out XSpec.

connecting xslt to external css

Use a link element in the head, same as you would if you wrote the HTML by hand:

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

If you need to insert it into the HTML output (and you're using XSLT 2.0):

<style>
  <xsl:value-of select="unparsed-text('table_style.css')"
                disable-output-escaping="yes"/>
</style>

See http://www.w3.org/TR/xslt20/#unparsed-text

Preprocess XSL Stylesheet - include external documents

Processing xsl:include the way you are doing it isn't correct acccording to the XSLT specification, for a number of reasons: the copied instructions will have in-scope namespaces different from the original, they will have different values for controlling attributes such as version and exclude-result-prefixes, etc.

Handling xsl:import this way is even more challenging, because of the need to respect import precedence. Basically, there are things you can do in a multi-module stylesheet that can't be done in a single-module stylesheet.

As for calls on document(), to find the calls accurately you will need to parse all the XPath expressions. If the argument to document() is a string literal, then in most cases it should be possible to generate a global variable containing the content of the referenced document, and replace the call on document() by a reference to the variable. (But take care with base URIs).

You haven't actually said what you're trying to achieve by transforming your stylesheets in this way. It's a lot of effort, and I can't see what it accomplishes.