CSS Angaben werden als normal lesbarer Text notiert, und vom Browser des Nutzers interpretiert. Es gibt 3 Möglichkeiten ein Element per CSS zu formatieren.
Die Formatierungsangaben werden direkt im (X)HTML-Code am Element gemacht, und über das "style"-Attribut angegeben
<p style="font-weight: bold; font-style: italic; color: red;">dieser Text ist fett, kursiv und rot</p>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beispielseite</title>
<style type="text/css">
<!--
p { font-weight: bold;
font-style: italic;
color: red;
}
//-->
</style>
<head>
<body>
<p class="styled">dieser Text ist auch fett, kursiv und rot</p>
<body>
</html>
Dazu wird im head-Bereich der Webseite ein Verweis auf die externe CSS-Datei erstellt
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beispielseite</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<head>
<body>
<p class="styled">dieser Text ist schon wieder fett, kursiv und rot</p>
<body>
</html>
und in dieser externen CSS-Datei (in unserem Beispiel die style.css) werden dann die nötigen Angaben notiert
p { font-weight: bold;
font-style: italic;
color: red;
}