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

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 de présentation
Voir aussi qui permet de définir un style à l'intérieur d'un paragraphe.

On peut définir une phrase toute

rouge . Et revenir à la normale plus tard ...

</p>

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 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 dans le HTML (à vérifier)
Pensez à créer un répertoire central pour vos styles ! (A tecfa: /web/styles)
Vous pouvez regarder le source d'une page HTML et ensuite manuellement entrer l'URL pour le CSS et le regarder (s'il en existe un)

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

ATTENTION : Dans le fichier - feuille de style vous mettez juste les déclarations CSS, rien d'autre: pas d'entêtes, rien d'autre !!

Exemple de la home page de DKS:

<style type="text/css" media="all">@import "/tecfa-people/dks-normal.css";</style>

<link rel="alternate stylesheet"
 type="text/css" media="screen"
 title="Friendly fonts
" href="/tecfa-people/dks-friendly.css" />

<link rel="alternate stylesheet" type="text/css" media="screen" title="bigtype" href="/tecfa-people/dks-big.css" />

<link rel="alternate stylesheet" type="text/css" media="screen" title="Print with URLs" href="/tecfa-people/dks-print-url.css" />

<link rel="alternate stylesheet" type="text/css" media="screen" title="Print" href="/tecfa-people/dks-print.css" />

<link rel="stylesheet" type="text/css" media="print"
 href="/tecfa-people/dks-print.css" />

    <style>

      <!--

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

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

-->

    </style>

Marche mal avec certains Explorer 4
Ne marche pas avec Netscape (4.x) ! On peut utiliser cet fait pour filter ces navigateurs ....