Guide complet de CSS

CSS, ou Cascading Style Sheets en anglais, est un langage de feuilles de style utilisé pour décrire la présentation d’un document écrit en HTML (HyperText Markup Language). Il permet de contrôler l’apparence visuelle des éléments d’une page web, tels que la couleur, la police, la taille, la disposition et d’autres aspects esthétiques. Comprendre en profondeur CSS peut être essentiel pour créer des sites web attrayants et fonctionnels. Voici un guide détaillé pour vous familiariser avec les principes fondamentaux de CSS et ses fonctionnalités avancées.

1. Syntaxe de base :

   • Les règles CSS sont composées de sélecteurs et de déclarations.
   • Un sélecteur identifie les éléments HTML auxquels s’appliquent les règles.
   • Les déclarations définissent le style de l’élément sélectionné.
   • Une déclaration se compose d’une propriété et de sa valeur, séparées par deux-points (:), et se termine par un point-virgule (;).
   • Exemple :

     cssCopy code
     h1 {
         color: blue;
         font-size: 24px;
     }
     

2. Sélecteurs :

   • Les sélecteurs peuvent être des balises HTML, des classes, des identifiants, des attributs, des pseudo-classes ou des pseudo-éléments.
   • Les sélecteurs universels (*) s’appliquent à tous les éléments de la page.
   • Exemples :
     • Sélecteur de balise :

       cssCopy code
       p {
           font-family: Arial, sans-serif;
       }
       

     • Sélecteur de classe :

       cssCopy code
       .important {
           font-weight: bold;
       }
       

     • Sélecteur d’identifiant :

       cssCopy code
       #header {
           background-color: gray;
       }
       

3. Propriétés courantes :

   • color : Définit la couleur du texte.
   • font-family : Spécifie la police de caractères.
   • font-size : Définit la taille de la police.
   • background-color : Définit la couleur d’arrière-plan.
   • margin et padding : Contrôlent l’espacement autour des éléments.
   • border : Définit les propriétés de la bordure.
   • width et height : Spécifient la largeur et la hauteur des éléments.

4. Classes et identifiants :

   • Les classes et les identifiants permettent de cibler des éléments spécifiques dans une page HTML.
   • Une classe est définie par un point (.) suivi du nom de la classe.
   • Un identifiant est défini par un dièse (#) suivi du nom de l’identifiant.
   • Exemples :

     htmlCopy code
     <div class="container">
         <p id="intro">Introductionp>
     div>
     

     cssCopy code
     .container {
         width: 80%;
         margin: 0 auto;
     }
     #intro {
         font-size: 20px;
     }
     

5. Feuilles de style externes et internes :

   • Les feuilles de style externes sont des fichiers CSS distincts liés aux documents HTML à l’aide de la balise .
   • Les feuilles de style internes sont incluses dans la section