From WikiEducator
< VirtualMV‎ | XML
Jump to: navigation, search

Applying a CSS to an XML file


If we create an XML file as

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="sample.css"?><people>
    <comment>Trunk line stomp</comment>


We can build a CSS to style the XML file as follows:

people     /* styles for xml definitions  */ 
{ background-color: #ffffff; width: 100%; }
{ display: block; color: #FF0000; font-size: 15pt; }
{ font-size: 12pt; }
{ color: #33CC33; }
{display: block; color: #000000; font-size: 10pt; margin-left: 20pt; }

Note: The display:block style forces the next element to be on a newline.


Now if we create a container page, where we include an iFrame we can display the xml file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
	<title>Assessment 1</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<style type="text/css" media="all">@import "sample.css";</style>
Sample of XML and CSS
<div id="bodyarea">
	<iframe src="sample.xml" width=800 height=200 frameborder=0 scrolling=yes></iframe></div>

Example :Click here to run sample.html. The diagram following shows the result in Google's chrome.

XML/CSS sample)

VmvIcon References.png References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/XML/HTML+XML+CSS. (2017). In WikiEducator/VirtualMV wiki. Retrieved November 21, 2017, from    (zotero)