XML/CSS Style/list
A bulleted list created using CSS
<source lang="xml">
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:"+ ";
}
</source>
display as list
<source lang="xml">
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
}
</source>
Setting List Properties
<source lang="xml">
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
}
</source>