Display XML CSS

You can use a CSS file to indicate how I view the XML data elements.

Syntax to incorporate a CSS to an XML file

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

Example XML with CSS

<?xml version="1.0" encoding="UTF-8" ?> <?xml-stylesheet type="text/css" href="message.css"?> <messages>     <message>         <from>James</from>         <to>Peter</to>         <title>Meeting</title>         <text>Remember our meeting</text>     </message>     <message>         <from>John</from>         <to>Smith</to>         <title>Report</title>         <text>Create sales report</text>     </message> </messages>

Now we have to define the CSS file "message.css" where we indicate how to display XML data file before

messages {   background-color: #ffffff; width: 100%; } message {   display: block; margin-bottom: 30pt; margin-left: 0; } from {   display: block; color: #FF0000; font-size: 20pt; } to {   display: block; color: #0000FF; font-size: 20pt; } title,text {   display: block; color: #000000; margin-left: 20pt; }

The result of our example XML view this CSS in a web browser:

xml browser