Cas Pratique

Vous êtes ici : >> HTML-CSS / Cas Pratique
Temps d'étude : 2h30. Niveau : Facile.
Tags : Cas Pratique
Fichier(s) utile(s) pour ce cours : /

Régle de priorité : Le !important en CSS

Il arrive parfois qu'en CSS certaines lignes se contredisent, exemple :

code Html
		

Bonjour tout le monde !


code Css
	p{ color: red; }
	p{ color: green; }
	

résultat

Bonjour tout le monde


Dans cet exemple, nous voyons qu'on demande à appliquer la couleur rouge sur les textes contenues dans la balise <p> paragraphe et juste en dessous, nous demandons la couleur verte.

Comment va réagir le navigateur ?
Il prendra en compte la dernière régle (la plus en bas du code), car il lit le code-source comme vous et moi : séquentiellement (ligne après ligne).

Vous me direz certainement, « mais pourquoi tu mets rouge puis vert comme couleur, tu devrais plutôt faire un choix ! »

Oui c'est vrai, mais parfois nous chargeons plusieurs feuilles de style déjà prédéfinies (surtout avec l'utilisation des CMS) et pour personnaliser l'affichage il faut surcharger les classes CSS existantes en appliquant des propriétés complémentaires ou différentes.

Surcharger une classe CSS permet de ne pas la modifier à l'endroit où elle a été déclarée mais de l'appeler dans notre feuille de style pour lui donner des propriétés complémentaires ou différentes.

A la question : « Pourquoi nous ne modifions pas le CSS directement où il se trouve ? Ce serait plus facile ! »
En général nous ne modifions pas l'endroit où la classe CSS a été prédéfinie car s'il s'agit d'un framework, d'un module (plugin) ou d'un cms il sera certainement mis à jour à un moment donné et les lignes css seront réintialisées sans conservation de nos modifications (car cela ne fera pas partie de la mise à jour du framework, module ou cms).

C'est la raison pour laquelle vous devez garder à l'esprit que pour imposer une régle contraire en CSS, il faudra sans doute utiliser le !important;, exemple :
code Html
		

Bonjour tout le monde !


code Css
	p{ color: red !important; }
	p{ color: green; }
	

Dans le cas ci-dessus, la couleur rouge sera appliqué :

résultat

Bonjour tout le monde

explications Html / Css


Comme vous pouvez le constater, une des deux propriétés est barrée color:green;.

Vous pouvez aussi préciser la hiérarchie afin de prendre la priorité sur les lignes de CSS contraires qui pourraient se retrouver plus bas dans le code, exemple :

code Html
		

Bonjour tout le monde !


code Css
	html  body  p{ color: red; }
	p{ color: green; }
	

Par le fait que nous avons précisé les parents de la balise <p>, notre ligne css avec la couleur rouge prendra la priorité :

résultat

Bonjour tout le monde

explications Html / Css


Là aussi, l'une des deux propriétés est barrée color:green;.

Pour conclure, vous pouvez écrire votre code CSS normalement et lorsque vous travaillerez avec l'aide d'un outil et que vous n'aurez pas forcément la priorité sur les lignes de code CSS, vous vous rappelerez que vous pourrez utiliser le !important ou préciser la hierarchie pour prendre le dessus sur les autres régles CSS ! ;-).

Comment maintenir un footer en bas de page ?

Problématique, si votre conteneur à une hauteur fixe (sans scrollbar vertical) et que votre footer remonte dans la page web

explications Html / Css

Vous pouvez adapter le code afin de viser ce résultat souhaité :

explications Html / Css

footer.html
		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<link rel="stylesheet" href="footer.css">
				<title>Ma Page</title>
			</head>
			<body>
			
				<div class="conteneur">
					<header>
						<h1>HEADER</h1>
					</header>
					<section>
						<h2>Mon Titre</h2>
						<p>Le texte - le texte - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte  - le texte </p>
					</section>
				</div>
				<footer>
					<h2>Footer</h2>
				</footer>
				
			</body>
		</html>
		

footer.css
		* {
			margin: 0;
		}
		html, body {
			height: 100%;
		}
		.conteneur {
			min-height: 100%;
			height: 100%;
			margin: 0 auto -100px;
		}
		header{
			height: 100px;
			background: pink;
		}
		footer {
			height: 100px;
			position: relative;
			background: pink;
		}
		

