9-1 Première page avec CSS
Intégrons du CSS à une page et découvrons les bases!
Dans ce petit tutoriel, nous ajouterons des styles de base à une page existante. Nous verrons les différentes façons d'intégrer du style et passerons rapidement à la méthode d'intégration externe (fichier css indépendant).
Structure et contenu de base
Premièrement, créez un nouveau fichier index.html dans un nouveau dossier et utilisez ce code HTML de départ.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mes jeux vidéos classiques</title>
</head>
<body>
<header id="header">
<h1>Mes jeux vidéos classiques</h1>
<p>Voici une liste composée de certains de mes jeux vidéos favoris!</p>
</header>
<section id="liste-jeux">
<div class="jeu meilleur">
<h2>The Legend of Zelda: Ocarina of Times (1998)</h2>
<p><span class="plateforme">Plateforme: </span> Nintendo 64</p>
<p class="description">Considéré comme l'un des plus grands jeux vidéo de tous les temps, Ocarina of Time suit Link dans sa quête pour sauver Hyrule du mal incarné par Ganondorf. Le jeu révolutionne la série Zelda en passant à la 3D, introduisant un système de ciblage (Z-targeting) qui devient la norme pour les jeux d'action 3D.</p>
</div>
<div class="jeu">
<h2>Space Quest 6: Roger Wilco in The Spinal Frontier (1995)</h2>
<p><span class="plateforme">Plateforme: </span> PC (DOS/Windows)</p>
<p class="description">Le dernier épisode de la série Space Quest des studios Sierra, ce jeu suit les mésaventures de Roger Wilco, concierge spatial devenu héros malgré lui. Dans cet épisode, Roger doit sauver sa partenaire Beatrice Creakknee Wankmeister qui a été miniaturisée et injectée dans son propre corps !</p>
</div>
<div class="jeu">
<h2>Super Mario Kart (1992)</h2>
<p><span class="plateforme">Plateforme: </span> Super Nintendo</p>
<p class="description">Le tout premier jeu de la série Mario Kart qui établit la formule magique: courses de kart avec les personnages de l'univers Mario, circuits colorés, et objets délirants. Utilise la puce Super FX pour créer un effet de pseudo-3D révolutionnaire sur SNES.</p>
</div>
</section>
</body>
</html>
Intégrer du style
Pour intégrer du style dans la page, nous avons essentiellement trois options:
- Balise
<style>dans la sectionheaddu site - Style appelé "inline" à même les balises
- Fichier CSS externe (recommandé)
Utiliser la balise style
Commençons par utiliser la balise <style> dans le head du site.
-
Ajoutez la balise
<style>de cette façon:<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mes jeux vidéos classiques</title>
<style>
</style>
</head>
<!-- ... -->infoLa balise
stylepermet d'intégrer du CSS à même la page. Cette balise doit être ajoutée à l'en-tête du site, soit à l'intérieur de<head>. -
Nous allons modifier la couleur d'arrière-plan du site. Pour cela, nous allons cibler l'élément
bodyet changer sa propriétébackground-color.<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mes jeux vidéos classiques</title>
<style>
body {
background-color: aliceblue;
}
</style>
</head>infoUne règle CSS comprend:
- Un sélecteur: l'élément ou les éléments à cibler (
bodyici). Il est possible de cibler un élément par:Élément (balise):h1,p,divClasse:.ma-classeID:#mon-id
- Les accolades (
{}) pour délimiter les attributs à modifier - Les propriétés à modifier sous la forme
[propriété]: [valeur];
Ici, on modifie la propriété
background-color. Il existe plusieurs formats de couleur:- RGB
- Hexadécimal
- Nom (ex.: red, blue, aliceblue, etc)
Nous verrons ces différentes façons de désigner des couleurs bientôt.
- Un sélecteur: l'élément ou les éléments à cibler (
Votre page devrait maintenant avoir un arrière-plan bleuté!
Cette façon d'intégrer du CSS est difficile à réutiliser. En effet, si je veux mettre l'arrière-plan de cette couleur sur plusieurs pages, je dois répéter cette balise (copier-coller!).
Utiliser la propriété style directement sur l'élément
Une façon alternative est de spécifier les valeurs CSS directement sur l'élément désiré. Par exemple:
<!-- ... -->
<body style="background-color: red;">
<!-- ... -->
Remarquez que votre arrière-plan sera maintenant rouge! Vous avez défini la même règle à deux endroits et c'est style sur l'élément qui l'a emporté. C'est ce qu'on appelle la spécificité: certaines règles ou certaines façons de déclarer les règles CSS l'emportent sur d'autres.
Utiliser un fichier externe (RECOMMANDÉ!)
La méthode recommandée est cependant d'utiliser un fichier CSS distinct pouvant être réutilisé sur plusieurs pages.
Ajoutons un fichier CSS à notre structure de fichier pour y contenir les styles du site web.
-
**Créez un dossier
styles**au même niveau que votre fichierindex.html
-
Ajoutez un fichier
app.csssous le dossierstyles
infoLe fichier a été nommé
app.csscomme dans "application", soit le style de l'application. -
Faire un lien entre votre fichier
HTMLetCSS. Pour queindex.htmlpuisse faire usage deapp.css, on doit les lier ensemble via la baliselink. Ajoutez la référence dans la portionheadde votre fichierindex.html:index.html<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles/app.css">
<title>Mes jeux vidéos classiques</title>infoLa balise
<link>permet de faire un lien vers une ressource externe et de l'inclure dans la page comme si elle en faisait partie intégrale.L'attribut
relindique quelle est la relation entre le document HTML et la ressource liée, c'est-à-dire que le type de contenu à charger est une feuille de style.L'attribut
hrefspécifie où trouver le fichier CSS. Il est possible de préciser des chemins autant relatifs que absolus. -
Écrire la règle CSS pour la couleur de l'arrière-plan dans le fichier
app.cssstyles/app.cssbody {
background-color: aliceblue;
} -
Assurez-vous de retirer le style "inline" et aussi dans l'en-tête pour qu'il ne vous reste que ceci.
index.html<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles/app.css">
<title>Mes jeux vidéos classiques</title>
</head>
<body>
Votre arrière-plan devrait être bleu maintenant et ce style provient de app.css! 🎉
Styliser l'en-tête avec un id
Si vous remarquez, l'en-tête du site a le id header.
<header id="header">
Pour cibler un élément par id en CSS, on précède le id en question d'un # (C'est un peu comme le mécanisme d'ancres dans les liens en HTML).
-
Ajoutez une nouvelle règle dans votre fichier CSS pour cibler l'élément avec le id
headerbody {
background-color: aliceblue;
}
#header {
} -
Modifions la couleur d'arrière-plan
body {
background-color: aliceblue;
}
#header {
background-color: rgb(33,33,33);
}infoIci, j'ai utilisé le format
rgb! Ce dernier prend trois niveaux de couleur entre 0 et 255:- Red (rouge)
- Green (vert)
- Blue (bleu)
Une couleur est formée à partir de ces trois paramètres.
Nous verrons dans la section sur les couleurs les différents formats de couleur.
-
Modifions la couleur du texte à l'intérieur de l'en-tête avec
color.body {
background-color: aliceblue;
}
#header {
background-color: rgb(33,33,33);
color: rgb(255,255,255);
}infoLa propriété
colorcontrôle la couleur du texte à l'intérieur d'un élément.
À cette étape-ci, vous devriez avoir quelque chose comme ceci:
Cibler une classe CSS
Si vous remarquez, les jeux ont tous la même classe CSS:
<div class="jeu">
Une classe CSS est un identifiant que vous appliquez à un ou plusieurs éléments HTML pour leur associer des styles CSS communs
Via une règle CSS, on peut cibler les éléments portant cette classe et tous les modifier en même temps!
Pour cibler une classe en CSS, on utilise le . suivi du nom de la classe.
-
Ajoutez une règle CSS pour cibler la classe
jeubody {
background-color: aliceblue;
}
#header {
background-color: rgb(33,33,33);
color: rgb(255,255,255);
}
.jeu {
} -
Ajoutons une règle pour appliquer une bordure de couleur à l'aide de
borderbody {
background-color: aliceblue;
}
#header {
background-color: rgb(33,33,33);
color: rgb(255,255,255);
}
.jeu {
border: 2px solid rgb(220, 220, 180)
}infoNous verrons le tout plus en détail prochainement, mais une bordure prend trois valeurs:
[épaisseur][type]couleur
Ici, on crée une bordure de 2 pixels de large, solide (pas de pointillé) et de couleur
rgb(220, 220, 180)
Vous devriez maintenant avoir une bordure autour de chaque élément de jeu! 🎉
Tester la spécificité
Il existe plusieurs façons de cibler des éléments de façon plus précise. De plus, il est possible d'écraser une règle CSS par une autre en étant plus précis au niveau de notre sélecteur.
Plusieurs classes
Remarquez le premier jeu ayant deux classes CSS:
<div class="jeu meilleur">
Il a une classe jeu et une classe meilleur. Il est possible de cibler cet élément précisément (ayant les deux classes!) de cette façon:
body {
background-color: aliceblue;
}
#header {
background-color: rgb(33,33,33);
color: rgb(255,255,255);
}
.jeu {
border: 2px solid rgb(220, 220, 180)
}
.jeu.meilleur {
border: 2px solid red;
}
Remarquez que comme cette règle est plus spécifique que juste jeu, elle vient remplacer la règle précédente de bordure et le jeu portera maintenant une bordure rouge!
Spécificité élément vs classe
De façon similaire, on pourrait donner un style à tous les p, mais préciser un style différent pour la classe description. Même si cette dernière est appliquée sur un p, comme la classe est plus précise, c'est cette dernière qui aura priorité!
p {
font-style: italic;
}
.description {
font-style: normal;
}
Spécificité hiérarchique
De la même façon, on pourrait cibler précisément le p dans header même si ce dernier n'a pas de classe à proprement dit.
#header p {
color: blanchedalmond;
font-style: normal;
}
Cela aura pour effet d'être appliqué seulement sur le p de l'en-tête, en plus d'écraser la règle générique sur p!
Pour cibler un élément à l'intérieur d'un autre, on combine les sélecteurs, séparés par des espaces.
Résultat final
Vous devriez avoir un résultat ressemblant à ceci: