Aller au contenu

CSS : style d'une page web

Dans le dépliant ci dessous se trouve le code d'une petite page HTML, avec quelques citations relativement inspirantes.

Code de la page 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!doctype html> 
<html>

<head></head>

<body>
    <h1>Citations relativement inspirantes</h1>
    <h5>(par des gens relativement inspirants)</h5>

    <article>
        <quote>Rien dans la vie n'est à craindre, tout doit être compris. C'est maintenant le moment de comprendre
            davantage, afin de craindre moins.</quote>
        <cite>Marie Skłodowska-Curie</cite>
    </article>

    <article>
        <quote>La seule chose qu'on est sûr de ne pas réussir est celle qu'on ne tente pas.</quote>
        <cite>Paul-Emile Victor</cite>
    </article>

    <article>
        <quote>Le courage, c'est de chercher la vérité et de la dire.</quote>
        <cite>Jean Jaurès</cite>
    </article>
    <article>
        <quote>Vision nocturne, phare directionnel, je suis dans la cuisine, four traditionnel.</quote>
        <cite>Kaaris</cite>
    </article>

    <article>
        <quote>Le premier savoir est le savoir de mon ignorance : c'est le début de l'intelligence.</quote>
        <cite>Socrate</cite>
    </article>

    <article>
        <quote>Vous devriez vous concentrer sur le cours de CSS au lieu de lire les citations.</quote>
        <cite>Félix Bertoni</cite>
    </article>
    <article>
        <quote>L'intelligence, c'est la capacité à éviter le travail, tout en faisant le travail.</quote>
        <cite>Linus Torvalds</cite>
    </article>
    <article>
        <quote>La question de savoir si les ordinateurs peuvent penser est similaire à la question de savoir si les
            sous-marins peuvent nager.</quote>
        <cite>Edsger Djikstra</cite>
    </article>
    <article>
        <quote>Une mesure exacte vaut l'avis d'un millier d'experts.</quote>
        <cite>Grace Hopper</cite>
    </article>
    <article>
        <quote>Méfiez-vous des citations sur Internet, elle sont parfois attribuées à tort.</quote>
        <cite>Napoléon Bonaparte</cite>
    </article>
    <article>
        <quote>
            Un problème sans solution est un problème mal posé.</quote>
        <cite>Albert Einstein</cite>
    </article>
</body>

</html>

Copiez-collez là dans Notepad et affichez-là dans un navigateur.

Soyons honnêtes, c'est sobre, certes, mais c'est surtout méga moche. Le site ne donne pas vraiment envie de venir s'inspirer.

Pour améliorer le visuel de la page web, on va devoir donner des informations supplémentaires au navigateur. Par exemple pour changer la couleur d'un élément. Celà passe par le langage CSS, pour Cascading Style Sheet.

Le principe du CSS est qu'on va définir des règles de présentation qui modifient l'aspect des éléments, du style : 

Je veux que tous les <articles> soient rouges !

On va inscrire ces règles dans une élément <style>, que l'on placera dans l'élément <head> de la page. 

1
2
3
4
5
6
7
8
9
<!doctype html> 
    <html>

    <head>
        <style>


        </style>
    </head>

Quand on a beaucoup de règles, on préfère en général les mettre dans fichier à part du HTML. Mais dans notre cas ce sera plus simple dans le même fichier.

Votre première règle CSS

On va partir du principe qu'un bon site de citation doit avoir son texte centré.

On va donc créer une règle qui va changer l'alignement du texte de l'élément body.

Cascade

Le choix de quelle règle de style s'applique à quel élément est fait par un algorithme appelé cascade. Il est relativement compliqué1 et nous ne le détailleront pas ici. Ce qu'il faut retenir, c'est que certaines règles appliquées à un élément sont appliquées aux éléments qu'il contient, ses descendants.

Pour celà, on utilise la syntaxe suivante : 

element {
    regle1:valeurs1;
    regle2:valeurs2;
}

Dans notre cas, la règles est : 

body {
    text-align:center;
}

Ajoutez-la dans l'élément style et rechargez la page dans le navigateur.

Changer la couleur du fond et du texte

On va maintenant changer la couleur du fond et éventuellement du texte. Pour ça, on va cibler encore une fois le body, avec les règles:

color:codecouleur;/* couleur du texte. Ceci est un commentaire, c'est pas lu par le navigateur */
background-color:codecouleur; /* couleur du fond */

On va commencer par passer le fond dans une autre couleur. Trouver de jolies couleurs est compliqué. Je vous propose donc quelques couleurs qui devraient être OK pour ce qu'on va en faire. Choisissez celle que vous préférez:

Couleur
#009485
#EF5552
#4051B5
#4CAE4F
#757575
#CBDC38
#795649
#2E303E
#EA7E96

Par exemple, si on choisit le rose de la dernière couleur, ça donne : 

body {
    text-align:center;
    background-color:#EA7E96; /* ici le code de couleur que vous avez choisi */
    color:#FFFFFF;
}
n'oubliez pas de rafraîchir la page dans le navigateur après une modification des règles, sinon vous ne verrez pas les changements !

Changer les espacements

En CSS, on peut spécifier des marges (margin) et des rembourrages (padding) pour les éléments.

Une marge va garder à distance les autres éléments, alors qu'un rembourrage va créer un espace entre le bord de l'élément et son contenu.

Ajoutons une marge à tous les articles : 

article {
    margin: 50px;
}

Changer le positionnement

On veut que le nom des personnes citées soit affiché sous les citations, pour plus de lisibilité. Pour celà, on va devoir exprimer le fait que les éléments <quote> et <cite>, qui se comportent comme du texte et s'affichent sur la même ligne, doivent se comporter comme des éléments de structure, les block, et s'afficher l'un en dessous de l'autre.

On va utiliser la règle display sur eux, qui permet de changer le comportement d'un élément.

quote {
    display:block;
}
cite {
    display:block;
}

Code CSS complet

Voici un petit résumé du code CSS complet, qui va dans l'élément <style>

body {
    text-align: center;
    background-color: #EA7E96;
    color: #FFFFFF;
}

article {
    margin: 50px;
}

quote {
    display: block;
}

cite {
    display: block;
}

Si vous avez fini en avance, bravo !

Essayez de modifier encore la page pour l'améliorer, n'hésitez pas à chercher des informations sur Internet...

Par exemple :

  • Passer le texte des citations en gras.
  • Trouver une meilleure couleur.
  • Alterner les entre deux couleurs pour les citations, ou avoir des couleurs différentes pour le titre et les citations.
  • Agrandir légèrement l'espace entre une citation et son auteur.
  • (difficile, vous devrez aussi modifier le code HTML) : réduire la largeur maximale du texte des citations
  • (difficile, vous devrez probablement modifier le code HTML) : afficher le nom d'un auteur de citation décalé vers la droite par rapport au centre de la page.

  1. https://developer.mozilla.org/fr/docs/Web/CSS/Cascade ↩