PhpBB Lab Académie

Finaliser le même petit site en rendant l’image plus souple, en protégeant le tableau lorsque l’espace horizontal devient insuffisant et en vérifiant le focus clavier, le zoom, le reflow et l’ordre logique. Terminer ensuite le cours CSS en faisant le bilan des notions acquises, expliquer pourquoi l’étude de CSS ne peut pas être exhaustive dans un seul cours et préparer la continuité du fil rouge avec un cours complet sur PHP.

Avant de commencer

Nous arrivons à la dernière leçon du cours CSS.

Depuis la première leçon, nous avons toujours travaillé sur le même petit site :

mon-premier-site

index.html
apropos.html
contact.html
ordinateur.jpg
styles.css

Nous sommes partis d’un site HTML correctement structuré.

Puis nous avons ajouté progressivement :

- une feuille de style externe ;
- des sélecteurs ;
- des classes ;
- plusieurs déclarations par règle ;
- une typographie commune ;
- des couleurs et des contrastes vérifiés ;
- des espacements ;
- le modèle de boîte ;
- des dimensions adaptables ;
- l’héritage ;
- la cascade ;
- la spécificité ;
- Flexbox pour la navigation ;
- Grid pour la page d’accueil ;
- une première media query.

Dans la leçon précédente, nous avons ajouté :

@media (max-width: 40rem) {
    .grille-accueil {
        grid-template-columns: 1fr;
    }
}

La grille peut donc passer explicitement sur une seule colonne lorsque l’espace devient plus étroit.

Mais deux contenus réels de notre page d’accueil demandent encore une vérification particulière :

ordinateur.jpg

et :

le tableau de la section Les pages de mon site

Nous allons les traiter avant de faire le bilan du cours.

Dans cette dernière leçon, nous allons répondre à quatre questions :

- Comment empêcher une image de dépasser son conteneur ?
- Comment conserver l’accès à un tableau lorsque l’espace devient insuffisant ?
- Quelles vérifications finales devons-nous effectuer sur le site ?
- Pourquoi le cours CSS s’arrête-t-il ici alors que CSS contient encore beaucoup d’autres possibilités ?

À la fin de la leçon, vous disposerez d’un petit site CSS cohérent, adaptable et vérifié, puis nous préparerons la suite logique du parcours avec un cours complet consacré à PHP.

1. Reprendre la section Mon espace de travail

Dans :

index.html

la section :

Mon espace de travail

contient :

<img src="ordinateur.jpg" alt="Ordinateur portable ouvert sur un éditeur de code">

Cette image possède déjà un texte alternatif adapté.

Nous n’allons pas modifier son rôle HTML.

Nous allons seulement contrôler sa présentation lorsque l’espace disponible devient plus petit.

2. Le problème d’une image plus large que son conteneur

Une image possède des dimensions intrinsèques.

Si sa largeur naturelle est plus importante que l’espace disponible dans sa section, elle peut dépasser visuellement de son conteneur.

Nous voulons éviter ce comportement.

Nous allons utiliser une propriété que vous connaissez déjà :

max-width

mais cette fois sur l’image.

3. Ajouter une règle pour les images

Dans

styles.css

, ajoutez un nouveau groupe :

/* Médias */

Puis écrivez :

img {
    max-width: 100%;
    height: auto;
}

Enregistrez puis actualisez :

index.html

L’image peut maintenant rester dans la largeur disponible de son conteneur.

4. Comprendre max-width: 100%

Dans :

max-width: 100%;

nous indiquons que l’image ne doit pas devenir plus large que :

100 % de la largeur disponible de son conteneur

Si l’image est naturellement plus petite, cette règle ne l’oblige pas à s’agrandir.

Nous pouvons retenir :

max-width: 100%;
= ne dépasse pas la largeur disponible

Cette propriété rend donc l’image plus souple.

5. Comprendre height: auto

Nous ajoutons également :

height: auto;

Cette valeur laisse le navigateur calculer automatiquement la hauteur en fonction de la largeur de l’image et de ses proportions intrinsèques.

Nous évitons ainsi de fixer indépendamment :

une largeur

et

une hauteur

qui pourraient déformer l’image.

Nous pouvons retenir :

max-width: 100%;
height: auto;

= image qui peut rétrécir sans être déformée

6. Tester l’image

Réduisez la largeur de la fenêtre.

