Pages Web - Les feuilles de styles

Les feuilles de styles sont définies dans un fichier séparé .CSS ou dans un bloc <STYLE>...</STYLE>, de préférence dans <HEAD> ... </HEAD>.

L'intégration des fichiers séparés se fait dans la partie <HEAD> de la page HTML :
<link type="text/css" href="../EDVHelp.css" rel="stylesheet">
avec une insertion préalable de :
<meta http-equiv="Content-Style-Type" content="text/css">

Les styles peuvent aussi être définis, avec la même syntaxe, dans le paramètre Style des balises HTML.

Les styles se rapportent à un type de balise, aux balises d'une CLASS ou ID, aux balises contenues dans une CLASS ou un ID.

La référence à un ID se fait par l'ajout de #.


Exemple STYLE dans la balise

HTML :   
<span style="color: #6633CC;font-family:'Courier New', Courier, monospace;font-style:italic">Le style est dans la balise</span>

Résultat :
  Le style est dans la balise



Exemple ID

HTML :
  <p ID="ExplIDRappel">Un ID ne s'applique qu'à une seule balise HTML de tout le document</p>

CSS :
  #ExplIDRappel {
    background-color:#C4EE95;
  }

Résultat :
  Un ID ne s'applique qu'à une seule balise HTML de tout le document

Exemple CLASS

HTML :   
<p class="error">Attention : une erreur est survenue</p>

CSS :
  p.error {
    border:solid;
    background-color:#FFFFCC;
    font-size:large;
    font-weight:bold;
    color:#CC3300
  }

Résultat :
  Attention : une erreur est survenue

Il est préférable de regrouper les informations de style dans une même partie et d'utiliser les Class.

 

Exemple d'élément d'une Class

HTML :   
<div class="error">
Attention : <span>une erreur est survenue</span>
</div>

CSS :
  error span{
    border:solid;
    background-color:#FFFFCC;
    font-size:large;
    font-weight:bold;
    color:#CC3300
  }

Résultat :
  Attention : une erreur est survenue

Dans cette exemple, une division "error" est définie, elle contient une partie "span". Le style se comprend comme : "tous les span contenus dans error".

Notez que la classe edvError est déjà définie dans le fichier edvHtml.css issu de la variable .{Models}.Web.Mini.CSS


Voir aussi

Les pages Web
Les balises HTML
http://fr.selfhtml.org/
http://www.w3schools.com/cssref/