Si vous êtes sûr d'avoir une hauteur de conteneur fixe (sans scrollbar vertical), vous pourriez également mettre en oeuvre le code suivant :

footer.css
		* {
			margin: 0;
		}
		html, body {
			height: 100%;
		}
		.conteneur {
			min-height: 100%;
			height: 100%;
		}
		header{
			height: 100px;
			background: pink;
		}
		footer {
			height: 100px;
			position: absolute;
			width: 100%;
			bottom: 0;
			background: pink;
		}
		

Résultat
explications Html / Css


Si votre conteneur n'a pas une hauteur fixe, votre footer se positionnera automatiquement en bas de page sans besoin d'adaptation.

Et si votre conteneur possède parfois une hauteur faible et d'autres fois une hauteur plus importante, vous pourrez toujours appliquer la propriété min-height à votre conteneur.

Comment centrer une zone verticalement en hauteur ?

Il arrive parfois que nous ayons besoin de centrer une zone verticalement dans une autre en hauteur.

Pour cela, il existe la propriété : display flex :

zoneVerticale.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<link rel="stylesheet" href="zoneVerticale.css">
			<title>Ma Page</title>
		</head>
		<body>
			<div id="conteneur">
				<div id="flex">
					<div class="mazone"></div>
					<!--<div class="mazone"></div>-->
				</div>
			</div>
		</body>
	</html>
	

zoneVerticale.css
	#conteneur{
		height: 450px;
		border:1px solid #000;
	}
	#flex {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.mazone{
		background:red;
		width:250px;
		height:250px;
	}
	

Quelques explications :

Résultat
explications Html / Css


Nous pouvons apercevoir que la zone .mazone avec un fond rouge apparait bien a mi-hauteur de la zone #flex :

#conteneur nous permet d'avoir une div qui englobe le reste de notre page web.
height: 450px; permet de définir la hauteur.
border:1px solid #000; permet de définir la bordure.

#flex représente la div qui contient notre zone .mazone.
height: 100%; permet de récupérer la hauteur de la div parent (100% soit 450px).
display: flex; Affichage de type "flex" pour un affichage flexible.
align-items: center; Propriété qui sera attribuée aux éléments enfants devenus éléments de type "flex-item" pour obtenir un centrage vertical.
justify-content: center; Permet de centrer les zones enfants à l'horizontale au milieu de la div parent.

#mazone représente la div qui contient notre zone .mazone.
background: red;; permet d'appliquer une couleur de fond.
width: 250px; permet d'appliquer une largeur à la zone.
height: 250px; permet d'appliquer une hauteur à la zone.

La propriété FLEX en détails

Prenons ce code en exemple :

flex1.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<link rel="stylesheet" href="flex1.css">
			<title>Ma Page</title>
		</head>
		<body>
			<div id="conteneur">
				<div id="flex">
					<div class="mazone"></div>
					<!--<div class="mazone"></div>-->
				</div>
			</div>
		</body>
	</html>
	

flex1.css
	#conteneur{
		height: 450px;
		border:1px solid #000;
	}
	#flex {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.mazone{
		background:red;
		width:250px;
		height:250px;
	}
	.mazone2{
		background:blue;
		width:250px;
		height:250px;
	}
	

Résultat
explications Html / Css


Les zones enfants d'une zone parent ayant la propriété display: flex; seront placées côte à côte automatiquement.

Si vous souhaitez mettre les 2 zones enfants l'une en dessous de l'autre (et non pas à côté de l'autre), vous devrez utiliser la propriété flex-direction:column;, exemple :

flex1.css
	#conteneur{
		height: 450px;
		border:1px solid #000;
	}
	#flex {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.mazone{
		background:red;
		width:250px;
		height:250px;
		flex-direction:column;
	}
	.mazone2{
		background:blue;
		width:250px;
		height:250px;
	}
	

Résultat
explications Html / Css


L'utilisation de la propriété display: block; ne fonctionnera pas dans ce cas présent.

Comment aligner un texte verticalement en hauteur ?

