Quizéo

Les attributs HTML class et id et les sélecteurs CSS associés

À partir du sélecteur simple p, il n’est pas possible d’appliquer une couleur différente à deux paragraphes différents. Pour contourner ce problème, on peut créer deux attributs HTML id et class qui vont nous aider à cibler dans la feuille de style CSS du contenu HTML de manière plus précise.

Chaque id doit avoir une valeur unique tandis que plusieurs attributs class peuvent posséder la même valeur.

Les sélecteurs #id et .class du fichier CSS vont permettre de cibler un élément particulier plutôt qu’un type d’élément. Il suffit pour cela d’ajouter les attribut id et class à l’intérieur de la balise ouvrante d’un élément HTML et de leur attribuer une valeur. 

Attention : les valeurs indiquées pour les attributs id et class ne doivent pas contenir de caractères spéciaux, ni espaces et doivent commencer par une lettre.

Reportez-vous aux fichiers index.html et style.css suivants pour découvrir un exemple.

Exemple pour les attributs class et id - Fichier HTML

Exemple pour les sélecteurs .class et #id - Fichier CSS

Code et affichage pour les attributs class et id

Un élément de type block va toujours commencer sur une nouvelle ligne et prendre toute la largeur disponible dans la page. En outre, un élément de type block peut contenir d’autres éléments de type block ainsi que des éléments de type inline.

À l'inverse, les éléments de type inline ne vont pas commencer sur une nouvelle ligne, mais s’insérer dans la ligne actuelle. Les éléments de type inline prennent uniquement la largeur qui leur est nécessaire (c’est-à-dire celle de leur contenu).

Par exemple, l’élément HTML strong est un élément de type inline.

Afin de mettre en évidence cette différence, vous pouvez vous reporter au fichier index.html et constater la mise en forme différente avec la propriété CSS border.

Exemple pour les éléments block et inline - Fichier HTML

Exemple pour un élément block - Fichier CSS

Code et affichage pour un élément block

Exemple pour un élément inline - Fichier CSS

Code et affichage pour un élément inline

Les éléments HTML <div> et <span>

Les éléments HTML div et span ne possèdent aucune valeur sémantique : ils ne servent pas à donner du sens à un contenu. En revanche, ils servent de conteneur afin de faciliter la mise en forme d’une page HTML.

Div, un élément de type block

L’élément HTML div est un élément de type block. Cet élément est souvent utilisé comme conteneur pour plusieurs autres éléments HTML. On pourra ainsi appliquer facilement des styles à un élément div. Il est courant d’attribuer un attribut class à un élément div afin de pouvoir le cibler plus facilement.

Ici, la classe "div-conteneur" attachée à l'élément HTML div permet d'appliquer une surcharge CSS créant un fond rectangulaire bleu et mettant en gras les caractères.

Span, un élément de type inline

L’élément HTML span est un élément de type inline. Cet élément sera souvent utilisé comme conteneur d’un contenu textuel. L’élément span sera souvent utilisé avec un attribut class afin de pouvoir le cibler plus facilement en CSS.

Ici, la classe "yellow" attachée à l'élément span permet de créer un fond jaune rectangulaire.

Exemple pour <div> et <span> - Fichier HTML

Exemple pour la mise en forme du <div> - Fichier CSS

Code et affichage pour <div>

Exemple pour la mise en forme du <span> - Fichier CSS

Code et affichage de <span>

Le concept de boîtes en HTML/CSS

Le modèle des boîtes est un concept essentiel pour la mise en page d’une page web. En effet, tout élément HTML peut être considéré comme une boîte rectangulaire, qu’il soit de type block ou inline.

Pour mettre en forme une boîte, on applique une surcharge CSS à un élément div.

Les éléments HTML et les sélecteurs CSS

Les attributs HTML de type id et class

Les attributs HTML class et id et les sélecteurs CSS associés

Exemple pour les attributs class et id - Fichier HTML

Exemple pour les sélecteurs .class et #id - Fichier CSS

Code et affichage pour les attributs class et id

Les éléments HTML de type block et inline

Exemple pour les éléments block et inline - Fichier HTML

Exemple pour un élément block - Fichier CSS

Code et affichage pour un élément block

Exemple pour un élément inline - Fichier CSS

Code et affichage pour un élément inline

Les éléments HTML conteneurs <div> et <span>

Les éléments HTML <div> et <span>

Exemple pour <div> et <span> - Fichier HTML

Exemple pour la mise en forme du <div> - Fichier CSS

Code et affichage pour <div>

Exemple pour la mise en forme du <span> - Fichier CSS

Code et affichage de <span>

Le modèle des boîtes pour structurer une page web

Le concept de boîtes en HTML/CSS

Le modèle de boîte - Schéma

Exemple pour le modèle de boîte - Fichier HTML

Exemple pour le modèle de boîte - Fichier CSS

Code et affichage pour le modèle des boîtes