Balises, classes, id

Redéfinir des balises existantes

Ici, l'on souhaite redéfinir des balises qui existent, celles du Html (H1, P, INPUT...). On placera alors le nom de la balise suivi de son nouvel aspect entre accolades.

Figure 1 - Les liens seront désormais rouges et gras
a  {
   font-weight: bold; 
   color: #FF0000 ;
}

Si plusieurs balises ont des aspects communs, on les redéfini d'un coup en séparant les balises par une virgule.

Figure 2 - Les H1, H2 et H3 seront verts
h1, h2, h3  {
   color: #00FF00 ;
}

Pour redéfinir TOUT, on optera pour l'astérisque (attention, surpuissant).

Figure 3 - Tout sera en arial
*  {
   font-family: Arial, Helvetica, sans-serif;
}

Créer ses classes

On va ici redéfinir 3 éléments. La balise H1 sera red, une classe vert sera green et une bleu qui sera, logiquement, blue. Tous les H1 seront donc rouges, sauf ceux avec précision de class vert. Laquelle classe ne peut s'appliquer qu'aux H1, contrairement à bleu qui est universelle (puisque s'appliquant à *), et sera sans effet sur les H2.

Figure 4 - On commence par définir les styles, dans b.css
h1 { color : red; }
h1.vert { color : green; }
*.bleu { color : blue; }

Testons ?

Figure 5 - Et on utilise H1 et H2 avec les différentes classes, pour voir (ou non)
<html><head>
   <LINK rel="stylesheet" type="text/css" href="b.css">
</head><body>
   <h1>titre 1 normal</h1>
   <h1 class="vert">titre 1 avec class vert</h1>
   <h2 class="vert">titre 2 avec class vert</h2>
   <h1 class="bleu">titre 1 avec classe universelle bleu</h1>
   <h2 class="bleu">titre 2 avec classe universelle bleu</h2>
</body></html>

Donner un identifiant (ID)

Dans la même logique, on peut donner un ID à une balise Html, et lui attribuer un style spécifique.

Figure 6 - Définition des noms toto, titi et tutu
<HTML><HEAD> 
   <STYLE type="text/css">
      #toto { color : red; }
      #titi { color : green; }
      #tutu { color : blue; }
   </STYLE> 
</HEAD><BODY>
      <H1 id="toto">Titre toto</H1>
      <H1 id="titi">Titre titi</H1>
      <H1 id="tutu">Titre tutu</H1>
</BODY></HTML>

Généralement utilisé pour dimensionner ou placer des zones. En théorie, deux balises ne doivent pas avoir le même ID...

Présentation

Supports de cours

Et aussi...

Balises, classes, id

Redéfinir des balises existantes

Créer ses classes

Donner un identifiant (ID)