Dans les débuts des langages Html et Css, les sites web étaient conçus à l'aide de tableaux avec les balises table, tr, td, cela n'est plus le cas aujourd'hui pour de l'affichage en FRONT (sauf pour représenter des données tabulaires, des statistiques, des affichages de backoffice ou des newsletter).

Cependant les tables avaient l'avantage de pouvoir centrer verticalement le texte (vertical-align: middle;) contenu dans leur cellule, ce qui est moins évident avec des zones div.

Alors nous n'allons pas retourner dans le passé pour construire nos sites web avec des tableaux mais pour centrer un texte verticalement à l'intérieur d'une zone en hauteur, nous aurons besoin de la propriété display: table; :

alignementVertical.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<link rel="stylesheet" href="alignementVertical.css">
			<title>Ma Page</title>
		</head>
		<body>
			<div class="zone-principale">
				<p>Texte centré verticalement.</p>
			</div>
		</body>
	</html>
	

Notre texte est contenu à l'intérieur d'une zone et voici le code css associé :

alignementVertical.css
	.zone-principale {
	display: table; 
	height: 400px; 
	width: 30%;
	border: 3px solid ;
	}
	p{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	}
	

Quelques explications :

.zone-principale notre zone principale comporte les caractéristiques suivantes :

display: table; permet de simuler le comportement d'une table (afin que plus tard l'utilisation des propriétés display: table-cell; et vertical-align soit possible)

height: 400px; permet de fixer une hauteur de 400 pixels
width: 30%; permet de fixer une largeur variable de 30 % par rapport à la largeur de l'écran
border: 3px solid ; permet de dessiner une bordure tout autour de la zone pour mieux la cerner à l'affichage

La balise p comporte les caractéristiques suivantes :

display: table-cell; permet de simuler le comportement d'une cellule afin que le vertical-align soit possible.
vertical-align: middle; permet d'aligner le texte verticalement (dans la hauteur).
text-align: center; permet de centrer le texte horizontalement (dans la largeur).

Résultat
explications Html / Css

Comment centrer du texte à côté d'une image ?

Il arrive souvent que l'on intègre une image et que l'on doive aligner du texte à côté, cela ne peut pas toujours être calculé de manière approximative si la taille du texte (ou de l'image) est amenée à changer.

Pour plus de compréhension, voici la problématique rencontrée :

explications Html / Css

Pour rémédier à cette situation nous allons utiliser la propriété display: table; afin de simuler le comportement d'une table :

alignementTexteImage.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<link rel="stylesheet" href="alignementTexteImage.css">
			<title>Ma Page</title>
		</head>
		<body>	
		<p>
			<span><img src="image.jpg"></span>
			<span>
				Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.<br>
			</span>
		</p>
		</body>
	</html>
	

Notre texte est contenu à l'intérieur d'une zone et voici le code css associé :

alignementTexteImage.css
	p{   display:table; } /* simule le comportement d'une table avec des colonnes */
	span{
	display: table-cell;
	vertical-align:middle; 
	}
	img{
	margin: 0 20px 0 0;
	}
	

Quelques explications :

p contient les autres éléments et aura les caractéristiques suivantes :

display: table; permet de simuler le comportement d'une table (afin que plus tard l'utilisation des propriétés display: table-cell; et vertical-align soit possible)

span contient à la fois l'image et le texte avec les caractéristiques suivantes :

display: table-cell; permet de simuler le comportement d'une cellule afin que le vertical-align soit possible.
vertical-align: middle; permet d'aligner le texte verticalement (dans la hauteur).

img nous selectionnons l'image uniquement pour l'écarter un peu du texte en lui apportant un peu de marge :

margin: 0 20px 0 0; permet d'appliquer de la marge à droite.

Résultat
explications Html / Css

Comment centrer les liens d'un menu ?

Il arrive parfois que le nombre de liens dans un menu soit variable et changeant et pour cela il n'est pas toujours évident de calculer la bonne marge à appliquer à gauche comme à droite.

Problématique :
explications Html / Css

Les liens sont alignés à gauche de notre zone.

Pour cette raison, nous allons utiliser la propriété display: inline et display: inline-block;

menuCentre.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<link rel="stylesheet" href="menuCentre.css">
			<title>Ma Page</title>
		</head>
		<body>
			<nav>
				<ul>
					<li><a href="">Accueil</a></li>
					<li><a href="">Actualités</a></li>
					<li><a href="">Qui sommes nous ?</a></li>
					<li><a href="">Contact</a></li> 
				</ul> 
			</nav>  
		</body>
	</html>
	

