Étape 2 - CSS

À quoi sert CSS ?

CSS sert à contrôler l’apparence d’une page HTML. Il permet de définir la couleur du texte, les fonds, les marges, les bordures, la taille des images, l’alignement et la disposition des éléments.

Le navigateur lit d’abord le HTML pour comprendre la structure, puis il applique le CSS pour afficher cette structure avec une mise en forme.

Syntaxe générale du CSS

Une règle CSS contient un sélecteur, puis une ou plusieurs déclarations.

sélecteur {
    propriété: valeur;
}

Sélecteur : indique quels éléments HTML sont visés.
Propriété : indique ce que l’on veut modifier. Exemple : color, padding, border.
Valeur : indique le réglage choisi. Exemple : blue, 20px, center.

Sélecteurs CSS utiles

Le sélecteur est la partie qui dit “je veux appliquer ce style à ces éléments”. Pour ce TP, quatre types de sélecteurs suffisent.

Sélectionner directement une balise HTML : ici, tous les paragraphes <p> de la page sont visés.

p {
    color: #1f2937;
}

Sélectionner une classe : le point . cible tous les éléments qui ont class="card".

.card {
    background: white;
}

Sélectionner un id : le # cible un élément unique qui a id="main-title".

#main-title {
    text-align: center;
}

Sélectionner un élément enfant : .card .title cible les éléments title qui sont à l’intérieur d’un élément card.

.card .title {
    font-size: 1.4rem;
}

Utiliser une pseudo-classe : :hover applique un style quand la souris passe sur l’élément.

.button:hover {
    background: #1d4ed8;
}

Priorité des règles

Si plusieurs règles CSS essaient de modifier la même propriété sur le même élément, le navigateur doit choisir laquelle appliquer.

Une règle plus précise gagne souvent. Un id est plus précis qu’une classe, et une classe est plus précise qu’un nom de balise.
À précision égale, la règle écrite plus bas peut prendre le dessus. L’ordre du fichier CSS compte.
Pour ce TP : utilise surtout des classes. C’est plus clair, plus réutilisable et moins bloquant que les ids.

Liens utiles

MDN - Mettre en forme le contenu avec CSS
Pour revoir les premières règles CSS.
MDN - Guide des sélecteurs CSS
Pour revoir les sélecteurs de balises, classes, ids et descendants.
MDN - Référence CSS
Pour rechercher une propriété CSS.

Objectif de l’étape

Tu vas transformer la structure HTML en une page agréable : mise en page centrée, cartes de jeux, images régulières, boutons visibles, formulaire lisible et grille responsive.

Consignes détaillées

Relier le fichier CSS.
Dans le <head> de chaque page HTML, ajoute un lien vers ton fichier CSS. rel="stylesheet" indique que le fichier est une feuille de style.
```
<link rel="stylesheet" href="style.css">
```
Créer une base globale.
box-sizing: border-box rend les dimensions plus faciles à comprendre : le padding et la bordure sont inclus dans la largeur totale.
```
* {
    box-sizing: border-box;
}
```
Sur body, utilise margin: 0 pour enlever la marge par défaut du navigateur, puis choisis une police et une couleur de fond.
```
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f7fb;
    color: #1f2937;
}
```
Styliser l’en-tête.
Le header doit être visible dès l’arrivée sur la page. background définit le fond, color définit la couleur du texte, padding ajoute de l’espace intérieur, et text-align centre le texte.
```
.page-header {
    background: #172033;
    color: white;
    padding: 48px 20px;
    text-align: center;
}
```
Centrer le contenu principal.
Une classe comme .container permet de limiter la largeur du contenu. max-width évite une ligne trop longue, et margin: 0 auto centre le bloc horizontalement.
```
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 32px 16px;
}
```
Préparer les boutons et liens importants.
display: inline-block permet de donner du padding à un lien. border-radius arrondit légèrement les angles. text-decoration: none retire le soulignement par défaut.
```
.button {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 8px;
    background: #2563eb;
    color: white;
    text-decoration: none;
}
```
Créer la grille des jeux.
display: grid permet de placer les cartes en colonnes. gap crée l’espace entre les cartes. repeat(auto-fit, minmax(...)) rend la grille responsive.
```
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
```
Transformer les articles en cartes.
background crée le fond, border donne une limite visible, border-radius adoucit les angles, padding ajoute de l’air, et box-shadow donne un léger relief.
```
.game-card {
    background: white;
    border: 1px solid #d7deea;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 14px 35px rgba(31, 41, 55, 0.12);
}
```
Rendre les images régulières.
width: 100% fait prendre toute la largeur de la carte. height fixe une hauteur commune. object-fit: cover remplit la zone sans déformer l’image.
```
.game-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
}
```
Mettre en avant la catégorie et la note.
Une petite étiquette rend la catégorie plus lisible. font-weight: bold met le texte en gras.
```
.tag {
    background: #dbeafe;
    color: #1d4ed8;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: bold;
}
```
Styliser les liens des cartes.
Le lien doit rester visible. Au survol, tu peux remettre un soulignement pour montrer qu’il est cliquable.
```
.card-link {
    color: #2563eb;
    font-weight: bold;
    text-decoration: none;
}

.card-link:hover {
    text-decoration: underline;
}
```
Ajouter un effet au survol des cartes.
transition rend le mouvement plus doux. transform: translateY(-4px) fait remonter légèrement la carte.
```
.game-card {
    transition: transform 180ms ease;
}

.game-card:hover {
    transform: translateY(-4px);
}
```
Styliser la page du formulaire.
Réutilise les mêmes styles de header, container et button. Pour le formulaire, display: grid et gap permettent d’espacer les champs régulièrement.
```
.game-form {
    display: grid;
    gap: 12px;
}
```
Rendre les champs lisibles.
width: 100% donne une largeur régulière. padding rend la saisie plus confortable. border rend le champ visible.
```
.game-form input,
.game-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #d7deea;
    border-radius: 8px;
}
```

Critères de réussite

La feuille CSS est liée aux deux pages HTML.
Le contenu principal est centré et ne colle pas aux bords de l’écran.
Les jeux ressemblent à des cartes visuellement séparées.
Les images ont une taille régulière.
Les liens et boutons sont visibles et réagissent au survol.
La grille passe en plusieurs colonnes sur grand écran et en une colonne sur petit écran.
La page du formulaire est cohérente avec la page principale.