HTML - Les identifiants CSS

Définition des identifiants CSS

En HTML, vous pouvez définir un identifiant CSS pour un élément en utilisant l'attribut id. L'attribut id est ajouté à la balise d'ouverture de l'élément HTML que vous souhaitez identifier. Voici la syntaxe :

<element id="nom-identifiant-unique">...</element>

Lors du choix d'un nom pour votre identifiant CSS, il est important de suivre certaines conventions de nommage :

Voici quelques bonnes pratiques pour l'utilisation des identifiants CSS :

• Utilisez les identifiants avec parcimonie et uniquement lorsque c'est nécessaire. Une utilisation excessive des identifiants peut entraîner des problèmes de spécificité et rendre votre CSS plus difficile à maintenir.
• Chaque identifiant doit être unique dans une page. N'utilisez pas le même identifiant sur plusieurs éléments.
• Évitez d'utiliser des identifiants uniquement à des fins de style. Les classes sont plus appropriées pour appliquer des styles à plusieurs éléments.

Application de styles CSS aux identifiants

Pour cibler un identifiant CSS dans votre feuille de style CSS, vous utilisez le symbole # suivi du nom de l'identifiant. Voici la syntaxe :

#nom-identifiant-unique {
  propriété: valeur;
}

Les identifiants CSS ont une spécificité plus élevée que les classes et les éléments. Cela signifie que les styles appliqués à un identifiant prévaudront sur les styles appliqués aux classes ou aux éléments. Cependant, il est généralement recommandé d'utiliser des classes à des fins de style et de réserver les identifiants à des fins spécifiques comme la liaison ou la manipulation JavaScript.

<div id="header">
  <h1>Bienvenue sur mon site web</h1>
</div>

#header {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
}

Identification unique des éléments

L'un des principaux avantages de l'utilisation des IDs CSS est la possibilité d'identifier de manière unique des éléments sur une page web. Contrairement aux classes, qui peuvent être appliquées à plusieurs éléments, un ID doit être unique sur une page. Cela signifie que vous pouvez cibler un élément spécifique en utilisant son ID sans vous soucier de sélectionner d'autres éléments par erreur.

<nav>
  <ul>
    <li><a href="#home" id="nav-home">Accueil</a></li>
    <li><a href="#about" id="nav-about">À propos</a></li>
    <li><a href="#contact" id="nav-contact">Contact</a></li>
  </ul>
</nav>

#nav-home {
  color: red;
}

#nav-about {
  color: blue;
}

#nav-contact {
  color: green;
}

Style spécifique pour des éléments individuels

Les IDs CSS vous permettent d'appliquer des styles spécifiques à des éléments individuels sur une page. Ceci est utile lorsque vous voulez donner à un élément un aspect ou un comportement unique qui diffère des autres éléments du même type.

<button id="cta-button">S'inscrire maintenant</button>

#cta-button {
  background-color: #ff5500;
  color: #fff;
  font-size: 18px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

Lien vers des sections spécifiques d'une page

Les IDs CSS peuvent être utilisés pour créer des liens qui mènent à des sections spécifiques d'une page. C'est ce qu'on appelle le "lien d'ancrage" ou "lien intra-page". En attribuant des IDs à différentes sections ou éléments d'une page, vous pouvez créer des hyperliens qui mènent directement à ces sections lorsqu'on clique dessus.

<h2 id="section1">Section 1</h2>
<p>Contenu de la Section 1...</p>

<h2 id="section2">Section 2</h2>
<p>Contenu de la Section 2...</p>

<a href="#section1">Aller à la Section 1</a>
<a href="#section2">Aller à la Section 2</a>

Manipulation JavaScript des éléments à l'aide des IDs

Les IDs CSS sont aussi couramment utilisés avec JavaScript pour manipuler des éléments spécifiques sur une page. JavaScript peut sélectionner des éléments basés sur leurs IDs en utilisant des méthodes comme getElementById().

<input type="text" id="username">
<button id="submit-btn">Envoyer</button>

const usernameInput = document.getElementById('username');
const submitBtn = document.getElementById('submit-btn');

submitBtn.addEventListener('click', function() {
  const username = usernameInput.value;
  // Effectuer des actions avec la valeur du nom d'utilisateur
});

Exemple 1 : Styliser un élément avec un ID

Si vous avez un paragraphe sur votre page web que vous souhaitez styliser différemment des autres, vous pouvez lui attribuer un ID et le cibler dans votre CSS.

<p id="special-paragraph">
  Ceci est un paragraphe spécial avec un style unique.
</p>

#special-paragraph {
  background-color: #f2f2f2;
  color: #333;
  font-size: 18px;
  padding: 10px;
  border: 1px solid #ccc;
}

Dans l'exemple ci-dessus, le paragraphe a un ID de special-paragraph. Le code CSS cible cet ID en utilisant le symbole # suivi du nom de l'ID. Les styles définis dans le bloc CSS s'appliqueront uniquement à l'élément avec cet ID.

Exemple 2 : Créer un lien vers une section en utilisant un ID

Les ID peuvent aussi être utilisés pour créer des liens qui mènent à des sections dans une page. C'est utile pour créer une table des matières ou un menu de navigation qui permet aux utilisateurs d'aller à différentes parties de la page.

<h2 id="section1">Section 1</h2>
<p>Contenu de la Section 1...</p>

<h2 id="section2">Section 2</h2>
<p>Contenu de la Section 2...</p>

<a href="#section1">Aller à la Section 1</a>
<a href="#section2">Aller à la Section 2</a>

Quand un utilisateur clique sur le lien "Aller à la Section 1", la page défilera jusqu'au titre avec l'ID section1. Cliquer sur le lien "Aller à la Section 2" amènera au titre avec l'ID section2.

Ces exemples montrent comment les ID CSS peuvent être utilisés pour styliser des éléments de manière unique et créer des liens qui naviguent vers des sections dans une page. En attribuant des ID aux éléments et en les ciblant dans le CSS et les hyperliens, vous pouvez créer une page web structurée et interactive.