Le menu est déclaré via la balise <nav>, à l'intérieur se trouve une liste <ul> <li> et enfin nos liens représentés par la balise <a>

menuCentre.css
	body{ 
	margin: 0; 
	}
    nav ul{  
        padding: 0.5em 0; 
		margin: 0;  
		background : #c0c0c0;
        text-align: center;
    }  
    nav li {  
        display: inline;  
    }
	nav a {  
        margin: 0 3em;  
		color: #fff;
		text-decoration: none;
    }  
	

Quelques explications :

body{ margin: 0; } nous retirons la marge héritée de notre zone body

nav ul voici les caractéristiques de notre liste ul contenu dans la balise nav :
padding: 0.5em 0; permet d'ajouter de la marge intérieure à la fois en haut et en bas mais aucune sur les côtés.
margin: 0; nous retirons la marge héritée de notre zone ul
text-align: center; permet de centrer le texte (en l'occurence, nos liens)

nav li{ display: inline; } permet de modifier le comportement de nos éléments de liste li afin qu'ils se comportent comme étant inline (pour se sucédder les uns à côté des autres en prenant uniquement la place dont ils ont besoin) et non de type block (sur toute la largeur)

nav a permet de styliser les éléments <a> contenu dans notre balise de menu <nav>, voici les caractéristiques :
margin: 0 3em; permet d'espacer les liens entre eux.
color: #fff; permet d'appliquer une couleur blanche sur nos liens

text-decoration: none; permet de retirer l'effet souligné hérité par nos liens

Résultat
explications Html / Css

Les liens de menu sont bien centré à l'horizontal.

Comment faire des bordures arrondies ?

Pour faire des bordures arrondies sur une zone, une image ou tout autre élément qui s'y prête, vous pouvez utiliser la propriété CSS border-radius :
Voici un exemple :

bordureArrondie.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<link rel="stylesheet" href="bordureArrondie.css">
			<title>Ma Page</title>
		</head>
		<body>
			<div class="mazone">...</div>
		</body>
	</html>
	

bordureArrondie.css
	div.mazone{ 
	border: 3px solid;
	border-radius: 10px;
	min-height: 100px;
	width: 50%;
	}
	

Quelques explications :

div nous selectionnons notre zone div ayant la classe .mazone

border: 3px solid; permet de tracer une bordure tout autour
border-radius: 10px; permet d'ajouter un effet arrondi de 10 pixels sur les bords en haut à gauche, en haut à droite, en bas à gauche et en bas à droite.
min-height: 100px; permet de fixer une hauteur minimum a 100 pixels
width: 50%; permet d'appliquer une largeur variable de 50% par rapport à la taille de l'écran.

Résultat
explications Html / Css

La bordure est bien arrondie.

Comment mettre de l'ombre sur une image ou sur une zone ?

Pour mettre de l'ombre sur une image ou sur une zone, nous allons utiliser la propriété css box-shadow, voici un exemple

ombre.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<link rel="stylesheet" href="ombre.css">
			<title>Ma Page</title>
		</head>
		<body>
			<div>
				<p>Mon texte ombré</p> 
			</div>
		</body>
	</html>
	

ombre.css
	div	 {
	border: 3px solid;
	min-height: 100px;
	width: 50%;
	text-align: center;
	box-shadow: 1px 1px 3px;
	}
	p{
	letter-spacing: 2px;
	text-shadow: 1px 1px 3px;
	}
	

Résultat
explications Html / Css

Dans ce résultat, l'ombre se trouve à la fois sur la zone (box-shadow) et sur le texte (text-shadow).
Quelques explications :

div nous selectionnons notre zone div

border: 3px solid; permet de tracer une bordure tout autour
min-height: 100px; permet de fixer une hauteur minimum a 100 pixels
width: 50%; permet d'appliquer une largeur variable de 50% par rapport à la taille de l'écran.
text-align: center; permet d'aligner le texte au centre
box-shadow: 1px 1px 3px; permet d'appliquer de l'ombre tout autour de la zone

p permet de selectionner notre paragraphe contenant notre texte
letter-spacing: 2px; permet l'espacement des lettres entre elles
text-shadow: 1px 1px 3px; permet d'appliquer de l'ombre sur le texte
box-shadow se décompose en plusieurs valeurs possibles :

Valeur Description Exemple
position horizontale (x) permet d'afficher l'ombre sur la gauche ou la droite de l'élément. Par exemple, 5px donneront une ombre sur la droite, -5px donneront une ombre sur la gauche
position verticale (y) permet d'afficher l'ombre sur le haut ou le bas de l'élément. Par exemple, 5px donneront une ombre sur la bas, -5px donneront une ombre sur le haut
Distance du flou (blur) cela correspond à l'étendue du flou (dégrade la couleur de l'ombre vers le transparent). Par exemple, 3px donneront une ombre légèrement étendu, et 8px donneront une ombre plus étendue
Taille de l'ombre (spread) cela nous donne la possibilité de redimensionné l'ombre. Taille adaptable selon le nombre de pixels
Couleur (color) permet de gérer la couleur de l'ombre. #000; donnera une ombre noir, tandis que #336699; donnera une ombre bleue
Intérieur (inset) permet de gérer la position de l'ombre. le mot clé inset vous donnera une ombre intérieure, tandis que ne rien préciser reviendra à faire une ombre portée vers l'extérieur (par défaut)


