XML/CSS Style/Border
Border color
File: Data.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Style.css"?>
<document>
<page>
<pageNumber>A</pageNumber>
<paragraph>
B
<reference>C</reference>
D
<important>E</important>
.
</paragraph>
<paragraph>
F
<reference>G</reference>
H
<important>I</important>
.
</paragraph>
</page>
<page>
<pageNumber>J</pageNumber>
<paragraph>
K
<reference>L</reference>
L
<important>N</important>
.
</paragraph>
<paragraph>
O
<reference>P</reference>
Q
<important>R</important>
.
</paragraph>
</page>
</document>
File: Style.css
paragraph {
display:block;
border:solid 1px #A3A3A3;
padding: 10px;
margin: 20px;
}
reference {
display:inline;
font-style:italic;
color:#CC3333;
background-color: #E6E6E6;
}
important {
display:inline;
font-weight:bold;
color:#990000;
border:solid 1px #990000;
}
page {
display:block;
border:solid 2px #000000;
padding: 10px;
margin:10px;
}
pageNumber {
display:block;
padding:5px;
border:solid 2px #336699;
width: 60px;
margin-bottom: 20px;
}
Border color and style
File: Data.xml
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="Style.css" ?>
<page>
<pageNumber>1</pageNumber>
<paragraph>A
<reference>B</reference>,
<keywords>C</keywords>.
</paragraph>
</page>
File: Style.css
page {
display:block;
padding:10px;
margin:10px;
border-style:solid;
border-width:4px;
border-color:#000000;
}
pageNumber {
display:inline;
font-style:italic;
border-style:solid;
border-width:4px;
border-color:#CCCCCC;
}
paragraph {
display:block;
padding:10px;
border:solid;
border-width:4px;
border-color:#CCCCCC;
}
reference {
display:inline;
font-style:italic;
color:#CC3333;
border:solid;
border-width:2px;
border-color:#CCCCCC;
}
keyword {
display:inline;
font-weight:bold;
color:#990000;
border:solid;
border-width:2px;
border-color:#CCCCCC;
}
Setting the Border
File: Data.xml
<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="Style.css" ?>
<employees>
<name language="English">T1</name>
<name language="Latin">T2</name>
<projects>
<project>project1</project>
<project>project2</project>
<project>project3</project>
</projects>
<weight>3 points</weight>
<length>3 years</length>
</employees>
File: Style.css
employees {
display:block
}
name {
display:block;
position:absolute;
left:9px
}
projects{
display:block;
border:medium dotted red
}
project{
display:block;
position:relative;
left:125px;
width:340px;
border:thin solid red
}
weight{
display:block
}
length{
display:inline
}