Objectif de la séance : Comprendre comment appliquer des styles au texte en utilisant à la fois les balises HTML et les règles CSS.
Les feuilles de style en cascade, communément appelées CSS (Cascading Style Sheets), constituent un élément fondamental de la conception web moderne. Elles permettent de contrôler l'apparence visuelle des pages HTML en séparant le contenu structurel du contenu visuel. Grâce à CSS, vous pouvez apporter une touche d'esthétique et d'organisation à vos pages web, en définissant les couleurs, les polices, les marges, les bordures et bien plus encore.
Composantes d'une Règle CSS
Une règle CSS est constituée de trois composantes essentielles : le sélecteur, les propriétés et les valeurs. Le sélecteur identifie les éléments HTML auxquels vous souhaitez appliquer les styles. Les propriétés déterminent les aspects spécifiques de l'apparence que vous souhaitez modifier, tels que la couleur du texte ou la taille de la police. Enfin, les valeurs sont les paramètres précis que vous attribuez à ces propriétés.
Utilisation de CSS pour Définir l'Apparence du Contenu HTML
CSS est utilisé pour contrôler l'aspect visuel de votre contenu HTML de manière cohérente et centralisée. Plutôt que de définir les styles directement dans chaque balise HTML, vous créez des règles CSS distinctes qui sont ensuite appliquées à l'ensemble des éléments sélectionnés par les sélecteurs.
Prenons un exemple concret. Supposons que vous souhaitiez que tous les titres de niveau 1 (<h1>) sur votre site aient une couleur rouge et une taille de police plus grande. Plutôt que de modifier chaque balise <h1> individuellement, vous pouvez définir une règle CSS comme celle-ci :
h1 {
color: red;
font-size: 24px;
}
Maintenant, tous les titres de niveau 1 seront automatiquement stylisés selon les propriétés et les valeurs que vous avez définies dans la règle CSS.
L'inclusion de feuilles de style CSS dans un document HTML est une étape clé pour appliquer des styles visuels à votre contenu. Cette approche de séparation des préoccupations permet de maintenir une distinction claire entre la structure du contenu et sa présentation, facilitant ainsi la personnalisation et les mises à jour ultérieures. Il existe plusieurs méthodes pour inclure des feuilles de style CSS dans un fichier HTML.
Balise <link> :
L'une des méthodes les plus courantes pour inclure une feuille de style CSS est d'utiliser la balise <link> dans la section <head> du document HTML. Cette méthode permet de lier une feuille de style externe au fichier HTML. Voici comment cela fonctionne :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Votre contenu HTML ici -->
</body>
</html>
Dans cet exemple, le lien vers la feuille de style "styles.css" est établi via la balise <link>. Cela signifie que les règles CSS définies dans "styles.css" s'appliqueront à l'ensemble du contenu HTML de la page.
Balise <style> :
Une autre approche consiste à incorporer directement les règles CSS dans la balise <style> à l'intérieur de la section <head>. Cette méthode est souvent utilisée pour des styles spécifiques à une seule page, ou pour des ajustements rapides. Voici un exemple :