XHTML, SVG, and XML can be presented with CSS formatting.

For example, if you are currently viewing an html version of this document, you may notice by reading the source code that formatting instructions are located in a linked document bearing the extension “.css”.

An html document will have an instruction like this :

<link rel="stylesheet" type="text/css" href="stylesheetdocument.css"/>

... or like this :

<style type="text/css">...</style>

... in the <header/> section.

An xml or an svg document will usually have a processing instruction line like :

<?xml-stylesheet type="text/css" href="stylesheetdocument.css"?>

... below the traditional xml processing instruction:

<?xml version="1.0" encoding="utf-8"?>

CSS syntax is such that, on an html document, this “style” declaration:

<style type="text/css">
div.CSSExample
{
border-style:solid;
border-color:silver;
border-width:5px;
background-color:black;
color:white;
font-family:Arial Black;
font-weight:bold;
text-align:center;
width:150px;
margin:10px;
padding:10px;
}
</style>

... followed by this markup:

<div class="CSSExample">Hello, World</div>

... will give the following result:

The purpose of this method is to attach a style to multiple elements. Using the same style declaraction and the following markup:

<style type="text/css">
div.CSSExampleTwo
{
border-style:solid;
border-color:black;
border-width:5px;
background-color:gray;
width:200px;
text-align:center;
}
</style>

<div class="CSSExampleTwo">
<div class="CSSExample">Hello, World</div>
<div class="CSSExample">Peace, Man</div>
</div>

... we get: