Introduction à CSS pour le Style des Pages Web

CSS (Cascading Style Sheets) est un langage utilisé pour ajouter du style et améliorer l'attrait visuel des éléments HTML sur une page web. Il joue un rôle crucial dans l'amélioration de l'esthétique d'un site web, tout comme la décoration, la couleur des murs, le mobilier, le matériau du canapé, et la forme des fenêtres et des portes contribuent à l'apparence générale d'une maison.

Ajouter du CSS pour styliser le HTML

CSS nous permet de contrôler la présentation et la mise en page des éléments HTML, y compris les couleurs, les polices, l'espacement, et plus encore. Voici comment nous pouvons appliquer des styles CSS à nos éléments HTML :

Styles en ligne

En utilisant l'attribut style, nous pouvons appliquer des styles CSS directement aux éléments HTML individuels. Cette méthode est utile pour ajouter des styles rapides et ponctuels.

index.html

Styles Internes

Nous pouvons également inclure des styles CSS dans les balises <style> dans la section <head> du document HTML. Cette méthode est utile pour appliquer des styles à plusieurs éléments au sein du même document.

index.html

Feuilles de Style Externes

Pour des projets plus importants ou lorsque nous voulons réutiliser des styles sur plusieurs pages, il est courant d'utiliser des feuilles de style externes. Créez un fichier CSS séparé (par exemple, index.css) et liez-le au document HTML en utilisant la balise <link>.

Veuillez vérifier les fichiers index.html et index.css dans l'exemple.

index.html

index.css

Sélecteurs CSS

Les sélecteurs CSS ciblent les éléments HTML en fonction de critères tels que le type d'élément, la classe ou l'ID. Un sélecteur spécifie l'élément exact auquel des styles spécifiques doivent être appliqués.

Sélecteur d'Élément

Cible tous les éléments d'un type spécifique.

Sélecteur de Classe

Cible les éléments avec un attribut de classe spécifique.

Sélecteur d'ID

Cible un élément spécifique avec un attribut ID unique.

Propriétés CSS

Les propriétés CSS définissent comment les éléments sélectionnés doivent être stylisés. Voici quelques propriétés CSS courantes :

color définit la couleur du texte ;
background-color définit la couleur de fond d'un élément ;
font-size définit la taille du texte ;
margin ajoute l'espacement autour d'un élément.

Nous pouvons personnaliser l'apparence de la page web en appliquant des styles CSS aux éléments HTML pour créer des expériences visuellement attrayantes et conviviales.

Exemple :

index.html

index.css

Tutoriel Vidéo

Tout était clair ?

Merci pour vos commentaires !

Section 2. Chapitre 3