Puis augmentez le zoom.

Observez :

ordinateur.jpg

dans :

Mon espace de travail

L’image doit pouvoir se réduire lorsque son conteneur devient plus étroit.

Elle ne doit pas dépasser horizontalement de la section.

7. Pourquoi utiliser une règle img générale ici ?

Notre petit site contient actuellement cette image informative.

La règle :

img {
    max-width: 100%;
    height: auto;
}

constitue une base utile pour les images du projet.

Nous ne lui donnons pas de couleur, de bordure ou de taille arbitraire.

Nous définissons seulement un comportement de dimensionnement souple.

Si un futur projet contenait une image qui devait avoir un comportement différent, nous pourrions utiliser une règle plus précise.

8. Reprendre la section Les pages de mon site

Nous allons maintenant regarder :

Les pages de mon site

Cette section contient le tableau :

Rôle des trois pages principales

avec trois colonnes :

Page

Fichier

Rôle

Sur une largeur confortable, le tableau ne pose pas de problème particulier.

Mais lorsque l’espace devient très étroit, ses colonnes peuvent manquer de place.

9. Le tableau doit rester un vrai tableau

Nous ne voulons pas supprimer :

table

caption

thead

tbody

th

td

simplement pour obtenir une présentation différente.

Le contenu reste tabulaire.

La structure HTML doit donc rester un vrai tableau.

Nous allons adapter sa présentation sans perdre cette structure.

10. Ajouter un conteneur autour du tableau

Dans

index.html

, repérez le tableau de :

Les pages de mon site

Ajoutez juste avant le tableau :

<div class="tableau-defilant">

Puis juste après :

</div>

La structure devient :

<div class="tableau-defilant">
    <table>
        ...
    </table>
</div>

Le tableau lui-même ne change pas.

Le

div

sert uniquement à contrôler le comportement de la zone lorsque le tableau devient plus large que l’espace disponible.

11. Ajouter la règle CSS

Dans

styles.css

, ajoutez :

.tableau-defilant {
    max-width: 100%;
    overflow-x: auto;
}

Nous avons maintenant une zone capable de gérer un débordement horizontal.

12. Comprendre overflow-x

La propriété :

overflow-x

contrôle ce qui se passe lorsqu’un contenu dépasse horizontalement la largeur disponible.

Nous utilisons :

overflow-x: auto;

Nous pouvons lire :

si un débordement horizontal apparaît,
permettre au navigateur de fournir un moyen de faire défiler cette zone

Nous évitons ainsi que le tableau force toute la page à devenir inutilement plus large.

13. Pourquoi utiliser auto ?

La valeur :

auto

signifie que le mécanisme de débordement n’est utilisé que lorsqu’il est nécessaire.

Si le tableau tient dans l’espace disponible, aucune adaptation particulière n’est requise.

Si le tableau devient plus large, la zone peut permettre un défilement horizontal.

Nous n’ajoutons donc pas un défilement permanent sans besoin.

14. Donner au tableau la largeur disponible

Ajoutez également :

table {
    width: 100%;
    border-collapse: collapse;
}

La propriété :

width: 100%;

demande au tableau d’utiliser la largeur disponible de son conteneur.

La propriété :

border-collapse: collapse;

permet aux bordures des cellules adjacentes d’être fusionnées si nous ajoutons des bordures aux cellules.

Nous n’allons pas transformer tout le tableau visuellement dans cette leçon.

Nous lui donnons seulement une base cohérente.

15. Permettre aux cellules de gérer les contenus longs

Ajoutez :

th,
td {
    overflow-wrap: anywhere;
}

La propriété :

overflow-wrap

permet au navigateur de couper une longue chaîne de caractères si cela devient nécessaire pour éviter un débordement.

La valeur :

anywhere

autorise une coupure lorsqu’aucune coupure naturelle suffisante n’existe.

Cette règle peut être utile pour des contenus comme :

apropos.html

ou d’autres chaînes plus longues dans un futur tableau.

16. Le défilement horizontal reste une solution de dernier recours local

Nous préférons que le contenu se réorganise et se mette à la ligne lorsque cela est possible.

Mais un tableau peut parfois avoir besoin de conserver plusieurs colonnes liées.

Le conteneur :

.tableau-defilant

nous permet alors de limiter le défilement horizontal à cette zone précise.

Nous ne voulons pas créer un défilement horizontal de toute la page.

Retenez :

si un élément complexe déborde,
mieux vaut contenir le problème localement
que casser toute la page

17. Tester le tableau

Réduisez la largeur de la fenêtre.

Puis augmentez le zoom.

Observez la section :

Les pages de mon site

Vérifiez :

- que le tableau reste présent ;
- que son

caption

reste associé au tableau ;
- que les en-têtes restent de vrais

th

;
- que les informations ne disparaissent pas ;
- que la page entière ne déborde pas horizontalement à cause du tableau.

Si un défilement horizontal local devient nécessaire, il doit rester limité au conteneur du tableau.

18. Ne pas transformer les cellules en simples blocs sans raison

Il existe des techniques CSS qui transforment visuellement chaque ligne d’un tableau en une sorte de carte.

Nous n’allons pas les introduire ici.

Notre tableau est simple et correctement structuré.

Nous voulons préserver les relations entre :

- les lignes ;
- les colonnes ;
- les en-têtes.

Nous adaptons donc la largeur sans réinventer sa structure.

19. Vérifier la media query

Nous conservons toujours :

@media (max-width: 40rem) {
    .grille-accueil {
        grid-template-columns: 1fr;
    }
}

Sous ce seuil :

- la grille passe à une colonne ;
- l’image peut se réduire avec

max-width: 100%;

;
- le tableau dispose de toute la largeur de sa section ;
- son conteneur peut gérer un éventuel débordement horizontal.

Plusieurs techniques travaillent donc ensemble.

20. Vérifier la navigation Flexbox

La navigation conserve :

.navigation-principale {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

Réduisez la largeur de la fenêtre.

Augmentez le zoom.

Vérifiez que :

Accueil
À propos
Contact

peuvent revenir sur plusieurs lignes sans changer leur ordre logique.

21. Vérifier le focus clavier

Nous allons maintenant faire une vérification finale importante.

Parcourez les liens et les contrôles de formulaire au clavier.

Vous devez toujours pouvoir repérer l’élément qui possède le focus.

Si le style du navigateur rend déjà ce focus clairement visible, ne le supprimez pas.

Nous allons toutefois ajouter une règle explicite pour garantir un repère visible sur les éléments courants du projet.

Ajoutez :

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid #163b65;
    outline-offset: 3px;
}

22. Comprendre :focus-visible

Le sélecteur :

:focus-visible

est une pseudo-classe.

Elle permet de cibler un élément lorsque le navigateur considère qu’un indicateur de focus visible est pertinent, notamment lors d’une navigation au clavier.

Nous l’utilisons ici sur :

a
button
input
textarea

qui existent déjà dans notre petit site.

Nous ne créons aucun nouvel élément uniquement pour la démonstration.

23. Comprendre outline

La propriété :

outline

dessine un contour autour de l’élément.

Nous utilisons :

outline: 3px solid #163b65;

Puis :

outline-offset: 3px;

éloigne légèrement ce contour de l’élément.

L’objectif n’est pas décoratif.

Le but est de rendre la position du clavier facile à repérer.

24. Ne jamais supprimer le focus sans remplacement

Vous rencontrerez parfois :

outline: none;

dans certains exemples CSS.

Ne supprimez pas l’indicateur de focus simplement parce qu’il vous semble peu esthétique.

Une personne qui navigue au clavier doit pouvoir savoir où elle se trouve.

Si vous remplacez l’indicateur natif, le nouveau style doit rester clairement visible.

Dans notre site, nous conservons donc un contour explicite.

25. Vérifier le formulaire de contact

Ouvrez :

contact.html

Parcourez :

- les champs du nom ;
- l’adresse e-mail ;
- le téléphone ;
- les boutons radio ;
- la zone de message ;
- la case à cocher ;
- le bouton d’envoi.

Vérifiez que le focus est visible.

Les labels restent associés aux champs comme dans le cours HTML.

CSS ne doit pas dégrader cette relation.

26. Vérifier le zoom et le reflow

Augmentez fortement le zoom.

Réduisez également la largeur de la fenêtre.

Sur :

index.html

vérifiez :

- que la grille passe correctement sur une colonne ;
- que l’image ne dépasse pas ;
- que le tableau reste accessible ;
- que les titres restent lisibles ;
- que le texte ne se superpose pas ;
- que la navigation peut revenir à la ligne.

