Associating a CSS file with an XML document

In HTML, you may be used to linking to a CSS stylesheet using something like this:

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

or through Internet Explorer's @import URL() directive:

  <style type="text/css">
    @import URL(http://mysite.org/default.css); 
  </style>
					

In XML, these are replaced by processing instructions, which link the stylesheet in a similar way:

  <?xml-stylesheet href="default.css" type="text/css"?>
					

In XML, as in HTML, you can also define alternate stylesheets:

  <?xml-stylesheet alternate="yes" title="Large Print" 
	href="largeprint.css" type="text/css"?>
					
  <?xml-stylesheet alternate="yes" title="High Contrast" 
	href="hicontrast.css" type="text/css"?>
					
  <?xml-stylesheet alternate="yes" title="Print Only" 
	href="print.css" type="text/css" media="print"?>
	

If viewing the XML document through the Firefox browser, you can then choose between these stylesheets using the ViewPage StyleStylesheet-name commands. The media="print" parameter means that the "Print Only" stylesheet will be used for printing by default.

Note that the last of the alternate stylesheets above adds a media attribute, which restricts the application of the stylesheet to a particular display type, such as "print", "screen", "aural", etc.[1] CSS itself has a method for restricting rules to certain display types, with the @media rule:

  @media print {
    body { font-size: 10pt; }
  }
  @media screen {
    body { font-size: 14px; }
  }
  @media print,screen {
    body { line-height: 1.2; }
  }
  


[1] See http://www.w3.org/TR/CSS21/media.html for a full list of media types.