XML/CSS Style

• Attribute
• Border
• Padding
• Word spacing
• align
• background
• break
• clear
• clip
• color
• column
• content
• display
• float
• foreground
• height
• inline block
• letter spacing
• line height
• list
• margin
• overflow
• paragraph
• position
• pseudo class
• table
• text decoration
• text transform
• width
• xlink
• xml stylesheet
• z index

bold font

File: Data.xml

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="Style.css"?>
<document xmlns:html="http://www.w3.org/TR/REC-html40">
  <page>
    <title>Links</title>
    <paragraph>The 
    <html:a href="http://www.wbex.ru" target="_blank">link</html:a>
    will open in a new window.
    </paragraph>
  </page>
</document>
File: Style.css
title{
  display:block;
  color: #000000;
  font-size: 30px;
  font-weight: bold;
}
paragraph {
  display:block;
  padding:10px;
  margin: 10px;
}

Choosing a Font Family

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
name {
   font-family:Trebuchet MS, Arial, sans-serif
}
weight, project{
   font-family:Georgia, Times, serif
}

Font size and weight

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>
    <footnoteNumber>C</footnoteNumber>
    D
    <keywords>E</keywords>
    F
  </paragraph>
</page>
File: Style.css
footnoteNumber {
   position:relative; top:3px;
   display:inline;
   font-size:9pt; 
   font-weight:bold;
   color:#990000;
   border-style:solid; 
   border-width:2px; 
   border-color:#CCCCCC;
}
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;
}

font style: italic and bold

File: Style.css
BOOK {
   display:block;
   margin-top:12pt;
   font-size:10pt
}
TITLE {
   font-style:italic
}
AUTHOR {
   font-weight:bold
}
File: Data.xml

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="Style.css"?>
<INVENTORY>
   <BOOK>
      <TITLE>title 1</TITLE>
      <AUTHOR>author 1</AUTHOR>
      <BINDING>paperback</BINDING>
      <PAGES>1</PAGES>
      <PRICE>$1.1</PRICE>
   </BOOK>
</INVENTORY>

footnote 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<footnote>C</footnote></reference> 
    D
    <important>E</important>.
  </paragraph>
</page>

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;
}

Page number 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<footnote>C</footnote></reference> 
    D
    <important>E</important>.
  </paragraph>
</page>
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 {
  position:relative;
  background-color:#FFFFFF;
  right:75px;
  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;
}

Setting All Font Values at Once

 
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
name {
   font: bold 24pt/22pt Trebuchet MS;
   width:100;
   margin-top:10
}
project {
   font: 10pt Georgia
}
weight {
   font-style:italic
}
length{
   font-weight:bold
}

Setting the Font Size

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
name {
   font-family:Trebuchet MS;
   font-weight:bold;
   font-size:24pt;
   width:100;
   margin-top:10
}
project{
   font-family:Georgia;
   font-size:10pt
}
weight {
   font-style:italic
}
length{
   font-weight:bold
}

smaller font size

File: Data.xml
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="Style.css"?>
<POEM>
  <TITLE>title</TITLE>
  <AUTHOR>author 1</AUTHOR>
  <DATE>2008</DATE>
  <PARAGRAPH>
    <LINE>line 1</LINE>
    <LINE>line 2</LINE>
    <LINE>line 3</LINE>
    <LINE>line 4</LINE>
    <LINE>line 5</LINE>
    <LINE>line 6</LINE>
  </PARAGRAPH>
  <PARAGRAPH>
    <LINE>line 7</LINE>
    <LINE>line 8</LINE>
    <LINE>line 9</LINE>
    <LINE>line 10</LINE>
    <LINE>line 11</LINE>
    <LINE>line 12</LINE>
  </PARAGRAPH>
</POEM>
File: Style.css
POEM {
   font-size:small
}
POEM, TITLE, AUTHOR, DATE, PARAGRAPH, LINE {
   display:block
}