Un peu de couleurs
Le langage CSS sera étudié plus en détails dans un autre tutoriel
Notions théoriques
Le CSS (Cascading Style Sheets), est un langage utilisé pour mettre en forme les documents HTML.
Avec le CSS, vous pouvez contrôler l'apparence de votre site Web, y compris les couleurs, la taille et le type de police, l'espacement entre les éléments, et bien plus encore.
Nous devons toujours séparer le contenu (HTML) de la présentation (CSS). C'est une bonne pratique car elle rend notre code plus facile à maintenir et à comprendre. De plus, cela nous permet de changer l'apparence de notre site sans toucher à notre HTML.
Pour utiliser le CSS nous devons :
-
ajouter un attribut de classe ou d'ID à la balise HTML,
Exemple
<h1 class="titre-jeu">
Mon jeu vidéo préféré : The Legend of Zelda: Breath of the Wild
</h1> -
créer une règle CSS dans un fichier CSS (ou dans une balise
<style></style>
dans le fichier HTML).Exemple
.titre-jeu {
color: green;
}
Exemple pratique
Pour illustrer cela, prenons l'exemple de notre page de présentation du jeu vidéo. Nous allons ajouter une classe à notre titre et changer sa couleur en vert.
<!DOCTYPE html>
<html>
<head>
<title>Mon jeu vidéo préféré</title>
<style>
.titre-jeu {
color: green;
}
</style>
</head>
<body>
<header>
<h1 class="titre-jeu">Mon jeu vidéo préféré : The Legend of Zelda: Breath of the Wild</h1>
</header>
<!-- ... -->
</body>
</html>
Dans cet exemple, nous avons ajouté une classe "titre-jeu" à notre balise
<h1>
. Ensuite, nous avons créé une règle CSS pour cibler cette classe et changer la couleur du texte en vert.