Applying CSS for Browser Display

Earlier in the chapter we have shown XML displayed in hte browser as a tree structure while the browser stated that This XML file does not appear to have any style information associated with it. The document tree is shown below. Now CSS is a friendly language, so take a look at the following:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="card1.css"?>
<card>
	<name>Niels Müller Larsen</name>
	<title>Lektor, MSc</title>
	<email>nml@eaaa.dk</email>
	<uri>deformation.org, eaaa.eu, x15.dk</uri>
	<phone>+45 7228 6317</phone>
	<logo uri="nml.png"/>
</card>
name {
	font-size: 1.5em;
	margin-top: 1.5cm;
	margin-left: .75cm;
}
title, email, phone, uri {
	margin-left: .75cm;
}
card {
	background-image: url(x1.png);
	background-repeat: no-repeat;
	background-position: right;
	background-color:white;
	border: 1px solid black;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 16px;
	height: 179px;
	width: 444px;
}
* {
	display:block;
}

See the parsed result in your browser

What do we need HTML5 for? ;)