Cours CSS
Comprendre la notion de classe en CSS


bouton de manchette clavierA découvrir les boutons de manchette Geek :) - Des idées de cadeaux à petits prix :)

Comprendre la notion de classe en CSS

Notion importante : Les classes

Focus : C'est très simple, une classe permet d'appliquer un style précis au sein d'une balise HTML

Euh.. un exemple ? Pour définir un paragraphe en HTML, on utilise la balise <p>, nous allons appliquer le style suivant : taille de police "petit" et couleur #333333 :
p {
	font-size: small;
	color: #333333;
}
Il est possible de changer une parti au sein de ce paragraphe, comme mettre une phrase en vert et gras sans toucher au reste.

1) Coté HTML : Le code HTML me donnera :
<p>\nVoici un texte <span class="greenboldtext"> avec une phrase en gras et vert</span> alors que le reste ne change pas </p>
2) Coté CSS : Dans ma feuille de style, j'ajoute :
.greenboldtext{
  font-size: small;
  color: #008080;
  font-weight: bold;
}
3) Résultat sur votre site : Cela donne :
Voici un texte avec une phrase en gras et vert alors que le reste ne change pas


Attention : Notez un "." devant cette classe, il est possible de donner de n\'inporte quel nom à votre classe.

Nous vous conseillons des noms éloquant comme ".monTexteEnGrasEtbleu".
Une notion proche des classes, découvrons les 'id' >>>

Le CSS en 3 questions/réponses - en bref

🖥️ C'est quoi HTML et CSS ?

Le CSS est un langage informatique utilisé pour mettre en forme les fichiers HTML sur un site web. Ainsi, les fichiers CSS permettent de gérer l'aspect graphique d'une page en HTML.

🤔 Qu'est-ce que le CSS ?

CSS est l'acronyme de « Cascading Style Sheets » c'est à dire « feuille de style en cascade ». Le CSS est un langage informatique permettant de mettre en forme des pages web (HTML ou XML).

📆 Différence entre CSS et CSS3 ?

CSS3 est la dernière version de CSS. Il fournit des capacités de type JavaScript. En plus de cela, il fournit également des fonctionnalités de développement mobile.

Voulez-vous laisser une note ou un commentaire ?

Donnez votre avis sur ce contenu :
Votes: 4.4 (100%) 81 votes