Par exemple, si vous êtes en train de consulter une version html de ce document, vous remarquerez en affichant le code source que les styles sont situés dans un document lié portant l’extension “.css”.

Un document html référencera ses styles avec les instructions suivantes :

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

... ou :

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

... dans la section <header/> .

Un document xml ou un document svg aura une instruction comme celle-ci :

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

... sous l’instruction xml traditionnelle :

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

Dans un document HTML, cette déclaration CSS :

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

... suivie par cette balise :

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

... donnera le résultat suivant :

L’intérêt de cette démarche est d’affecter un style à des éléments multiples. En utilisant les styles précédents et en ajoutant les balises suivantes :

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

... on obtient :