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.
Quelques balises à connaître :
class: Attribut qui peut être ajouté à n'importe quelle balise HTML pour la cibler avec CSS.id: Attribut qui peut être ajouté à n'importe quelle balise HTML pour la cibler avec CSS. Contrairement àclass,iddoit être unique sur la page.style: Balise qui peut être ajoutée dans la balise<head>pour inclure du CSS dans la page HTML.
Test de mémorisation/compréhension
Exercice de mise en forme CSS
Pour ce TP, vous allez ajouter des couleurs à votre page de présentation du jeu vidéo.
-
Vous allez créer une feuille de style CSS pour changer la couleur de fond de la page, la couleur et la taille du texte, et l'espacement entre les éléments.
Voici une proposition de feuille de styles :
body {
background-color: #f9e4b7;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 80%;
background-color: #f6d186;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-top: 20px;
margin-bottom: 20px;
}
.titre-jeu {
color: #e85d04;
font-size: 2em;
text-align: center;
}
section {
margin-bottom: 20px;
}
footer {
color: #e85d04;
text-align: center;
padding: 10px;
} -
N'oubliez pas d'ajouter des classes ou des ID à vos balises HTML pour cibler les éléments avec votre CSS.
Une solution
<!DOCTYPE html>
<html>
<head>
<title>Mon jeu vidéo préféré</title>
<style>
body {
background-color: #f9e4b7;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 80%;
background-color: #f6d186;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-top: 20px;
margin-bottom: 20px;
}
.titre-jeu {
color: #e85d04;
font-size: 2em;
text-align: center;
}
section {
margin-bottom: 20px;
}
footer {
color: #e85d04;
text-align: center;
padding: 10px;
}
</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>
<div class="container">
<section>
<h2>A propos du jeu</h2>
<p>The Legend of Zelda: Breath of the Wild est un jeu d'aventure qui vous permet de parcourir un monde ouvert fantastique, de résoudre des énigmes et de combattre des ennemis pour sauver le royaume d'Hyrule.</p>
</section>
<section>
<h2>Pourquoi j'aime ce jeu</h2>
<p>Ce que j'aime dans ce jeu, c'est la liberté qu'il offre. Vous pouvez explorer le monde à votre rythme, découvrir de nouveaux lieux, résoudre des énigmes et vous immerger dans l'histoire. De plus, les graphismes sont magnifiques et la bande sonore est fantastique.</p>
</section>
</div>
<footer>
<p>Contactez-moi à monadresse@email.com</p>
</footer>
</body>
</html>