Introduction au CSS

Introduction

Bienvenue dans cette première section de notre cours sur les algorithmes dédié aux experts du web. Avant de plonger dans des concepts plus avancés, faisons un rappel sur les fondamentaux du CSS, un langage essentiel pour la mise en page et la stylisation des pages web.

CSS : Qu'est-ce que c'est ?

Le CSS, ou Cascading Style Sheets, est un langage de style utilisé pour définir la présentation d'un document écrit en HTML ou XML. Il permet de décrire comment les éléments HTML doivent être affichés à l'écran, sur papier, ou autre support.

Pourquoi le CSS est-il essentiel ?

Le CSS est essentiel pour plusieurs raisons :

1. Séparation des préoccupations : Il permet de séparer la structure du document (HTML) de sa présentation, offrant une modularité accrue dans le développement web.

2. Consistance visuelle : Le CSS assure une consistance visuelle sur l'ensemble du site en appliquant des styles cohérents à tous les éléments.

3. Adaptabilité : Les médias queries permettent de créer des mises en page adaptatives, garantissant une expérience utilisateur optimale sur différents dispositifs.

Syntaxe de base du CSS

La syntaxe du CSS est relativement simple. Chaque règle se compose d'un sélecteur et d'un bloc de déclarations. Les déclarations sont composées d'une propriété et de sa valeur.

/* Sélecteur */
body {
    /* Propriété: Valeur */
    font-family: 'Arial', sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
}

Exemples pratiques

1. Style de texte

Stylisons le texte du corps (body) d'une page web.

body {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;
    line-height: 1.6;
}

• Explication :
  • font-family: Définit la famille de polices.
  • font-size: Détermine la taille du texte.
  • color: Spécifie la couleur du texte.
  • line-height: Contrôle la hauteur de ligne pour une lisibilité optimale.

2. Mise en page responsive

Ajoutons une règle pour rendre la mise en page adaptative à différentes tailles d'écrans.

@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

• Explication :
  • @media: Indique le début d'une règle de média query.
  • screen: Spécifie que la règle s'applique aux écrans.
  • (max-width: 600px): Limite la règle aux écrans d'une largeur maximale de 600 pixels.
  • body: Sélectionne l'élément body.
  • font-size: Ajuste la taille du texte pour les écrans plus petits.

Conclusion

En conclusion, le CSS est un langage fondamental du développement web, offrant des fonctionnalités essentielles pour la présentation des pages. Maîtriser ses concepts de base est crucial pour créer des interfaces utilisateur attrayantes, cohérentes et adaptables à divers contextes. Dans les sections suivantes, nous explorerons des aspects plus avancés du CSS et son intégration avec d'autres technologies du web.