Voici quelques exemples avec box-shadow :

	box-shadow: x y blur spread color;
	

Autre cas, si vous souhaitez obtenir de l'ombre uniquement en haut :

	box-shadow: 0 -5px 5px -5px #111;
	

de l'ombre uniquement à droite :
	box-shadow: 5px 0 5px -5px #111;
	

de l'ombre uniquement en bas :
	box-shadow: 0 5px 5px -5px #111;
	

de l'ombre uniquement à gauche :
	box-shadow: -5px 0 5px -5px #111;
	

de l'ombre partout :
	box-shadow: 0 0 5px #333;
	

Comment centrer une banniere dans la largeur et écrire par dessus ?

Il arrive souvent qu'un site ait besoin de visuel pour rendre le meilleur affichage possible (Un site sans image est rare).

Imaginons le cas d'une bannière de 2000 pixels :

explications Html / Css

Inscrivons le code Html suivant :

banniere.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<link rel="stylesheet" href="banniere.css">
			<title>Ma Page</title>
		</head>
		<body>
			<div class="contenuBanniere">
				<img src="banniere.jpg" width="2000">
			</div>
			<div class="conteneur">
				<div class="bandeauTitre">
					<h1>VOTRE OUTIL DE COLLABORATION</h1>
				</div>

				<div class="bandeauTexte">
					<h2>Organisez vous<br>
					pour un travail<br>
					efficace et rapide</h2>
				</div>
			</div>
		</body>
	</html>
	

banniere.css
	body{ 
		margin: 0; 
		font-family: Tahoma; 
		font-size: 10px; 
		overflow-x: hidden; /* evite la scrollbar horizontal */
		}
	.contenuBanniere{
		position: relative; /* position relative pour pouvoir redéfinir son positionnement */
		left: 50%; /* je m'écarte de 50% de la gauche */
		margin-left: -1000px; /* 1000px de moins pour garder le contenu du fichier image centré (c'est la moitié car l'image fait 2000px) */
	}
	.conteneur{
		width: 960px;
		margin: 0 auto;
	}
	.bandeauTitre {
		color: #000000;
		font-weight: bold;
		left: 20px;
		letter-spacing: 1px;
		position: relative;
		top: -365px;
	}
	.bandeauTexte {
		color: #F6F4F1;
		left: 20px;
		letter-spacing: 1px;
		line-height: 24px;
		position: relative;
		top: -353px;
	}
	

Résultat
explications Html / Css


Quelques explications :

body permet d'appeler toute la page, voici les propriétés précisées :

margin: 0; permet de retirer les marges héritées
font-family: Tahoma; permet de modifier la police d'écriture.
font-size: 10px; permet de modifier la taille du texte
overflow-x: hidden; évite une scrollbar horizontale (du fait de notre grande bannière, cette ligne est importante).

contenuBanniere permet d'appeler la zone contenant la banniere :

