Les feuilles de style en cascade (CSS) servent à appliquer des styles aux éléments HTML. Les règles CSS se composent d'un sélecteur et de déclarations contenant des paires propriété-valeur.
Exemple de base :
<head>
<meta charset="utf-8">
<title>Démonstration CSS</title>
<style>
.titre-bleu {
color: #0000FF;
font-size: 100px;
}
</style>
</head>
<body>
<h1 class="titre-bleu">Bonjour le monde !</h1>
</body>
Dans cet exemple, .titre-bleu est le sélecteur de classe, et color et font-size sont des propriétés avec leurs valeurs.
Types de sélecteurs
Les sélecteurs CSS se divisent en sélecteurs simples et composés. Les sélecteurs simples incluent les sélecteurs de balise, de classe, d'ID et universel.
Sélecteur de balise : cible tous les éléments d'un type spécifique.
Exemple :
<style>
paragraphe {
color: green;
font-size: 16px;
}
</style>
Sélecteur de classe : commence par un point suivi du nom de la classe. Les éléments l'utilisent via l'attribut class.
Exemple :
<style>
.mise-en-evidence {
font-weight: bold;
}
</style>
<body>
<p class="mise-en-evidence">Texte important</p>
<p>Texte ordinaire</p>
</body>
Sélecteur d'ID : commence par un dièse (#) suivi de l'identifiant. L'ID doit être unique dans le document HTML.
Exemple :
<style>
#contenu-principal {
background-color: yellow;
}
</style>
<body>
<div id="contenu-principal">Zone mise en avant</div>
</body>
Sélecteur universel : applique le style à tous les éléments de la page.
Exemple :
<style>
* {
margin: 0;
padding: 0;
}
</style>
Propriétés typographiques en CSS
Les propriétés de police contrôlent l'apparence du texte.
font-family : définit la police de caractères. Plusieurs polices peuvent être spécifiées, séparées par des virgules, avec la première disponible utilisée par le navigateur. Les noms contenant des espaces doivent être entre guillemets.
Exemple :
<style>
.texte-sans-serif {
font-family: "Segoe UI", Arial, sans-serif;
}
.texte-serif {
font-family: Georgia, serif;
}
</style>
font-size : règle la taille du texte, souvent en pixels (px).
Exemple : font-size: 18px;
font-weight : gère l'épaisseur de la police. Les valeurs incluent normal, bold, lighter, ou un nombre de 100 à 900.
Exemple : font-weight: 600; est similaire à bold.
font-style : définit le style du texte, comme normal ou italic pour l'italique.
Exemple : font-style: italic;
La propriété raccourcie font combine plusieurs propriétés de police en une seule déclaration pour simplifier le code.