Styling avec CSS

Le CSS (Cascading Style Sheets) est utilisé pour styliser et mettre en page les éléments HTML, rendant votre site web visuellement attrayant et facile à utiliser. Voici comment appliquer des styles de base, utiliser Flexbox et Grid pour la mise en page, et ajouter des styles spécifiques pour les éléments de la liste et du formulaire.

Application des styles de base

Pour commencer, vous pouvez appliquer des styles de base à votre page pour définir la police, les couleurs, et les marges. Voici un exemple de styles de base :

body {
    font-family: Arial, sans-serif; /* Définit la police de tout le texte dans le body */
    background-color: #f4f4f9; /* Définit la couleur de fond de la page */
    margin: 0; /* Supprime les marges par défaut du body */
    padding: 20px; /* Ajoute un espace intérieur autour du body */
}

.container {
    max-width: 800px; /* Définit la largeur maximale du conteneur */
    margin: auto; /* Centre le conteneur horizontalement */
    background: #fff; /* Définit la couleur de fond du conteneur */
    padding: 20px; /* Ajoute un espace intérieur autour du contenu du conteneur */
    border-radius: 8px; /* Arrondit les coins du conteneur */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ajoute une ombre autour du conteneur */
}

Utilisation de Flexbox et Grid pour la mise en page

Flexbox et Grid sont des outils puissants pour créer des mises en page complexes et responsives.

• Flexbox : Idéal pour les mises en page en une dimension, comme les barres de navigation ou les petites composantes d'interface.

  .flex-container {
      display: flex; /* Active Flexbox */
      justify-content: center; /* Centre les éléments horizontalement */
      align-items: center; /* Centre les éléments verticalement */
      gap: 10px; /* Ajoute un espace entre les éléments */
  }
  

   

• Grid : Parfait pour les mises en page en deux dimensions, comme les grilles de cartes ou les galeries d'images.

  .grid-container {
      display: grid; /* Active Grid */
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Crée des colonnes flexibles */
      gap: 10px; /* Ajoute un espace entre les éléments de la grille */
  }
  

   

Ajout de styles pour les éléments de la liste et du formulaire

Pour styliser les éléments spécifiques comme la liste des aliments et le formulaire, vous pouvez ajouter des styles ciblés :

• Liste des aliments : Stylisez chaque élément de la liste pour qu'il soit visuellement distinct et attrayant.

  #foods-list {
      display: grid; /* Utilise Grid pour la mise en page */
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Crée des colonnes flexibles */
      gap: 10px; /* Ajoute un espace entre les éléments */
      margin-bottom: 20px; /* Ajoute un espace en bas de la liste */
  }
  
  .food-item {
      border: 1px solid #ddd; /* Ajoute une bordure autour de chaque élément */
      padding: 10px; /* Ajoute un espace intérieur autour du contenu */
      border-radius: 5px; /* Arrondit les coins de chaque élément */
      background: #f9f9f9; /* Définit la couleur de fond de chaque élément */
      text-align: center; /* Centre le texte dans chaque élément */
  }
  

   

• Formulaire : Stylisez le formulaire pour qu'il soit clair et facile à utiliser.

  #food-form {
      display: flex; /* Utilise Flexbox pour la mise en page */
      flex-direction: column; /* Dispose les éléments en colonne */
      gap: 10px; /* Ajoute un espace entre les éléments */
  }
  
  #food-form input, #food-form button {
      width: 100%; /* Définit la largeur des champs et du bouton à 100% du conteneur */
      padding: 10px; /* Ajoute un espace intérieur autour du texte */
      border: 1px solid #ddd; /* Ajoute une bordure autour des champs et du bouton */
      border-radius: 5px; /* Arrondit les coins des champs et du bouton */
  }
  
  #food-form button {
      background-color: #007BFF; /* Définit la couleur de fond du bouton */
      color: white; /* Définit la couleur du texte du bouton */
      border: none; /* Supprime la bordure du bouton */
      cursor: pointer; /* Change le curseur en pointeur au survol du bouton */
  }
  
  #food-form button:hover {
      background-color: #0056b3; /* Change la couleur de fond du bouton au survol */
  }
  

   

En appliquant ces styles, vous pouvez créer une interface utilisateur attrayante et fonctionnelle qui améliore l'expérience utilisateur de votre application web. Ces techniques de styling vous aideront à structurer et à organiser votre contenu de manière efficace et esthétique.