position: relative; permet de pouvoir redéfinir son positionnement
left: 50%; permet de nous écarter de la gauche de 50% (la moitié).
margin-left: -1000px; permet de créer un décalage de 1000 pixels (la moitié des 2000 pixels) afin de rester centré sur la page web
overflow-x: hidden; évite une scrollbar horizontale (du fait de notre grande bannière, cette ligne est importante).

conteneur permet de créer une "enveloppe" qui contiendra le reste des informations :

width: 960px; correspond à la largeur
margin: 0 auto; permet de centrer notre conteneur et tout ce qui s'y trouve à l'intérieur (0 marge en haut et en bas, automatique à gauche et à droite).

La bannière de 2000 pixels est bien centrée ! Le reste du code concerne l'affichage des textes.

Des effets sur nos images

Pour rendre vivant un site web il est recomméndé de prévoir quelques effets visuels interactifs lorsque l'internaute survole certaines zones.

Voici un exemple Html :

effet1.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<link rel="stylesheet" href="effet1.css" />
			<title>Ma Page</title>
		</head>
		<body>
			<figure>
				<img src="<?php echo $url; ?>image.jpg" alt="mon image">
				<figcaption>
						<h2>
							<a href="">Ma Legende</a>
						</h2>
				</figcaption>
			</figure>
		</body>
	</html>
	

effet1.css
	* { margin: 0; padding: 0; }

	figure { 
	width: 300px;
	position: relative;	
	overflow:hidden;
	border: 3px solid #c0c0c0;
	}
	figure  img{ display: block; }

	figure  figcaption  a { text-decoration: none; color: #fff; }

	figcaption {
	position: absolute;
	left: 0;
	bottom: -30%;
	background: rgba(0,0,0,0.75);
	padding: 5px 0;
	text-align: center;
	width:300px;
	transition: 0.6s;
	}
	figure:hover figcaption {
	bottom: 0; /* lorsque l'on survol l'image, on fait remonter la légende */
	}
	

Résultat
explications Html / Css

Au passage de notre souris au dessus de l'image, lors du survol, nous voyons une légende apparaitre.

Quelques explications :

<figure> et <figcaption> sont mis en oeuvre conjointement pour attribuer une légende à une image, une vidéo ou tout autre élément média.

Figure permet de contenir des éléments médias (images ou autres), Figcaption permet de précisier une légende associée.

* { margin: 0; padding: 0; } permet de casser les héritages de marges intérieures et extérieures sur tous les éléments html.

figure permet de déclarer un bloc qui contiendra des éléments médias, voici ses propriétés :

width: 300px; permet d'appliquer une largeur de 300 pixels à notre zone figure
position: relative; permet de redéfinir la position de la zone.
overflow: hidden; évite une scrollbar.
border: 3px solid #c0c0c0; permet d'appliquer une bordure tout autour.

figure img{ display: block; } permet de selectionner l'image dans la figure pour lui appliquer la propriété block afin qu'elle prenne toute la place

figure figcaption a { text-decoration: none; color: #fff; } permet de selectionner les liens présents à l'intérieur de figcaption pour leur appliquer une couleur blanche et éviter l'effet souligné (text-decoration: none;)

figcaption permet de préciser une légende, voici le code associé :
position: absolute; permet de positionner précisément la légende (dans son parent qui est en position relative) sans prendre en compte l'affichage des éléments déjà présents
left: 0; nous n'aurons aucun pixel de décalage avec le bord gauche
bottom: -30%; nous descendons 30% plus bas (cela aura pour effet de masquer la légende)
background: rgba(0,0,0,0.75); permet d'avoir un fond de couleur noir légérement opaque (ce qui permettra de toujours voir l'image dessous)
padding: 5px 0; permet d'appliquer de la marge intérieure en haut et en bas.
text-align: center; permet d'aligner le texte de la legend au centre.
width:300px; permet d'appliquer une largeur de 300 pixels.
transition: 0.6s; Cette transition permettra (au moment du survol hover) de ne pas afficher la légende d'un coup brutal mais progressivement.

figure:hover figcaption Lorsque le bloc figure sera survolé, nous irons chercher la balise figcation pour lui appliquer la propriété suivante :
bottom: 0; cela fera remonter la légende et annulera la propriété (bottom: -30%) que nous avions précédemment déclaré.