En CSS, la propriété max-width est utilisée pour définir la largeur maximale d'un élément. Cette propriété est particulièrement utile pour garantir qu'un élément ne dépasse pas une largeur spécifiée, en particulier lorsque la fenêtre ou le conteneur parent est plus étroit.

Voici la syntaxe de base pour utiliser max-width :

 css
 selector {
  max-width: value;
}

selector : remplacez-le par le sélecteur de l'élément HTML que vous souhaitez styliser.
value : remplacez-le par la largeur maximale que vous souhaitez définir. Cela peut être spécifié dans diverses unités telles que les pixels ( px ), les ems ( em ), les pourcentages (%), ou d'autres unités de longueur CSS valides.

Par exemple, si vous souhaitez définir la largeur maximale d'un élément avec l'ID « exemple » à 500 pixels, vous utiliserez le CSS suivant :

 css
 #example {
  max-width: 500px;
}

Cela garantit que l'élément ne dépassera pas une largeur de 500 pixels, quelle que soit la largeur réelle du contenu.

Voici un exemple rapide avec un extrait HTML :

 HTML
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      max-width: 800px;
      margin: 0 auto; /* Center the container horizontally */
      padding: 20px;
      background-color: #f0f0f0;
    }
  </style>
  <title>Max-width Example</title>
</head>
<body>
  <div class="container">
    <!-- Your content goes here -->
    <p>This is an example with a maximum width of 800 pixels.</p>
  </div>
</body>
</html>

Dans cet exemple, la classe .container a un max-width de 800 pixels, garantissant qu'elle ne s'étendra pas au-delà de cette largeur, et elle est centrée dans la fenêtre en utilisant margin: 0 auto; . Ajustez les valeurs en fonction de vos besoins spécifiques.