Applying styles to XSLT fragments

When you create an entire XSLT page (that is, an XSLT page that contains <body> and <head> tags), you can display XML data on the page and then format the data like any other piece of content using the Property inspector or the CSS Styles panel. When you create an XSLT fragment for insertion in a dynamic page, however (for example, a fragment for insertion in an ASP, PHP, or Cold Fusion page), the rendering of styles in the fragment and in the dynamic page becomes more complicated. Although you work on an XSLT fragment separately from the dynamic page, it is important to remember that the fragment is intended for use within the dynamic page, and that the output from the XSLT fragment ultimately resides somewhere within the <body> tags of the dynamic page. Given this workflow, it is important to make sure that you do not include <head> elements (such as style definitions or links to external style sheets) in XSLT fragments. Doing so will cause the application server to place these elements into the <body> of the dynamic page, thereby generating invalid markup.

For example, let’s say you’re creating an XSLT fragment for insertion in a dynamic page, and you want to format the fragment using the same external style sheet as the dynamic page. If you attach the same style sheet to the fragment, the resulting HTML page will contain a duplicate link to the style sheet (one in the <head> section of the dynamic page, and another in the <body> section of the page, where the content of the XSLT fragment appears). Instead of this approach, you should use Design-time style sheets to reference the external style sheet.

When formatting the content of XSLT fragments, Macromedia recommends that you use the following workflow:

First, attach an external style sheet to the dynamic page. (This procedure follows best practices for applying styles to the content of any web page).
Next, attach the same external style sheet to the XSLT fragment as a Design-time style sheet. As the name implies, Design-time style sheets only work in the Dreamweaver Design view. For more information, see Using Design-Time style sheets.

Once you have completed the previous steps you can apply existing styles or create new styles in your XSLT fragment using the same style sheet that you’ve attached to your dynamic page. You will have cleaner HTML output (because the reference to the style sheet is only valid while working in Dreamweaver), and the fragment will still display the appropriate styles in Design view. Additionally, all of your styles will be applied to both the fragment and the dynamic page when you view the dynamic page in Design view, or preview the dynamic page in a browser.

NOTE

If you preview the XSLT fragment in a browser, the browser does not display the styles. Instead you should preview the dynamic page in the browser to see the XSLT fragment within the context of the dynamic page.

For more information on using CSS to format XSLT fragments, see www.macromedia.com/go/dw_xsl_styles.