XML with CSS – Presentation of a simple page

After writing some articles about XAML, I have decided to go a little deeper in XML. Actually going deeper into XML is quite a challenge, due to the fact that XML is considered a meta-language and thus it is quite simple with straight forward logic. Thus, I have decided to present a simple XML example, with the usage of CSS. So, I need 2 files – a XML file and a CSS file. In the XML file I put the data, within tabs as I would like it to be structured. In the CSS file I put information about how it should look like. So, this is the XML file:

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet href="VitoshEducation.css" type="text/css"?>

<universities>
	<university>
	   <name>Univesity of Groningen</name>
	   <country>Netherlands</country>
	   <degree>Master</degree>
	   <major>Business Administration - Supply Chain and Operations</major>
	   <years>2</years>
	</university> 

	<university>
	   <name>Univesity of Sofia</name>
	   <country>Bulgaria</country>
	   <degree>Master</degree>
	   <major>Business Administration - Strategic Management</major>
	   <years>2.5</years>
	</university> 

	<university>
	   <name>Univesity of Sofia</name>
	   <country>Bulgaria</country>
	   <degree>Bachelor</degree>
	   <major>Greek Philology</major>
	   <years>4</years>
	</university> 

	<university>
	   <name>Univesity of Sofia</name>
	   <country>Bulgaria</country>
	   <degree>Specialist</degree>
	   <major>Company Management</major>
	   <years>2</years>
	</university> 
</universities>

As you notice, we have four universities. In order to present it in XML, I have put the information for each university between tags <university></university>. The four universities are put between tags <universities></universities>.  The good thing about XML is that you understand the idea of the content really quickly, if the format is done correctly. Thus, you need just a quick look to understand the essence of the code and what does it present. A quick note – on the second line, you notice immediately that this file uses something from a file, named “VitoshEducation.css”. What does it use? It takes information about the styles from this file. This is the CSS file content:

{ font-family:Verdana,Tahoma, sans-serif; font-size:1em; }
universities { display:block; margin:20px; }
universities:before { display:block; content:"The Universities of Vitosh"; font-size:1.2em; text-decoration:underline; }
universities:after { display:block; content:"www.vitoshacademy.com"; font-style:italic; margin-top:15px;}
university *:before { display:inline; font-weight:bold; font-size:0.8em; }
name:before { content:"Name: "; }
country:before { content:"Country: "; }
degree:before { content:"Degree: "; }
major:before { content:"Major: "; }
years:before { content:"Duration: "; }
university { 
	display:list-item; 
	border-bottom:solid 2px gray; 
	margin-top:15px;
	margin-left:25px;
	list-style-type:decimal;
	}
name, country, degree, major, years { display:block; }

What does it do? It simply tells the browser what to do, when it sees some of the XML elements. Thus, Whenever it sees “major” tag, the browser writes “Major: ” as in the file. At the closing of the tag <universities></universities> it writes “www.vitoshacademy.com” in italic. This is achieved through on line 4.

Here is how the XML file looks at your browser.

Enjoy the code!