Create the following file
<?xml version='1.0' encoding='UTF-8' standalone='yes'?>
<document>
<body>
<warning>This is a warning.</warning> Other messages are <tip> small tips </tip> and additional <resource> resources.</resource>
</body>
</document>
Create a style sheet pract3a.css using the model below as your starting point:
tip {margin-left:1.5cm;width:250px;border:solid 3px
black;position:relative; background-color:yellow;}
resource {margin-left:1.5cm;width:250px;border:solid 3px
black;position:relative; background-color:green;}
warning {margin-left:1.5cm;width:250px;border:solid 3px
black;position:relative; background-color:red;}
You need to add the style
reference as line 2 to the XML file:
<?xml-stylesheet
type="text/css" href="pract3a.css"?>
Save and test with browsers. Then, you can try to create another file pract3a2.css where the common style rules are given only once. How does it change when you add {display : block} to the style?
Take one of your earlier XML files. Create a style sheet for it, so that it looks neat in a browser. See what can be achieved using CSS, and note that there are severe restrictions.
The example below may also help in page layout There is an internal style that has name "internalstyles", and a style is defined for elements document, heading, etc. The sidebar element adds a separate box .
<!--
<style id =”internalstyles”>
style {display : none}
document {display : block}
heading {display : block; font-size:24pt;}
p {display : block; font-family: Arial; position:relative;}
sidebar {display : block; float: right; width:250px;border:inset 3pt; background-color:#C0C0FF;padding:3px; }
sidebar heading{display : block; font-size: 18pt;}
sidebar p{display:block; font-size: 10pt;}
</style>
-->
|
Created by: Jaana Holvikivi Updated: 26.1.2010 |