Sur :

apropos.html

et :

contact.html

vérifiez que le texte et les contrôles restent utilisables.

27. Vérifier les couleurs et le contraste

Nous avons déjà construit une palette simple :

#1f2937
= texte courant

#ffffff
= arrière-plan général

#163b65
= titres et focus

#4c1d95
= nom du site

#f3f4f6
= arrière-plan des sections

Nous avons vérifié les principales paires de couleurs au moment où elles ont été introduites.

Si vous modifiez maintenant l’une de ces couleurs, vous devez refaire les vérifications de contraste concernées.

Ne considérez jamais une ancienne mesure comme valable après un changement de couleur ou d’arrière-plan.

28. Vérifier les trois pages comme un seul site

Ouvrez successivement :

index.html
apropos.html
contact.html

Ne les considérez plus comme trois exercices séparés.

Elles forment maintenant un petit site.

Vérifiez :

- la même navigation ;
- la même identité visuelle ;
- la même typographie ;
- la cohérence des titres ;
- le focus clavier ;
- le zoom ;
- la lecture des contenus ;
- les changements de page.

Le fil rouge du cours CSS est donc maintenant visible dans l’ensemble du projet.

29. Notre feuille CSS est devenue un vrai fichier de projet

Au début du cours,

styles.css

était vide.

Nous avons d’abord écrit :

h1 {
    color: darkblue;
}

Puis nous avons progressivement construit des règles pour :

- la base typographique ;
- les titres ;
- l’identité du site ;
- les sections ;
- la navigation ;
- la grille d’accueil ;
- les médias ;
- le tableau ;
- le focus ;
- l’adaptation aux espaces plus étroits.

Le fichier CSS n’est plus une suite d’exemples indépendants.

Il décrit réellement la présentation du petit site commencé dans le cours HTML.

30. Ce que vous savez maintenant réellement faire en CSS

Vous êtes maintenant capable de :

- créer une feuille CSS externe ;
- la relier à plusieurs pages ;
- écrire et lire une règle CSS ;
- utiliser des sélecteurs d’éléments et de classes ;
- ajouter plusieurs déclarations dans un bloc ;
- organiser une typographie cohérente ;
- utiliser des couleurs précises ;
- vérifier le contraste ;
- gérer les espacements ;
- comprendre le modèle de boîte ;
- gérer les dimensions ;
- comprendre l’héritage ;
- comprendre les bases de la cascade ;
- comparer la spécificité de sélecteurs simples ;
- utiliser Flexbox ;
- utiliser CSS Grid ;
- rendre certaines dispositions adaptables ;
- écrire une media query ;
- rendre une image plus souple ;
- gérer un tableau dans un espace étroit ;
- conserver un focus clavier visible.

Vous ne connaissez pas « tout CSS ».

Et c’est normal.

31. Pourquoi le cours CSS s’arrête ici

CSS est un langage très vaste.

Nous pourrions encore consacrer des chapitres entiers à :

- des sélecteurs plus avancés ;
- les pseudo-classes et pseudo-éléments ;
- les variables CSS ;
-

calc()

;
-

clamp()

;
- les transformations ;
- les transitions ;
- les animations ;
- les filtres ;
- les ombres ;
- les colonnes ;
- les modes d’écriture ;
- les propriétés logiques ;
- les requêtes de conteneur ;
- les couches de cascade ;
- les styles d’impression ;
- des fonctions de couleur plus avancées ;
- des mises en page beaucoup plus complexes.

Et cette liste ne représente encore qu’une partie de CSS.

Si nous essayions de transformer ce cours débutant en inventaire complet de tout ce qui existe dans CSS, il deviendrait interminable.

Ce n’est pas l’objectif.

32. L’objectif était de construire une base solide

Le but de ce cours était de vous donner une base qui permette de comprendre le langage et de continuer à apprendre sans recopier des propriétés au hasard.

Vous devez maintenant pouvoir regarder une règle comme :

