Let's start with an XML fragment taken from a well-known blog:
<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="style.css" type="text/css"?> <rdf:RDF xmlns="http://purl.org/rss/1.0/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xml:base="http://annevankesteren.nl/archives/href"> <channel rdf:about="http://annevankesteren.nl/feeds/href.rdf"> <title>Anne’s Weblog about Markup & Style - HREF</title> <description>Links matter</description> <link>http://annevankesteren.nl/archives/href</link> <dc:date>2005-06-24</dc:date> </channel> <!--more--> </rdf:RDF>
Now let's use our CSS3 namespace selectors:
@namespace RDF "http://purl.org/rss/1.0/";
@namespace dc "http://purl.org/dc/elements/1.1/";
@namespace rdf "http://www.w3.org/1999/02/22-rdf-syntax-ns#";
rdf|RDF {
display: block;
background: #eee;
color: #333;
margin: 0;
width: 100%;
font: 76% Arial, sans-serif;
}
channel {
width: 60%;
margin: 2em auto;
padding: 1em;
background: #fff;
font-size: 1.2em;
display: block;
border: 5px solid gray;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
channel title {
display: block;
font: 2em "Trebuchet MS", Trebuchet, sans-serif;
color: #454545;
margin-bottom: 0.2em;
border-bottom: 4px double;
padding-bottom: 2px;
}
channel description {
display: block;
padding: 5px;
margin-top: 5px;
font-family: Georgia, serif;
font-style: italic;
}
channel link {
display: block;
margin-bottom: 0.3em;
color: #338;
cursor: pointer;
}
channel dc|date {
display: block;
font-size: small;
margin: 0 0 0.5em 0;
padding: 0.3em;
background: #f5f5f5;
border: 1px solid #cbcbbb;
}
We've declared all the namespace used throughout the document and used the suffix selectors to match the elements we want to stylize. You can see the result below.
