Mise en forme du site Hitchcock avec les CSS
Séparation du contenu et de la mise en forme
Séparer le contenu de la mise en forme, telle est la volonté du W3C. Retenez ces deux idées maîtresses :
- Le langage HTML permet de mettre des éléments dans une page.
- Le langage CSS permet de mettre en forme ces éléments.
De cette manière, le code HTML devient très concis et lisible, contrairement aux versions précédentes qui mélangeaient le contenu et la mise en forme.
Voici ce que nous allons obtenir grâce au langage CSS :
Accueil
Biographie
Filmographie
Ce n'est pas le dernier cri en matière de design, mais c'est un bon moyen de mettre en application le langage CSS. Récupérez votre travail en HTML sur Hitchcock.
Insertion de la balise <link>
Dans la zone d’entête <head> de chaque page, disposez une balise <link> sur chaque page comme ci-dessous, afin de relier un fichier la feuille de style externe à chaque page HTML.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Alfred Hitchcock</title>
<link rel="stylesheet" href="style.css">
</head>Cette balise <link> est à insérer dans chaque page qui doit adopter les mises en formes : index.html, biographie.html et filmographie.html.
Création du fichier CSS
Créer un nouveau fichiers dans votre éditeur de code préféré, plus enregistrez-le sous le nom style.css, comme indiqué dans la balises <link>.
Cette feuille de style va nous permettre d'appliquer une charte graphique à l’ensemble des pages du site. Chaque page aura donc le même aspect, et pour modifier l’aspect de toutes les pages il suffira de modifier l'unique fichier style.css.
Les couleurs
Arrière-plan
Nous allons d'abord sélectionner la balise <body> qui représente l'ensemble de la page. La couleur d'arrière-plan colorera toute la page. Choisissons un gris léger pour évoquer un gris de film policier.
body {
background-color: #EEEEE;
}Comme alternative à la couleur grise, nous pouvons opter pour un motif très léger. Attention à ne pas surcharger la page d'une tapisserie de mauvais goût. J'ai opté pour ce subtil motif :
body {
background-image: url(images/p6.webp);
}Couleur de premier plan
La couleur de premier plan ne sera pas un noir pur mais un gris très foncé. Cette astuce permet de mieux intégrer le texte à l'ensemble du design. Cette couleur spécifiée dans <body> va colorer par héritage les balises textuelles filles <p>, <h1>, <li>, etc.
body {
background-image: url(images/p6.webp);
color: #222;
}Les polices de caractère
Par défaut, la police de caractère d'une page web est Times. Pour la changer, il faut utiliser la propriété font-family. En sélectionnant <body>, l'ensemble des balises textuelles <p>, <h1>, <li>, <a> hériteront de cette typographie.
Pour moderniser l'apparence du site, j'opte pour Poppins, une police ronde et moderne, sans empattement, issue de Google Font. Il faudra donc ajouter en amont du document CSS une ligne @import permettant de précharger la police depuis les serveurs de Google.
@import url('https://fonts.googleapis.com/css2?family=Poppins');
body {
background-color: #E6E6E6;
color: #222;
font-family: 'Poppins', sans-serif;
}Pour les titres des pages, nous optons pour la police Kalam, de type cursive, qui évoque un peu les génériques des films des années 50. Cette police gratuite peut également se télécharger sur Google Font.
Ajoutez le code suivant à votre feuille de style :
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Kalam:wght@700');
body {
font-family: "Poppins", sans-serif;
background-image: url(images/p6.webp);
color: #222;
}
h1 {
font-family: "kalam", cursive;
font-size: 40px;
}La propriété font-size permet de modifier la taille des polices. Par défaut, la balise <h1> est à 32 pixels, elle est ici augmentée de 8 pixels.
Le menu
Les liens
En désignant nav a comme sélecteur CSS, seuls les liens du menu seront concernés par les prochaines modifications.
La propriété text-decoration: none permet d'annuler le soulignement par défaut des liens. Ensuite, nous les espaçons grâce à l'ajout d'une marge à droite de 20 pixels.
L'héritage de la couleur adressée à body ne fonctionne pas avec les liens. Il faudra sélectionner précisément les liens du menu pour que la couleur #222 s'applique avec la propriété color.
nav a {
margin-right: 20px;
text-decoration: none;
color: #222;
}La barre sous le menu
Pour dessiner un pointillé sous le menu, nous appliquons une bordure pointillée de couleur noire et épaisse de 2 pixels sur le bas du conteneur nav. La marge intérieure padding permet d'éloigner la bordure des liens de 20 pixels. La marge extérieure margin permet de décoller légèrement le menu du haut de la page.
nav {
margin-top: 20px;
border-bottom-width: 2px;
border-bottom-style: dashed;
border-bottom-color: #222;
padding-bottom: 20px;
}On peut simplifier cette écriture en une ligne :
nav {
margin-top: 20px;
border-bottom: dashed #222 2px;
padding-bottom: 20px;
}Cadrage et alignement
Afin que les textes ne s'étalent pas sur toute la largeur de la fenêtre, et pour permettre une meilleure lisibilité, nous ramenons la largeur du conteneur global <body> à 60% de la largeur de la fenêtre du navigateur, grâce à la propriété width suivie de la valeur 60%.
La propriétés margin-left et margin-right ont la valeur auto pour équilibrer les marges gauche et droite, de manière à centrer le contenu dans la page.
body {
font-family: "Poppins", sans-serif;
width: 60%;
margin-left: auto;
margin-right: auto;
background-image: url(images/p6.webp);
color: #222;
}Images
La largeur des images est réglée à 70% de la largeur du bloc parent, c'est à dire la balise <body>. Les coins des images sont arrondis de 10 pixels grâce à la propriété border-radius.
img {
width: 70%;
border-radius: 10px;
}Code complet de la feuille de style externe style.css
Parmi les autres améliorations graphiques, nous ajoutons une lettrine pour les titres grâce au pseudo-élément ::first-letter et un souligné au survol des liens grâce à la pseudo-classe :hover.
La largeur du bloc menu <nav> s'appuie sur la valeur fit-content qui prend la largeur de ce qu'il contient, à savoir les liens et leurs marges. Afin que le pointillé ne déborde pas de la marge de droite du dernier lien, nous l'annulons avec le sélecteur nav a:last-child.
Voici l'ensemble du code style.css :
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Kalam:wght@700');
body {
font-family: "Poppins", sans-serif;
width: 60%;
margin-left: auto;
margin-right: auto;
background-image: url(images/p6.webp);
color: #222;
}
img {
width: 70%;
border-radius: 10px;
}
h1 {
font-family: "kalam", cursive;
font-size: 40px;
}
h1::first-letter {
font-size: 50px;
}
/* Menu */
nav {
margin-top: 20px;
border-bottom: dashed #222 2px;
padding-bottom: 20px;
width: fit-content;
}
nav a {
margin-right: 20px;
text-decoration: none;
color: #222;
font-size: 18px;
}
nav a:last-child {
margin-right: 0;
}
nav a:hover {
text-decoration: underline;
}