Vous pouvez s'appliquer un modèle à une classe donnée d'un élément en utilisant des classes de CSS. Pour faire ceci, vous devez déclarer un modèle pour la classe que vous liez l'élément au modèle, assignant alors cette classe à l'élément.

Les classes sont pour toi, si vous souhaitez avoir plus d'un modèle d'une étiquette de HTML. N'importe quelle étiquette de HTML peut employer ces classes.

Syntaxe de classe de CSS

En employant un point (.) suivi du nom de classe, vous déclarez une classe de CSS. Vous composez le nom de classe vous-même. Si vous voulez écrire les propriétés/valeurs à votre classe, vous pouvez l'assigner après le nom de classe.

.class-name { property:value; }

Vous pouvez mettre en tête le point avec le nom d'élément de HTML si vous voulez employer le même nom de classe pour les éléments multiples, mais chacun avec un modèle différent.

html-element-name.class-name { property:value; }

Vous pourriez définir des classes de feuille de modèle pour chacun, si vous voulez un paragraphe pourpre de police et un paragraphe bleu de police.

.purple {
font-family: verdana, arial, helvetica, sans-serif;
size: 12pt;
color: #003399;
}

.blue {
font-family: verdana, arial, helvetica, sans-serif;
size: 12pt;
color: #663399;
}

S'appliquer alors ceci à différents paragraphes en utilisant après code :

<p class="purple">The purple paragraph text will go here.</p>

<p class="blue">The blue paragraph text will go here.</p>

L'étiquette de <span>

En utilisant l'étiquette de <span>, vous pouvez également s'appliquer ceci aux sections du HTML comme ceci :

<p class="purple">This text will be purple until you get to <span class="blue">these words, which are blue</span> and then the text carries on being purple.</p>

Si vous souhaitez montrer le code dans un différent colorer selon sa langue :

code.html { color: #4b0082 }
code.css { color: #191970 }

Par exemple, en utilisant le class~= " pastoral ", nous pouvons assigner l'information de modèle à tous les éléments comme suit :

*.pastoral { color: green } /* all elements with class~=pastoral */

Ce qui suit assigne le modèle seulement aux éléments H2 avec le class~= " pastoral " :

H2.pastoral { color: green } /* H1 elements with class~=pastoral */

Donné ces règles, le premier exemple H2 ci-dessous n'aurait pas le texte vert, alors que la seconde :

<H2>Not green</H2>
<H2 class="pastoral">Very green</H2>

Sans élément associé, vous pouvez déclarer des classes comme suit :

.note { font-size: small }

Exemple de classe de CSS

<head>
<style type="text/css">
h1.css-section { color:#999999;}
p.css-section { color:#000099; }
</style>
</head>
<body>
<h1 class="css-section">CSS Class</h1>
<p class="css-section">CSS classes can be very useful</p>
</body>

O/P :