Connect an External Stylesheet to XML

Introduction

In this short how to, I will demonstrate how to connect an external stylesheet to your XML. First I will show what the XML code looks like, this will call in the stylesheet. Next I will show you a sample of the CSS file.

Using the code

First we we need to create the XML file, below is a sample:

<?xml version=”1.0? encoding=”ISO-8859-1??>
<car>
<vauxhall>
<model>corsa
<engine>1.0</engine>
<colour>red</colour>
</model></vauxhall>
</car>

Next, we will create the CSS file, below is a sample, the file is called mycssfile.css.

/****************** mycssfile.css **************/

@charset “utf-8?;
/* CSS Document */
car,vauxhall
{
font-family:”arial, helevtica;
}
model
{
display:block;
font-size:18px;
color:#C69;
}
engine,colour
{
display:block;
}

Notice that the following line of code in your XML file is used to call the stylesheet.

The XML was created and validated using Liquid XML Editor.