Introduction to XML

| HOME | SYLLABUS | CALENDAR AND EXERCISES |

Practice 3: Using CSS with XML

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?

Practice 3b: CSS for XML

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.

| HOME | SYLLABUS | CALENDAR AND EXERCISES |

Created by: Jaana Holvikivi
Updated: 24.3.2015