La mise en forme des textes permet de changer les polices de caractères, de mettre en gras, en couleur, en italique, de souligner et beaucoup d'autres choses encore. En Css, on utilise les propriétés suivantes :

font-size permet de préciser la taille de police utilisée. Il existe deux types d'unités :

les unités absolues : px (pixels), cm (centimètres), ...

les unités relatives : % (par rapport à la taille de police du conteneur), em, ...
font-family permet de spécifier la famille de police pour le texte.
Comme une police donnée n'est pas nécessairement présente sur le poste de l'utilisateur, on précise en général plusieurs choix séparés par des virgules.
font-weight permet de définir la graisse de la police ;
font-style permet d'afficher du texte en italique ;
text-decoration permet de souligner l'élément sélectionné ;
font-variant permet d'afficher du texte en petites majuscules.
text-align permet la mise en forme du paragraphe dans sa boîte (centré, aligné à gauche, à droite, ou justifié).

Bac à sable - Apparence du texte

Dans cette activité, les dimensions sont en pixels.

Ci-contre, on peut modifier à loisir l'apparence du texte du paragraphe.

Code Css :

p {                                 /* Mise en forme des paragraphes */
    color : #000000;                /* Couleur du texte */
    font-size : 18px;               /* Taille de la police en pixels */
    font-family : Times New Roman;  /* Police de caractère */
    font-weight : normal;           /* Graisse de la police */
    font-style : normal;            /* Apparence de la police */
    text-decoration : none;         /* Décoration de la police */
    font-variant : normal;          /* Affichage de la police */
    text-align : center;            /* Alignement du texte dans la boîte */
    }

Apparence des liens

Que ce soit dans le menu de navigation de la page ou dans le pied de page, le lien hypertexte reste souligné et coloré en bleu : il n'a pas la même apparence que la boîte qui l'entoure.

Pour y remédier :

Éditez la feuille style.css de sorte que toutes les ancres de lien hypertexte (balise </a>) ne soient plus soulignées et qu'elles soient centrées dans leur boîte.
Ajoutez les propriétés nécessaires de sorte que toutes les ancres de lien hypertexte (balise </a>) soient centrées dans le menu et dans le pied de page.
Ces liens doivent « passer en gras » au survol de la souris.
Il reste la couleur bleue du lien à régler. Dans la feuille style.css, le paramètre inherit de la propriété color permet au sélecteur correspondant d'hériter de la couleur définie dans le bloc parent.

Les parties modifiées du Css
Affichage à obtenir
Feuille style.css
Solution améliorée

<header id="haut">
	<h1>Mes dinosaures préférés</h1>
</header>

<nav>
	<ul>
		<li><a href="index.html">Accueil</a></li>
		<li><a href="pages_du_site/dilophosaure.html">Dilophosaure</a></li>
		<li><a href="pages_du_site/pteranodon.html">Ptéranodon</a></li>
		<li><a href="pages_du_site/tyrannosaure.html">Tyrannosaure</a></li>
		<li><a href="pages_du_site/velociraptor.html">Vélociraptor</a></li>
		<li><a href="pages_du_site/indominus.html">Indominus</a></li>
	</ul>
</nav>

<section>
	<div class="bloc_accueil">
		<img class="img_accueil" src="images/Dilophosaure.png" alt="Dilophosaure en Lego"/>
		<p>Dilophosaure</p>
	</div>

<div class="bloc_accueil">
		<img class="img_accueil" src="images/Pteranodon.png" alt="Ptéranodon en Lego"/>
		<p>Ptéranodon</p>
	</div>

<div class="bloc_accueil">
		<img class="img_accueil" src="images/T_Rex.png" alt="Tyrannosaure en Lego"/>
		<p>Tyrannosaure</p>
	</div>

<div class="bloc_accueil">
		<img class="img_accueil" src="images/Velociraptor.png" alt="Vélociraptor en Lego"/>
		<p>Vélociraptor</p>
	</div>

<div class="bloc_accueil">
		<img class="img_accueil" src="images/Indominus.png" alt="Indominus en Lego"/>
		<p>Indominus</p>
	</div>
	
</section>

<footer>
	<a href="#">N. Buyle-Bodin - Enseignant de Mathématiques et d'Informatique</a>
</footer>

/* Partie css */
@charset "utf-8";		/* Cette ligne permet les caractères accentués */