.grille-accueil {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

et expliquer :

- quel élément elle cible ;
- ce que fait chaque propriété ;
- pourquoi elle se trouve dans le projet ;
- comment elle réagit lorsque l’espace change.

C’est beaucoup plus important que de mémoriser des centaines de propriétés.

33. CSS continuera à s’apprendre pendant vos futurs projets

Lorsque vous rencontrerez un nouveau besoin, vous pourrez apprendre une nouvelle propriété dans son contexte.

Par exemple :

Je veux créer une animation.

Vous pourrez alors étudier les animations.

Ou :

Je veux réutiliser une même valeur de couleur à plusieurs endroits.

Vous pourrez alors étudier les variables CSS.

Le langage restera vaste.

Mais vous disposerez maintenant des bases nécessaires pour comprendre ce que vous ajoutez à votre feuille.

34. Le prochain grand cours sera consacré à PHP

Le fil rouge ne s’arrête pas avec CSS.

Notre petit site contient déjà :

index.html
apropos.html
contact.html
ordinateur.jpg
styles.css

La page :

contact.html

possède notamment un vrai formulaire correctement structuré.

Mais ce formulaire ne traite encore aucune donnée sur un serveur.

Lorsque vous appuyez sur :

Envoyer le message

nous n’avons encore écrit aucun programme capable de :

- recevoir les données ;
- les vérifier côté serveur ;
- prendre une décision ;
- produire une réponse dynamique.

C’est là que PHP va entrer dans le parcours.

35. HTML, CSS et PHP auront chacun leur rôle

Nous pouvons maintenant résumer les deux premiers langages étudiés :

HTML
= structure et sens du contenu

CSS
= présentation du contenu

Le prochain cours complet ajoutera :

PHP
= logique exécutée côté serveur et génération de contenu dynamique

Nous ne demanderons pas à PHP de remplacer HTML ou CSS.

Chaque langage conservera son rôle.

36. Ce que le cours complet PHP pourra reprendre

Le futur cours PHP pourra repartir du même projet.

Nous pourrons progressivement apprendre à :

- écrire notre premier script PHP ;
- comprendre les variables ;
- utiliser des conditions ;
- travailler avec des tableaux ;
- utiliser des boucles ;
- créer des fonctions ;
- recevoir les données d’un formulaire ;
- valider les données côté serveur ;
- afficher des messages selon le résultat ;
- organiser plusieurs fichiers PHP ;
- comprendre les erreurs ;
- aller progressivement vers des données persistantes lorsque les notions nécessaires auront été étudiées.

Comme pour HTML et CSS, chaque nouvelle notion devra être expliquée avant d’être utilisée.

37. Le formulaire de contact devient notre prochain point de continuité

La page :

contact.html

constitue une transition naturelle.

Nous avons déjà construit les champs :

nom
email
telephone
contact-prefere
message
copie

Nous savons pourquoi ils existent et comment ils sont structurés.

Dans le cours PHP, nous pourrons reprendre ce formulaire pour apprendre progressivement ce qu’il se passe après l’envoi.

Nous n’aurons donc pas besoin d’abandonner le projet pour inventer un exercice sans rapport.

Le fil rouge pourra continuer.

38. Ce que vous devez conserver avant de commencer PHP

Ne supprimez pas :

index.html
apropos.html
contact.html
ordinateur.jpg
styles.css

Conservez également les modifications apportées pendant le cours CSS.

Ce petit site devient votre base de travail.

Lorsque le cours PHP commencera, nous pourrons décider progressivement quels fichiers doivent évoluer vers :

.php

et pourquoi.

Nous ne changerons pas les extensions de fichiers avant d’avoir expliqué ce que cela signifie.

39. Fin du cours CSS

Avant de considérer ce cours comme acquis, assurez-vous que vous pouvez :

relier une feuille CSS à plusieurs pages

écrire une règle sans recopier mécaniquement un modèle

expliquer sélecteur, propriété et valeur

utiliser classes et sélecteurs d’éléments

comprendre le modèle de boîte

expliquer héritage, cascade et spécificité à votre niveau actuel

choisir entre Flexbox et Grid selon un besoin réel

adapter une mise en page lorsque l’espace diminue

tester le zoom, le clavier et le focus

expliquer pourquoi HTML garde le sens et CSS la présentation

Si vous savez faire cela, vous possédez une base solide pour continuer à pratiquer CSS sans transformer ce cours en encyclopédie interminable.

Le prochain cours complet du parcours sera consacré à PHP.

Nous repartirons du même petit site et, cette fois, nous commencerons à lui donner une logique côté serveur.

À la fin du cours, quelques règles nouvelles peuvent compléter

styles.css

:

/* Médias */

img {
    max-width: 100%;
    height: auto;
}

.tableau-defilant {
    max-width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    overflow-wrap: anywhere;
}

/* Focus clavier */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid #163b65;
    outline-offset: 3px;
}

