3. Association d'une feuille de style à une page HTML

3.1 Styles "inline"

On peut définir un style pour chaque balise.

Ce paragraphe contient son propre style, mais ce n'est pas

très efficace

</p>

http://tecfa.unige.ch/guides/css/ex/simple-css2.html
Il s'agit ici d'une technique qu'il faut mieux éviter, car elle ne respecte pas très bien le principe de la séparation de contenu et présentation
Je pense qu'il s'agit aussi d'une tentative pour abolir la balise <font> problématique dans le versions futurs de HTML (XHTML)

La déclaration doit se faire dans le <head> (sinon il peut y avoir des problèmes, par ex. la couleur background du body qui ne s'affiche pas)
Pour rester compatible avec les anciens navigateurs, il faut absolument commenter les règles CSS comme dans l'exemple ci-dessous !

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2//EN">

<html> <head>

   <title>Simple CSS démo</title>

   <STYLE type="text/css">

      <!--

      body 	{background: white; font-family: Helvetica, Arial, sans-serif;}

      H2, H3	{font-family: Helvetica, Arial, sans-serif;}

      P.intro 	{color: blue; margin-left: 4em; margin-right: 2em;}

      .default  {margin-left: 2em;}

-->

    </STYLE>

  </head>

Solution efficace pour gérér le look des plusieurs (ou pleins!) de pages
La balise <link> doit se trouver dans le <head>
Si vous utilisez des caractères non standards dans le texte ("é","ö", etc.) il faudrait déclarer l'attribut CHARSET (à vérifier)
Pensez à créer un répertoire central pour vos styles !

<html>

  <head>

    <LINK REL="STYLESHEET" HREF="simple-css3.css" CHARSET="ISO-8859-1" TYPE="text/css">

    <title>Simple CSS démo III</title>

  </head>

  <body>

    <style>

      <!--

      @import ("simple-css3.css") ;

      p.default {margin-right: 3em; margin-left: 3em}

-->

    </style>