Dans le dernier article, nous avons vu comment concevoir une page web simple et qui respecte les normes de structuration en HTML. Si vous ne l’avez pas encore lu, nous vous invitions à en prendre connaissance avant de continuer la lecture de celui-ci.
Pour rappel, nous avons créé notre environnement de travail comprenant le dossier et fichiers de base puis nous avons créé notre page index.html avec une structure très simple.
Uniquement un header, un main vide et un footer étaient présents sur cette page. Aujourd’hui, voyons comment styliser notre page basique.
Commençons par le style CSS de base
Avant toute chose, nous devons commencer par créer et lier notre feuille de style avec notre HTML. Pour ce faire, il nous faut créer un fichier nommé style.css dans le dossier css.
Une fois ce fichier créer, il faut se rendre sur index.html et ajouter la ligne suivante au-dessus de la balise title dans la zone « head ».
<!DOCTYPE html>
<!-- Il faut insérer la langue du site web -->
<html lang="fr">
<head>
<!-- Ici vous trouvez les meta de base, le charset pour l'encodage de caractère, la compatibilité avec edge et le viewport -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Il faut insérer le votre feuille de style dans la partie href de la balise link -->
<link rel="stylesheet" href="css/style.css">
<title>Site de test</title>
</head>
<body data-rsssl=1>
Avant de commencer l’habillage de votre page web, vous pouvez/devez normaliser votre document. Pour cela, vous pouvez très facilement trouver un fichier css nommé normalize.css qui vous facilitera la vie.
Normaliser votre document permet d’initialiser certains éléments afin de leur donner un aspect cohérent pour tout votre site web.
Dans l’exemple, nous n’utiliserons pas le fichier normalize.css. Nous allons simplement agir sur quelques éléments très rapidement avant d’entamer le vif du sujet.
En haut de votre feuille de style, vous utiliserez donc le code suivant :
/* Normalisation personnelle du document */
*{
margin:0;
/* On initialise toutes les marges à 0, le selecteur "*" permet de tout selectionner sur notre document */
}
/* Fin de normalisation personnelle du document */
Dans ma petite « normalisation » du document, j’initialise uniquement les marges à zéro. Par la suite, je peux éventuellement ajouter dans cette zone du style pour des éléments spécifiques qui auront le même aspect partout sur le site, tel que mes titres par exemple.
Le style du header et de son menu de navigation principal
Dans cet article je ne reviendrai pas spécifiquement sur toutes les balises HTML ni sur toutes les propriétés CSS car il est facile de trouver des mémos HTML et CSS en trois secondes sur Google.
Pour le aider nous utiliserons principalement flexbox, pour cela, je vous propose cette ressource qui est assez complète : Utilisation de flexbox.
Dans notre design d’exemple, il faudra prendre en compte plusieurs éléments avant de concevoir notre HTML et de l’habiller avec le CSS. C’est pour cette raison qu’il est important de commencer par le découpage de votre maquette graphique afin de connaitre non seulement les zones (header, main, footer), mais également leurs tailles.
Vous remarquerez surement que certains éléments sont contraints en largeur, mais que l’arrière-plan prend tout de même la largeur complète du navigateur. C’est un point sur lequel nous reviendrons dans le footer.
Avant d’aller plus loin, vous trouverez ici une ressource concernant les sélecteurs en CSS. Ils vous permettent de sélectionner les éléments que vous souhaitez habiller.
Pour le header, la largeur du contenu est de 1440px. Cette largeur dépend bien entendu du projet et peu donc être variable. Dans notre header, nous avons un logo à gauche et un menu en ligne à droite.
/* Header */
header{
max-width: 1440px;
margin:auto;
display: flex;
justify-content: space-between;
}
/* Fin Header */
Tout d’abord, on limite la largeur de notre header à 1440px en utilisant la propriété « max-width » afin de faciliter l’adaptation en responsive (tablette et mobile). Si nous utilisons la propriété width, le contenu ne peut pas se réadapter en fonction de la taille d’écran.
Le margin auto permet de distribuer automatiquement les marges à gauche et à droite afin de centrer le contenu dans le navigateur si la taille de celui-ci est supérieure à la largeur du header.
Le display flex nous permet de positionner nos éléments du header en colonnes, pour en savoir plus sur flex, n’oubliez pas de consulter la ressource fournie plus haut.
Justify content space between nous permet de mettre de l’espace entre nos éléments et donc de positionner notre logo totalement à gauche et notre nav totalement à droite.
Sur l’exemple ci-dessus nous pouvons voir que le contenu est centré sur mon navigateur avec un logo à gauche et un menu à droite. Cependant, le style du logo et du menu ne correspondent pas encore à nos attentes. Pour ce faire, je vais devoir agir sur la taille du logo afin de le rendre plus petit.
Je vais également devoir mettre mes liens en ligne et leur appliquer du style pour avoir des liens en noir puis en orange au hover (au survol).
Sur l’exemple ci-dessus nous pouvons voir que le contenu est centré sur mon navigateur avec un logo à gauche et un menu à droite. Cependant, le style du logo et du menu ne correspondent pas encore à nos attentes. Pour ce faire, je vais devoir agir sur la taille du logo afin de le rendre plus petit.
Je vais également devoir mettre mes liens en ligne et leur appliquer du style pour avoir des liens en noir puis en orange au hover (au survol).
/* Header */
header{
max-width: 1440px;
margin:auto;
display: flex;
justify-content: space-between;
}
header img{
max-width:150px;
}
nav{
align-self: center;
}
nav ul{
list-style: none;
display: flex;
gap: 20px;
}
nav a{
text-decoration: none;
color:#000;
transition:all 0.2s ease;
}
nav a:hover{
color:orange;
transition:all 0.2s ease;
}
/* Fin header */
J’ai d’abord sélectionner mon logo pour appliquer un max-width à 150px afin de limiter la taille du logo.
Sur le nav j’ai utiliser align-self center afin d’aligner au centre le menu avec le logo.
Pour le ul, j’ai appliquer un list-style none afin de supprimer les points de la liste puis, j’ai utiliser un display flex pour mettre les liens en ligne. Pour finir, j’ai utiliser un gap pour mettre de l’espace entre mes éléments de la liste.
Concernant l’aspect des liens, j’ai d’abord supprimer la décoration qui permettait d’avoir le lien souligné puis j’ai appliquer une couleur noir grace au code couleur #000. Enfin, j’ai utiliser une transition afin d’adoucir l’animation d’entrée et de sortie du lien au survol.
Pour changer l’état du lien au hover (au survol), j’ai utiliser :hover sur mon sélecteur puis j’ai styliser le lien avec une couleur orange.
Nous pouvons voir ci-dessus le résultat header intégré. Le deuxième lien est en orange car celui-ci est survolé par ma souri.
Comment styliser le footer avec le CSS
Ici le footer est très simple, il contient un simple copyright avec un lien externe.
Son style sera donc très facile. Il nous suffit de ne pas contraindre en largeur le footer afin de pouvoir lui appliquer un background gris puis de centrer le texte.
<footer>
<p>Copyright du site web de test <a href="#">Lien externe</a></p>
</footer>
/* Footer */
footer{
background-color: lightgray;
}
footer p{
color:#000;
text-align: center;
padding:20px;
}
footer a{
text-decoration: none;
color:#000;
transition:all 0.2s ease;
}
footer a:hover{
color:orange;
transition:all 0.2s ease;
}
/* Fin footer */
Dans cet exemple, j’ai appliquer un arrière plan gris au footer.
J’ai ensuite appliquer du style au paragraphe. Le padding 20px permet de mettre de la marge interne autour de mon paragraphe.
J’ai terminer en appliquant du style sur le lien du footer de la même manière que sur les liens du menu principal du header.
Dans le prochain article nous parlerons plus en détail du contenu du HTML dans le main ainsi que des balises essentielles à connaître.
Si vous souhaitez apprendre à créer votre site en HTML et CSS, vous pouvez nous contacter directement afin d’obtenir un devis pour la formation et l’accompagnement.
