3.7 Utiliser div et span en CSS : Guide Complet

Éléments HTML div et span en CSS est fondamental pour structurer et styliser vos pages web. Ces deux balises HTML sont couramment utilisées pour créer des mises en page sophistiquées et interactives grâce à CSS. Apprenons à utiliser correctement les div et span en CSS avec des exemples concrets.

Introduction aux balises div et span

Les balises div et span sont essentielles pour structurer et manipuler le style des éléments HTML avec CSS. Tandis que la balise div est souvent utilisée pour regrouper de larges sections de contenu, la balise span cible des parties spécifiques d’un texte ou d’une zone. Comprendre la différence entre les deux et savoir quand utiliser chaque balise est crucial pour un développement web efficace. Pour en savoir plus, consultez notre guide sur le fonctionnement d’un navigateur web.

Comprendre la Balise div

La balise div est un élément de bloc, souvent utilisé comme conteneur pour d’autres éléments HTML. Elle commence sur une nouvelle ligne et s’étend sur toute la largeur disponible. Voici un exemple :

<div class="container">
  <h1>Bienvenue</h1>
  <p>Voici un paragraphe à l'intérieur d'une div.</p>
</div>

Comprendre la Balise span

La balise span est un élément en ligne utilisé pour styliser des parties spécifiques de texte sans forcer un saut de ligne. Voici un exemple :

<p>Ce texte contient un <span class="highlight">mot en surbrillance</span>.</p>

Styler les Balises avec CSS

Pour personnaliser l’apparence des balises div et span, utilisez du CSS. Par exemple :

.container {
  background-color: #f4f4f4;
  padding: 20px;
  border: 1px solid #ccc;
}

.highlight {
  color: red;
  font-weight: bold;
}

Utiliser div pour Créer des Mises en Page

Une utilisation courante de la balise div est de créer des mises en page. Voici un exemple de mise en page à trois colonnes :

<div class="row">
  <div class="column">Colonne 1</div>
  <div class="column">Colonne 2</div>
  <div class="column">Colonne 3</div>
</div>

.row {
  display: flex;
}

.column {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  margin: 5px;
}

Utiliser span pour Styliser du Texte

La balise span est idéale pour styliser des segments précis de texte. Par exemple, pour mettre en évidence du contenu spécial :

<p>Apprenez à <span class="emphasis">programmer</span> avec des tutoriels faciles à suivre.</p>

.emphasis {
  font-style: italic;
  color: blue;
}

Combiner div et span pour un Contrôle Granulaire

Combiner les balises div et span permet un contrôle granulaire sur la mise en page et le style. Voici un exemple :

<div class="box">
  <p>Ce texte est à l'intérieur d'un <span class="highlight">div</span>. </p>
</div>

.box {
  background-color: #e0f7fa;
  padding: 15px;
  border-radius: 5px;
}

.highlight {
  background-color: #ffeb3b;
}

Exemples Avancés d’Utilisation

Prenons des exemples plus complexes pour montrer la flexibilité des balises div et span lorsqu’elles sont utilisées ensemble :

Création de Cartes de Profil

Voici un exemple de carte de profil utilisant des div et span :

<div class="profile-card">
  <div class="profile-image">
    <img src="profile.jpg" alt="Profile">
  </div>
  <div class="profile-info">
    <h2>John Doe</h2>
    <p>Développeur Web & Designer graphique</p>
    <p><span class="highlight">Contact :</span> john.doe@example.com</p>
  </div>
</div>

.profile-card {
  display: flex;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
}

.profile-image img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

.profile-info {
  margin-left: 20px;
}

.highlight {
  font-weight: bold;
  color: #0d47a1;
}

Dialogues de Confirmation

Utilisez div pour créer des dialogues de confirmation avec des boutons stylisés :

<div class="dialog">
  <p>Êtes-vous sûr de vouloir supprimer cet élément ?</p>
  <div class="buttons">
    <button class="confirm">Oui</button>
    <button class="cancel">Non</button>
  </div>
</div>

.dialog {
  border: 1px solid #ef5350;
  padding: 20px;
  border-radius: 5px;
  background-color: #ffebee;
}

.buttons {
  display: flex;
  justify-content: flex-end;
}

.confirm {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 10px 20px;
  margin-right: 10px;
  cursor: pointer;
}

.cancel {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Conclusion

L’utilisation des balises div et span en CSS est essentielle pour structurer et styliser votre contenu de manière efficace et flexible. Les div créent des sections de contenu tandis que les span permettent de styliser des parties spécifiques. En combinant ces balises avec les puissantes capacités de stylisation de CSS, vous pouvez créer des mises en page responsives et des interfaces utilisateur attrayantes. Pour en savoir plus sur la mise en page avancée et les techniques CSS, consultez nos autres tutoriels sur comment créer votre première page HTML et les bases de la syntaxe CSS.