XML/CSS Style/Attribute

attributes Psuedo class

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="Style.css"?>
<document>
  <paragraph 
     keyWords="displaying, attribute, content, XML, CSS" 
     xref="link text">
     text <code>:before</code> and  
     <code>:after</code> text
  </paragraph>
</document>

File: Style.css
paragraph {
  display:block;
  background-color:#FFFFFF;
  font-family:Arial, Helvetic, sans-serif;
  padding:20px;
}
paragraph:before {
  display:block;
  background-color#CCCCCC;
  font-weight:bold;
  color:#0000FF;
  content:"Cross reference:" attr(xref);
}
paragraph:after {
  font-style:italic; 
  color:#0000FF;
  content:"Key words: " attr(keyWords);
}

Style with attribute class

File: Data.xml
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="Style.css"?>
<document>
  <paragraph style="normal">
    text <code>style</code>text<code>normal</code>.
  </paragraph>
  <paragraph style="summary">
    text <code>style</code> text<code>summary</code>.
  </paragraph>
  <paragraph style="code foreground">
    text <code>style</code>test<code>code</code> or <code>foreground</code>.
  </paragraph>
  <paragraph style="code-background">
    text <code>style</code> text<code>code background</code>.
  </paragraph>
</document>
File: Style.css
paragraph[style] {
  font-size:12px;
  color:#0000FF;
  display: block;
}
paragraph[style=summary] {
  font-style:italic;
  font-size: 16px;
}
paragraph[style~=foreground] {
  font-family:courier, serif;
  font-weight:bold;
  background-color:#CCCCCC; 
}
paragraph[style|=code] {
  font-family:courier, serif;
  font-weight:bold;
  background-color:#FFFFFF;
  border-style:solid 2px #000000;
}

Use attr to get the value of attribute

File: Data.xml
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="Style.css" ?>
<purchaseOrder orderID="x1129001">
    asdf
</purchaseOrder>
File: Style.css
purchaseOrder:before {
  font-family:arial, verdana, sans-serif;
  font-size:28px; 
  font-weight:bold;
  content:"Purchase Order Number: " attr(orderID);
}