/* Adaptation aux espaces plus étroits */

@media (max-width: 40rem) {
    .grille-accueil {
        grid-template-columns: 1fr;
    }
}

Dans

index.html

, le tableau reste un vrai tableau et peut être entouré par :

<div class="tableau-defilant">
    <table>
        ...
    </table>
</div>

Nous finalisons ainsi le même site sans remplacer sa structure HTML.

Cette dernière activité reprend l’ensemble du petit site.

1. Rendre l’image souple

Dans

styles.css

, ajoutez :

img {
    max-width: 100%;
    height: auto;
}

Réduisez la largeur de la fenêtre et vérifiez

ordinateur.jpg

.

2. Entourer le tableau

Dans

index.html

, placez le tableau de

Les pages de mon site

dans :

<div class="tableau-defilant">
    ...
</div>

Ne modifiez pas la structure du tableau.

3. Ajouter les règles du tableau

Ajoutez :

.tableau-defilant {
    max-width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    overflow-wrap: anywhere;
}

4. Ajouter un focus visible

Ajoutez :

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid #163b65;
    outline-offset: 3px;
}

5. Tester les trois pages

Ouvrez :

index.html
apropos.html
contact.html

Testez :

- une largeur normale ;
- une fenêtre étroite ;
- un zoom important ;
- le clavier ;
- les liens ;
- les champs de formulaire.

6. Vérifier la page d’accueil

Contrôlez :

- la grille ;
- l’image ;
- le tableau ;
- les titres ;
- la navigation ;
- l’ordre logique.

7. Vérifier la page Contact

Parcourez tous les contrôles au clavier.

Vérifiez que le focus reste clairement visible.

8. Faire le bilan CSS

Sans regarder le récapitulatif, expliquez avec vos propres mots :

1. la différence entre HTML et CSS ;
2. le rôle d’un sélecteur, d’une propriété et d’une valeur ;
3. la différence entre

margin

et

padding

;
4. l’ordre contenu, padding, bordure, marge ;
5. la différence principale entre Flexbox et Grid dans notre projet ;
6. le rôle d’une media query ;
7. pourquoi le cours CSS s’arrête ici même si CSS contient encore de nombreuses autres notions.

9. Préparer PHP

Ouvrez :

contact.html

Repérez le formulaire et ses champs.

Ne modifiez encore rien.

Expliquez simplement ce qui manque aujourd’hui :

un traitement côté serveur

Ce sera le point de départ naturel du futur cours complet PHP.

Cette dernière leçon a finalisé l’adaptation du petit site.

Nous avons ajouté :

img {
    max-width: 100%;
    height: auto;
}

pour empêcher l’image de dépasser son conteneur,

un conteneur :

.tableau-defilant

avec :

overflow-x: auto;

pour gérer localement un éventuel manque de largeur du tableau,

et un style :

:focus-visible

pour conserver un repère clavier clairement visible.

Nous avons ensuite vérifié :

- le zoom ;
- le reflow ;
- le clavier ;
- le focus ;
- les trois pages ;
- la navigation ;
- la grille ;
- l’image ;
- le tableau.

Le cours CSS s’arrête ici volontairement.

CSS contient encore un très grand nombre de notions : animations, transitions, variables, fonctions, sélecteurs avancés, requêtes de conteneur, couches de cascade et beaucoup d’autres possibilités.

Vouloir tout intégrer dans un seul cours rendrait le parcours interminable.

L’objectif était de construire une base solide permettant de comprendre CSS et de continuer à apprendre de nouvelles notions au moment où un projet en a réellement besoin.

Le fil rouge va maintenant continuer avec PHP.

Nous conserverons le même petit site.

HTML continuera à décrire la structure.

CSS continuera à contrôler la présentation.

PHP ajoutera progressivement la logique côté serveur et permettra notamment de commencer à traiter le formulaire de

contact.html

.

Fin du cours CSS

Le prochain cours complet du parcours sera :

Apprendre le PHP

et reprendra le même projet, avec la même progression pédagogique et sans demander d’utiliser une notion avant de l’avoir expliquée.