Next:
Web Page Design
Up:
Lecture 8
Previous:
XHTML
XML and CSS
The
CSS2
style sheet pres.css
card { display: block; background-color: red; border: solid black }
name { display: block; font-size: 20pt; margin-left: 0 }
title { display: block; margin-left: 20pt }
email { display: block; font-family: Courier; margin-left: 20pt }
phone { display: block; margin-left: 20pt }
can format the
XML page
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="pres.css"?>
<!-- John Doe's contact details -->
<body>
<card>
<name>John Doe</name>
<title>CEO, Widget Inc.</title>
<email>john.doe@widget.com</email>
<phone>(202) 555-1414</phone>
</card>
</body>
Slightly altered CSS pres1.css
.card { display: block; background-color: red; border: solid black }
.name { display: block; font-size: 20pt; margin-left: 0 }
.title { display: block; margin-left: 20pt }
.email { display: block; font-family: Courier; margin-left: 20pt }
.phone { display: block; margin-left: 20pt }
can be used in a similar
HTML page
to get same effect
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="pres1.css">
<title> John Doe's contact details </title>
</head>
<body>
<span class="card">
<span class="name">John Doe</span>
<span class="title">CEO, Widget Inc.</span>
<span class="email">john.doe@widget.com</span>
<span class="phone">(202) 555-1414</span>
</span>
</body>
</html>
