XML/CSS Style/list
A bulleted list created using CSS
File: Data.xml
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="Style.css" ?>
<page>
<list>
<bulletPoint>Item one</bulletPoint>
<bulletPoint>Item two</bulletPoint>
<bulletPoint>Item three</bulletPoint>
<list>
<bulletPoint>Item three point one</bulletPoint>
<bulletPoint>Item three point two</bulletPoint>
</list>
<bulletPoint>Item four</bulletPoint>
</list>
</page>
File: Style.css
page {
display:block;
padding:10px;
color:#000000;
background-color:#FFFFFF;
border-style:solid;
border-width:2px;
border-color:#000000;
}
paragraph {
display:block;
font-family:arial, verdana, sans-serif;
font-size:20px;
padding:20px;
color:#000000;
background-color:#FFFFFF;
}
list {
display:block;
padding-left:20px;
}
bulletPoint {
display:block;
}
bulletPoint:before {
content:"+ ";
}
display as list
File: Data.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Style.css"?>
<recipe source="A">
<dish>A</dish>
<ingredients>
<ingredient>
<quantity>1 cup</quantity>
<component>flour</component>
</ingredient>
<ingredient>
<quantity>4 cups</quantity>
<component>Powder</component>
</ingredient>
</ingredients>
<story>
test
</story>
</recipe>
File: Style.css
recipe {
font-family: "New York", "Times New Roman", serif;
font-size: 12pt
}
dish {
display: block;
font-family: Helvetica, Arial, sans-serif;
font-size: 20pt;
font-weight: bold;
text-align: center
}
ingredient {
display: list-item;
list-style-position: inside
}
directions, story {
display: block;
margin-top: 12pt;
margin-left: 4pt
}
Setting List Properties
File: Data.xml
<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="Style.css" ?>
<lists>
<employees>
<name>name 1</name>
<projects>
<project>
project 1
</project>
<project>project 2</project>
</projects>
</employees>
</lists>
File: Style.css
lists {
display:block
}
name {
color:red
}
projects {
display:block
}
project {
display:list-item;
list-style:url(mini.jpg) inside
}