Syntaxe de base du CSS

3.1 Règles (Rules)

Les éléments principaux du CSS incluent les règles (rules), les propriétés (properties) et les valeurs (values). Comprendre la syntaxe de base du CSS est la clé pour créer des pages web attrayantes et fonctionnelles.

Éléments principaux du CSS :

• Règles (Rules)
• Sélecteurs (Selectors)
• Propriétés (Properties)
• Valeurs (Values)

Règles (Rules)

Les règles CSS sont composées d'un sélecteur et d'un bloc de déclarations. Le sélecteur indique à quels éléments HTML les styles seront appliqués, et le bloc de déclarations contient une ou plusieurs propriétés et leurs valeurs. Il se compose généralement d'une ou plusieurs propriétés et valeurs, enfermées entre accolades {}.

Exemple :

    
      sélecteur {
        propriété: valeur;
        propriété: valeur;
      }
    
  

Exemple pour un titre :

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

Dans cet exemple, h1 est le sélecteur, color et font-size sont les propriétés, et blue et 24px sont les valeurs de ces propriétés.

3.2 Propriétés et valeurs

Le CSS offre un large éventail de propriétés que tu peux utiliser pour gérer l'apparence des éléments. Chaque propriété a une ou plusieurs valeurs qui déterminent comment cette propriété sera appliquée.

Principales propriétés et leurs valeurs :

Couleur et fond :

• color : définit la couleur du texte
• background-color : définit la couleur de fond de l'élément

Exemple :

    
      div {
        color: red;
        background-color: yellow;
      }
    
  

Police :

• font-family : définit la famille de polices
• font-size : fixe la taille de la police
• font-weight : détermine l'épaisseur de la police

Exemple :

    
      h1 {
        font-family: 'Georgia', serif;
        font-size: 36px;
        font-weight: bold;
      }
    
  

Texte :

• text-align : aligne le texte à l'intérieur de l'élément
• text-decoration : ajoute des effets au texte, comme le soulignement

Exemple :

    
      a {
        text-align: left;
        text-decoration: none;
      }
    
  

Marges et bordures :

• margin : définit les marges externes autour de l'élément
• padding : définit les marges internes à l'intérieur de l'élément
• border : détermine la bordure de l'élément

Exemple :

    
      .container {
        margin: 0 auto;
        padding: 20px;
        border: 2px solid #000000;
      }
    
  

Dimensions et positionnement :

• width et height : définissent la largeur et la hauteur de l'élément
• position : détermine la méthode de positionnement de l'élément

Exemple :

    
      .box {
        width: 200px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 100px;
      }
    
  

Tu dois :

• retenir les propriétés standard des éléments
• retenir les valeurs standard de ces propriétés
• retenir les propriétés uniques de différents éléments
• comprendre comment ces propriétés fonctionnent en pratique
• comprendre comment ces propriétés s'influencent mutuellement.

Le mieux est de pratiquer – écris beaucoup de CSS et observe comment il fonctionne.