Les Bases du WEB – CSS: ID et classe

Bienvenue à ce sixième blogue sur les bases de HTML, allons voir ce qu’est l’ID et classe.

Lors de notre dernière leçon, nous avons découvert comment intégrer une feuille de style CSS à l’intérieur d’une page HTML. Aujourd’hui, nous allons aborder un point très important pour continuer notre compréhension du CSS: les sélecteurs.

Les sélecteurs en CSS sont la première partie du code CSS, celle qui nous indique à quoi le style doit s’appliquer. Présentement, nous avons appliqué notre style CSS directement aux éléments HTML. Il est aussi possible d’appliquer le style par ID et par classe, nous pouvons même inclure des opérations logiques de base.

Pour les exemples ci-dessous, nous allons intégrer deux nouvelles balises HTML: la balise « div » et la balise « span ». Ces balises utilisées seules et sans CSS ne feront pas grand-chose, ce sont de simple « block » pour entourer du contenu (images, liens, textes, etc.), mais jumelé avec le CSS, nous pouvons les utiliser pour séparer notre page en colonne, bloc superposé, etc. La principale différence entre le « span » et le « block » est que la balise « span » entoure des éléments dans une mise en forme de style « en-ligne ». Nous pourrions l’utiliser pour placer l’emphase sur un mot dans un paragraphe, tandis que la balise « div » s’affiche sous forme de bloc.

Les « ID » en CSS :

Un « ID » en HTML/CSS est une façon de nommer une balise dans une page HTML, qui apparaîtra seulement une fois par page. Un exemple d’ « ID » serait un site contenant deux colonnes. Ces colonnes peuvent avoir un « ID » distinct et être uniques dans la page. Pour ajouter un ID dans le code HTML, il faut le faire avec l’attribut « ID ». EXEMPLE :

Bon, il est maintenant temps de se lancer dans de voir du « CSS ». Voici un exemple :

<div id="colonne-droite"></div>

Et en CSS, pour sélectionner l’« ID » « colonne-droite », nous utilisons le symbole « # ». EXEMPLE :

#colonne-droite {
 color:blue;
}

Les « class » en CSS :

Les « class » en CSS sont très similaires à l’ID avec la seule exception qu’on peut en placer plusieurs sur une page. Par exemple, on pourrait faire une « class » pour afficher des alertes à nos usagers. Pour insérer une « class » dans un document HTML, il faut utiliser l’attribut « class ». EXEMPLE :

<div class="message-alerte"></div>

Dans notre fichier CSS, la « class » sera défini par la « . ». EXEMPLE :

.message-alerte {
 color :red;
 background-color :grey;
}

Pour terminer notre leçon, nous allons mélanger les sélecteurs CSS. Prenons le code HTML suivant pour commencer :

<div class="message-alerte"></div><div id="contenu">
 <p>Ceci est un paragraphe <span class="fond-cyan">dans</span> le contenu1</p>
</div>
<p>Un deuxième paragraphe <span class="fond-cyan"> pas dans</span> un bloc</p>

Maintenant, voici un exemple d’une base CSS pour le code plus haut :

#contenu {
 background-color :lightgrey;
}
#contenu1 .fond-cyan {
 background-color :cyan; 
}
P {
 color :indigo;
}

L’ajout particulier dans cet exemple est la ligne « #contenu1 .fond-cyan ». De la façon dont nous avons écrit cette ligne, seulement les « class » « fond-cyan » à l’intérieur de l’ID « contenu » seront affectées. Dans le premier paragraphe, le fond du mot va être de la couleur cyan, mais pas celui du deuxième paragraphe.

Encore une fois, nous vous invitons à revoir cette leçon sur YouTube, la vidéo va vous démontrer davantage l’intégration de la matière avec des exemples visuels concrets.

Dans une prochaine leçon, nous allons créer une page à deux colonnes et apprendre comment justifier notre texte.

Voir la leçon sur You Tube