Retour
6/ CSS: Styliser une page
Apprendre à styliser vos pages web en utilisant le CSS.
Maintenant nous allons utiliser toutes les fonctionnalités CSS vues dans les chapitres pécedents, pour styliser une page web.
0
Dépot GITHUB
Prérequis
Il est conseillé d'avoir suivi la première partie du tutoriel:
CSS: Introduction.
Structure du projet
Nous allons reprendre la page que nous avions implémenté lors de ce tutoriel:
Créer une page web avec HTML.
Et nous allons ajouter un fichier CSS nommé style.css
📦6.css-page
┣ 📂images
┃ ┣ 📜JohnDoe.png
┃ ┣ 📜logo.svg
┃ ┗ 📜LoremIpsum.png
┣ 📜favicon.ico
┣ 📜style.css
┗ 📜index.html
1/ Le head
Pour commencer, nous allons lier notre fichier CSS dans le document HTML:
<head>
<meta charset="utf-8" />
<!--Image afficher dans la barre d'onglet-->
<link rel="icon" href="./favicon.ico">
<!--Titre du site affiché dans la barre d'onglet-->
<title>BRAND: Acceuil</title>
<!--Description du site-->
<meta name = "description" content= "Déscription de votre site en quelques mots" >
<!-- Image du site-->
<meta property="og:image" content="./images/logo.svg">
<!--Instructions sur la taille et l’échelle du viewport-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--Lier notre fichier css pour le style-->
<link rel="stylesheet" href="./style.css">
</head>
2/ Style général
Grâce au sélecteur universel nous pouvons cibler tous les éléments du DOM.
Par exemple, nous pouvons l'utiliser pour enlever les margin et padding ajoutés par les navigateurs.
Et pour changer la police de tout le texte de la page.
/* 1. Importer un police de texte depuis google */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,900;1,100;1,400;1,900&display=swap');
/* 2. séléctionne tout les éléments du document */!
* {
/* 2-1. Changer la police */
font-family: 'Roboto', sans-serif;
/* 2-2. Enelver les margin et padding */
margin: 0;
padding: 0;
}
/* 3. Sélectionne les inputs et buttons*/
input,
button {
padding: 0.6em;
border-radius: 0.5em;
border: none;
}
1: Nous avons utiliser les polices gratuites de Google, et importé la police nomméeRobotoavec différentes tailles ect...2: Sélecteur universel, permettant de sélectionner tous les éléments pour:2.1: changer la police de tout le texte de la page.2.2: enlever lesmarginetpaddingajouté par les navigateurs.
3: Sélecteur de balise, permettant de séléctionner tous les champs utilisateurs et boutons du DOM.
3/ L'en-tete
Dans notre HTML, nous avons la balise header contenant une image, le titre principal de la page et une description:
<header>
<div>
<!-- Titre visible de la page -->
<h1>Bienvenue sur BRAND!</h1>
<!-- Déscription visible de la page -->
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Obcaecati soluta rerum quam perspiciatis repudiandae eveniet vero molestiae maxime,
veniam expedita, aperiam explicabo alias nisi facilis blanditiis,
deserunt veritatis nam dolore.
</p>
</div>
<!-- Image visible de la page -->
<img src="./images/logo.svg" alt="Lettre B en bleu et orange." width="100%"/>
</header>
Puis dans notre CSS, nous pouvons styliser le header pour afficher l'image à gauche, et le titre et déscription à droite:
/* 1. Séléctionne la balise header */
header{
padding: 2em;
/* 1-1. Met la disposition du contenu en flex */
display: flex;
/* 1-2. centre les éléments sur l'axe croisé */
align-items: center;
/* 1-3. Inverse l'ordre des éléments */
flex-direction: row-reverse;
/*1-4. Ajoute un gradiant comme couleur de fond */
background:linear-gradient(0deg, rgba(31, 55, 101, 1) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 100%);
}
/* 2. Selectionne tout les éléments dans la balise header */
header * {
color: #1f3765;
}
/* 3. Selectionne les div qui sont des enfants directe du header */
header > div{
width: 50%;
}
/* 4. Selectionne les img qui sont des enfants directe du header */
header > img{
width: 50%;
}
h1{
font-size: 3em;
padding: 0.5em 0;
}
header p{
font-size: 1.2em;
}
1: Sélecteur des balisesheader:1.1: Afin de mettre les éléments enfants en ligne, nous avons ici utiliser ledisplay: flex.1.2: Pour centrer les éléments sur l'axe vertical, nous utilisons icialign-items: center.1.3: Suivant la disposition des éléments dans notre HTML, l'image sera à droite. Pour la mettre à gauche, nous inversons l'ordre des éléments avecflex-direction: row-reverse.1.4: Nous pouvons appliquer un gradient en couleur de fond des éléments. Voici un site pour générer des gradients facilement.
2: Sélectionne tous les éléments enfants du header. Nous l'utilisons ici pour changer la couleur de tout les texte duheader3: Sélectionne les div qui sont enfants de la baliseheaderafin changer sa taille à la moitié de celle du parent.4: Sélectionne les img qui sont enfants de la baliseheaderafin changer sa taille à la moitié de celle du parent.
4/ La barre de navigation
Dans le HTML, nous avons l'élément nav:
<!-- La barre de navigation. -->
<nav>
<!-- Un contenant pour le logo et la marque. -->
<div>
<img src="./images/logo.svg" alt="Lettre B en bleu et orange." width="30px"/>
<span id="brand">BRAND</span>
</div>
<!-- Le menu avec des liens et un formulaire. -->
<div id="menu">
<!-- Une liste de liens vers d'autre page ou sections. -->
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#articles">Articles</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<!-- Un formulaire de recherche afin de naviguer de façon non‑linéaire.-->
<form>
<input type="search" name="q" placeholder="Rechercher" />
<input type="submit" value="Lancer !" />
</form>
</div>
</nav>
Puis dans le CSS:
/* 1. Sélectionne les balises nav et les éléments avec id=menu */
nav,
#menu {
display: flex;
align-items: center;
}
/* 2. Sélectionne les balises nav */
nav {
padding: 1em;
background-color: #1f3765;
/* 2-1. Permet de coller la barre lors du scroll */
position: sticky;
/* 2-2. Positionne la barre en haut de l'écran aprés le scroll */
top: 0;
/* 2-3. ajoute des l'espace entre les éléments */
justify-content: space-between;
}
nav * {
color: whitesmoke;
}
/* 3. Sélectionne les éléments avec id=brand */
#brand {
font-size: 1.5em;
font-weight: bold;
}
/* 4. Sélectionne les éléments li dans la liste ul enfants directe du menu */
#menu > ul li {
margin: 0 1em;
/* 4-1. Change la disposition de l'élément en disposition en ligne */
display: inline;
/*4-2. Permet d'enlever le style ajoutés aux éléments d'une liste */
list-style: none;
}
/* 5. Sélectionne les a contenu dans des li contenu dans les listes ul enfant direct du menu */
#menu > ul li a {
font-size: 1.2em;
/*5-1. Enleve le soulignement du texte */
text-decoration: none;
}
/*6. Sélectionne l'élément avant et aprés le contenu de la liste contenu dans l'élément avec id=menu */
#menu ul::before,
#menu ul::after {
content: "";
border-left: 2px solid whitesmoke;
margin: 0 1em;
}
/* 7. Les input possédant l'attribut type="submit" ET les button contenus dans la nav */
nav input[type="submit"],
button {
background-color: #ec5534;
color: whitesmoke;
transition: background-color 0.2s ease-in-out;
}
/* 8. Séléctionne les button quand la souris est dessus */
nav input[type="submit"]:hover {
background-color: #ed907b;
transition: background-color 0.2s ease-in-out;
}
1: Sélecteur logiqueETpermettant de sélectionner plusieurs éléments.2: Sélectionne toute la barre de navigation:2.1: Nous pouvons faire en sorte de coller la barre sur l'écran quand l'utilsateur scroll avec:position: sticky.2.2: Nous voulons coller la barre en haut de l'écran, on utilise donctop: 0px.2.3: Nous voulons aussi séparer le logo et le nom de marque, des liens et champ de recherche, nous utilisons doncjustify-content:space-between.
3: Sélectionne d'élément par identifiant pour ciblé l'élément avecid="brand".4: Sélectionne les éléments dans la liste enfant direct du menu.4.1: Nous voulons mettre en ligne les éléments de liste contenant les liens de la page.
5: Sélectionne les liensacontenus dans les élémentslicontenus dans les listesulenfants directe du menu5.1:Enleve le soulignement du texte.
6: Sélectionne l'élément avant et aprés le contenu de la listeulcontenu dans l'élément avec id=menu7: Sélectionne les champsinputpossédant l'attributtype="submit"dans lanav, ET tous les boutons.8: Sélectionne les champsinputpossédant l'attributtype="submit"dans lanavquand la souris passe dessus.
5/ Le contenu principale
Dans le HTML, la balise main contient des sections (articles, contact), et chacune de ces section possède un titre h2, nous allons ajouter du style à tous les titres h2:
h2 {
font-size: 2.2em;
padding: 0.5em;
text-align: center;
color: #ec5534;
}
5.1/ Les articles
Dans la section articles, nous avons deux article avec pour chacun, un titre h3, une description et une image:
<!-- La section des articles -->
<section id="articles">
<!-- Titre de la section des articles -->
<h2>Les articles</h2>
<!-- Un article -->
<article id="article1">
<h3>Lorem Ipsum, c'est quoi?</h2>
<img src="./images/LoremIpsum.png" alt="Icon d'une image sur fond gris">
<div>
<p>
La phrase latine "<i>Lorem ipsum dolor sit amet consectetur</i>" est
utilisée depuis le XVIe siècle par des typographes puis par des graphistes
pour visualiser l'espace occupé par un texte et tester les différentes
polices de caractères.
</p>
<p>
L'extrait complet
<blockquote cite="https://loremipsum.io/fr/">
'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit.'
</blockquote>
siginfie
<blockquote cite="https://fr.wikipedia.org/wiki/Lorem_ipsum">
'Personne n'aime la douleur en elle-même,
ne la recherche et ne la souhaite,
tout simplement parce qu'il s'agit de la douleur.'
</blockquote>
</p>
</div>
</article>
<!--Balise pour ajouter un ligne de séparation -->
<hr>
<!-- Un deuxiemme article -->
<article id="article2">
<h3>Qui est John Doe ?</h2>
<img src="./images/JohnDoe.png" alt="Icon d'une image sur fond gris">
<div>
<p>
En anglais, <strong>John Doe</strong> (version féminine : Jane Doe) est
une expression qui désigne <strong>une personne non identifiée</strong>:
« Monsieur X », « Monsieur Tout-le-monde ».
Pour les très jeunes enfants, l'équivalent est « Baby Doe »,
ou encore « Jonnie Doe » ou « Janie Doe ».
</p>
</div>
</article>
</section>
Puis dans le CSS:
article {
display: flex;
flex-wrap: wrap;
background-color: rgb(233, 233, 233);
padding: 1em;
margin: 1em;
border-radius: 1em;
}
article > * {
box-sizing: border-box;
width: 45vw;
padding: 1em;
}
article img {
object-fit: cover;
}
article p {
font-size: 1.2em;
}
article i {
color: #ec5534;
font-weight: bold;
}
article strong {
color: #ec5534;
}
article h3 {
width: 100%;
font-size: 2em;
text-align: center;
margin-bottom: 1em;
padding: 0 0 1em 0;
border-bottom: 1px solid #1f3765;
}
5.2/ La section contact
Dans la section contact, nous avons un formulaire permettant de choisir un sujet et d'envoyer un message:
<section id="contact">
<!-- Titre de la section contact -->
<h2>Contactez nous</h2>
<!-- Formulaire de contact -->
<form action="post">
<!-- Label et champ pour l'email -->
<label for="email">Votre adresse mail: </label>
<input id="email" type="email" name="email" placeholder="exemple@exemple.com" />
<!-- Groupes de choix du sujet-->
<fieldset>
<!--Legende du groupe de champs -->
<legend>Sujet:</legend>
<!-- Label et choix pour pour poser une question -->
<input type="radio" id="question" name="sujet" value="question" />
<label for="question">Vous avez une question?</label>
<br />
<!-- Label et choix pour émettre une réclamation -->
<input type="radio" id="reclamation" name="sujet" value="reclamation" />
<label for="reclamation">Vous avez une réclamation?</label>
<br />
<input type="radio" id="autre" name="sujet" value="autre" />
<label for="autre">Autre chose?</label>
</fieldset>
<label for="message">Votre message</label>
<br />
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<br />
<button>Envoyer !</button>
</form>
</section>
Puis dans le CSS:
#contact {
margin: 1em 0;
}
#contact form {
background-color: rgb(233, 233, 233);
padding: 2em;
margin: auto;
border-radius: 1em;
width: 100%;
max-width: 300px;
display: flex;
flex-direction: column;
align-items: center;
}
label[for="email"] {
display: none;
}
#contact input {
margin: 0 0 1em 0;
}
fieldset {
margin: 1em 0;
padding: 1em;
}
label[for="message"] {
font-size: 1.2em;
text-decoration: underline;
margin-bottom: 0;
}
input[type="email"],
textarea {
width: 100%;
}
#contact button {
min-width: 100px;
}
6/ Le contenu en relation
Dans la balise aside, on met souvent quelques informations autour du sujet, liens, citations, annonces...
<!-- Le contenu « à côté »-->
<aside>
<h2>En relation:</h2>
<!-- Liste ordonnés des articles de la page-->
<ol>
<!-- En relation avec l'article 1-->
<li>
<!-- Lien vers interne l'article 1-->
<a href="#article1">Lorem Ipsum, c'est quoi?</a>
<!-- Liste de liens externes en relation avec l'article 1-->
<ul>
<li>
<a href="https://fr.wikipedia.org/wiki/Lorem_ipsum" target="_blank">
Lorem ipsum sur Wikipedia
</a>
</li>
<li>
<a href="https://loremipsum.io/" target="_blank">
Générateur de texte Lorem Ipsum
</a>
</li>
</ul>
</li>
<!-- En relation avec l'article 2-->
<li>
<!-- Lien interne vers l'article 2-->
<a href="#article2">
Qui est John Doe ?
</a>
<!-- Liste de liens externes en relation avec l'article 2-->
<ul>
<li>
<a href="https://fr.wikipedia.org/wiki/John_Doe" target="_blank">
John Doe sur Wikipedia</a>
</li>
<li>
<a href="https://ui-avatars.com/" target="_blank">
API générateur d'avatars
</a>
</li>
</ul>
</li>
</ol>
</aside>
Puis dans le CSS:
aside {
background-color: #e4e4e4;
padding: 1em;
}
aside ol {
padding: 1em;
}
aside ol > li {
border-top: 1px solid #1f3765;
border-bottom: 1px solid #1f3765;
padding: 1em;
}
aside ol > li > a {
font-size: 1.5em;
font-weight: bold;
color: #ec5534;
}
aside ul > li > a {
font-size: 1.1em;
color: #1f3765;
}
7/ Le pied de page
Et enfin pour le pied de page:
<!-- Le pied de page utilisé sur toutes les pages -->
<footer>
<p>©Copyright 2050 par personne. Tous droits reversés.</p>
</footer>
Puis dans le CSS:
footer {
background-color: #1f3765;
color: whitesmoke;
padding: 3em;
margin: 0;
}
8/ Resultat complet de la page
Conclusion
Ce chapitre conclut la série d'initiation au CSS.
Le CSS nous permet de styliser nos pages web de manière très complexe, nous avons donc couvert que les bases du langage.
Vous trouverez dans la section CSS plusieurs autres tutoriels, pour approfondir vos connaissances et apprendre des techniques avancées.
Sinon, pour l'étape d'après, il est temps de passer au Javascript. De connaître les bases de ce langage de programmation et comment l'utiliser pour ajouter de l'interaction dans nos pages, et les rendre plus dynamiques.
Aller plus loin
Commentaires
IsLoading
