CSS · Leçon 2

Couleurs, unités & texte

Les propriétés que tu utiliseras tous les jours : couleurs, tailles et typographie.

Écrire une couleur

Cinq façons d'écrire (presque) le même bleu :

Astuce Dans les outils du navigateur (F12), clique sur le petit carré de couleur à côté d'une valeur pour ouvrir un sélecteur. Avec hsl, change juste le 1er nombre (0 à 360) pour changer de teinte.

Les unités de taille

UnitéRelative à…Usage typique
pxrien (fixe)bordures, petits détails
%au parentlargeurs
remtaille de texte de la page (16px par défaut)textes, espacements ✅
emtaille de texte de l'élémentespacements liés au texte
vw / vh1 % de la largeur / hauteur de la fenêtresections plein écran

Redimensionne ta fenêtre : seules les barres en % et vw changent.

La typographie

Joue avec les réglages : le CSS correspondant s'écrit en dessous.

Le vif renard brun saute par-dessus le chien paresseux. La typographie, c'est l'art de rendre un texte agréable à lire.


      

    

    
Polices du web font-family liste des polices de secours, séparées par des virgules. Pour plus de choix, Google Fonts fournit une balise <link> à copier dans ton head.

  


  

    
Les fonds

    



    

  


  

    
À toi de jouer

    

      
La belle citation

      
    
        
  • .citation : police Georgia, serif, taille 24px, couleur #333, centrée, interligne 1.5.
    • 
        
  • .auteur : en majuscules, espacement des lettres 2px, couleur gray, centré.
    • 
      

      



      

      
IndiceUne consigne = une propriété : police → font-family, taille → font-size, couleur → color, alignement → text-align, interligne → line-height.

      
IndicePour .auteur : majuscules → text-transform: uppercase, espacement des lettres → letter-spacing: 2px.

      
IndiceLa règle .citation complète :
.citation {
  font-family: Georgia, serif;
  font-size: 24px;
  color: #333;
  text-align: center;
  line-height: 1.5;
}


    


    

      
Le bandeau dégradé

      
    
        
  • Le header a un fond en dégradé linéaire (les couleurs de ton choix).
    • 
        
  • Son texte est blanc (white) et centré.
    • 
        
  • Le titre fait 3rem.
    • 
      

      



      

      
IndiceUn dégradé se met dans background : linear-gradient(couleur1, couleur2).

      
IndiceMets color: white et text-align: center sur header : le titre et le paragraphe en héritent.

      
IndicePour la taille du titre, il faut une deuxième règle :
header {
  background: linear-gradient(tomato, gold);
  ...
}
header h1 {
  font-size: 3rem;
}


    

  


  

    
À retenir