body {
	background: linear-gradient(to right, white, lightgrey, lightgrey, white);
	}

/* Bannière */
header {
	padding: 10px 100px;
	background-color: lightorange;
	color: darkgreen;
	border: 15px ridge darkgreen;
	border-radius: 30px;
	}

/* Pied de Page */
footer {
	clear: both;
	width: 200px;
	margin: 10px auto;
	padding: 5px;
	color: darkgreen;
	text-align: center;
	border: 5px solid darkgreen;
	border-radius: 15px 0 15px 0;
	}

/* Ancres */
a {
	text-decoration: none;
	color: inherit;
	}

a:hover {
	font-weight: bold;
	}

/* Menu */
ul {
	list-style-type: none;
	}

li {
	width: 100px;
	padding: 5px;
	text-align: center;
	color : green;
	border: 2px solid green;
    font-size:0.8rem;
	}

li:hover{
    cursor: pointer;
	color : white;
	background-color: green;
	border: 2px solid white;
	}

/* Section */
h2 {
	margin-top: 50px;
	width: 25%;
	padding: 5px;
	color: darkgreen;
	border-left: 4px solid lightgreen;
	border-bottom: 4px solid lightgreen;
	border-top: 4px solid transparent;
	border-right: 4px solid transparent;
	border-radius: 0 0 0 8px;
	clear: both;
	}

p {
	margin-left: 50px;
	}

strong {
	color: red;
	}

/* Images */
img {
	margin-left: 150px;
	height: 200px;
	border: 2px dashed orange;
	border-radius: 25px;
	}

img:hover{
	transform: translate(-100px, 0);
	transition: 2s;
	}

.img_accueil{
	float: right;
	margin-right: 100px;
	height: 150px;
	border: 2px solid grey;
	border-radius: 5px;
	}

.img_accueil:hover{
	transform: translate(-4px, -4px);
	transition: 0.3s;
	}

.bloc_accueil {
	clear: both;
	padding: 10px;
	height: 150px;
	}

En procédant ainsi, tous les liens hypertexte (y compris ceux qui ne sont pas définis dans le pied de page ou le menu de navigation) n'auront aucun soulignement et hériteront de la couleur de leur bloc parent. Ce qui est avantageux pour le menu de navigation et le pied de page peut devenir une contrainte pour le reste de la page.

Pour y remédier, on va appliquer ces modifications uniquement aux liens qui nous intéressent à l'aide des sélecteurs d'éléments descendants :

Le combinateur « » (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des fils directs) d'un élément donné.

Syntaxe : A B
Signification : permet de cibler n'importe quel élément B situé à l'intérieur d'un élément A.

Source : Fondation Mozilla

Nous allons donc cibler tous les éléments <a> contenus dans les balises <nav> et <footer> :

Toutefois, il y a un copier/coller de code qui peut sembler fastidieux. Lorsque deux sélecteurs comportent la même mise en forme, il vaut mieux les séparer par une virgule pour obtenir le même effet (le passage à la ligne n'est pas nécessaire mais il permet de me visualiser les boîtes et sélecteurs concernés) :

Paragraphes de la page d'accueil

Hauteur d'une ligne de texte

En Css, la propriété line-height permet de modifier la hauteur totale d'une ligne. « Jouer » sur cette propriété permet de centrer verticalement un élément.

Par exemple :

Les deux fichiers suivants :
 <p> Texte </p>

/*Feuille css*/ p{ border:1px solid brown; height:40px; line-height:40px; /* égale à height pour centrage vertical */ }

donnent l'affichage ci-dessous :

texte
Les deux fichiers suivants :
 <p> Texte </p>

/*Feuille css*/ p{ border:1px solid brown; height:40px; line-height:20px; }

donnent l'affichage ci-dessous :

texte

Énoncé de l'exercice

En utilisant les informations précédentes et la solution améliorée de l'exercice n°1, modifiez le fichier style.css afin que les paragraphes de la page d'accueil, et uniquement ceux-là, soient centrés verticalement par rapport à l'image du dinosaure, qu'ils soient écrits plus gros, en gras et décalés d'environ 50 pixels sur la droite.

Profitez-en aussi pour centrer horizontalement le contenu de la bannière.

A nouveau, n'hésitez pas à cliquer sur le bouton « Affichage à obtenir » pour bien visualiser la consigne.

Affichage à obtenir
Feuille style.css
Centrage vertical des images