On ne va pas se mentir. Jusqu’ici, nos sites étaient plutôt moches.
Mark Andreessen
Né en 1971
L’informaticien américain Mark Andreessen est l’un des créateurs du premier navigateur web (Mosaic) en 1993 ainsi que le fondateur de Netscape, la 1ère entreprise entièrement tournée vers Internet. Il n’est pas à proprement parler le créateur du CSS mais ses nombreuses innovations vont pousser d’autres ingénieurs à travailler dessus, notamment Håkon Wium Lie qui sera le premier à proposer l’idée même du CSS.
CSS a été créé en 1996
A partir de ce chapitre, nous allons pouvoir styliser nos pages grâce à un second langage fondateur du web: le CSS. Le CSS (Cascading Style Sheets, aussi appelées feuilles de style) a pour rôle de gérer l’apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996, et il est toujours au fondement même du style du Web de nos jours.
Où écrire le CSS ?
Il est possible d’écrire du code CSS directement dans des fichiers .html grâce aux balises . Cependant, cela rend le code difficile à lire et ce n’est pas la méthode que nous allons utiliser ici.
Nous allons écrire tout notre code CSS dans un fichier .css puis le lier aux différentes pages .html de notre site.
Comment faire ?
Pour lier les fichiers .css et .html, vous allez rajouter une ligne dans le fichier .html pour indiquer au navigateur d’aller chercher la feuille de style associée.
Cette ligne s’ouvre avec la balise orpheline et on la place à l’intérieur de la balise :
CodePen
Le site web CodePen est un éditeur en ligne permettant de tester très facilement du code HTML et CSS (et JS).
Appliquer une propriété CSS à une balise HTML
Voici à quoi ressemble un bout de code CSS:
Exercice 1
Rendez-vous sur CodePen (cet exercice a été préparé par mon collègue V. Guertler. Vous devriez trouver un code HTML déjà tout prêt.)
Dans la partie CSS, copiez-y le bout de code donné ci-dessus.
Pouvez-vous dire ce que fait le code CSS du fichier style.css ?
Réponse
Le code CSS signifie : “Je veux que tous les paragraphes soient écrits en bleu”.
Le CSS fonctionne avec 3 éléments différents:
Le sélecteur: ici on écrit les noms des balises HTML dont on veut modifier l’apparence. Par exemple, si je veux modifier l’apparence de tous les paragraphes , je dois écrire p (sans les chevrons).
La ou les propriétés CSS: les effets de style sont listés via des propriétés. Par exemple, color permet d’indiquer la couleur du texte, font-size permet d’indiquer la taille du texte, etc. Il existe BEAUCOUP de propriétés CSS ! Mais rassurez-vous, vous n’avez pas besoin de les connaître toutes par cœur.
…et leurs valeurs: pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la propriété color, il faut indiquer le nom de la couleur. Pour font-size, il faut indiquer quelle taille on veut, etc.
les touches option⌥ + ( pour faire l’accolade ouvrante;
et les touches option⌥ + ) pour faire l’accolade fermante;
Exercice 2
Modifiez le code CSS de l’exercice précédent (pizza) pour changer tous les titres principaux (h1) en rouge, tous les éléments de liste (li) en vert et les paragraphes (p) en bleu.
Solution
p
{
color
:blue;
}
h1
{
color
:red;
}
li
{
color
:green;
}
Appliquer une propriété CSS à plusieurs balises HTML
Et si je veux appliquer la couleur bleue aux paragraphes et aux titres ?
Il suffit de donner la liste des balises qui seront affectées par ce changement de propriété (séparées par des ,):
Nuancer les effets
D’accord maintenant TOUS les paragraphes du site sont bleus. Est-il quand même possible de changer la couleur de quelques paragraphes ? Si oui, comment d’après vous ?
Non, c’est impossible. Ils resteront bleus.
Oui c’est possible, en ajoutant une autre couleur dans la propriété CSS.
Oui c’est possible, en ajoutant un attribut aux paragraphes que l’on veut d’une autre couleur.
Oui c’est possible, par magie ?
Réponse
Eh oui c’est possible, en ajoutant un attribut aux paragraphes que l’on veut d’une autre couleur ! Et heureusement ! Vous allez voir que les attributs class et id permettent d’appliquer des propriétés CSS de manière plus précise qu’en ciblant directement des balises.
Appliquer un style à une classe d’éléments
Imaginez que vous voulez appliquer la couleur violette à certains éléments de votre page, indépendemment de leur type (titre, paragraphe, liens, etc).
Pour ce faire, vous allez commencer par créer une classe CSS:
Ce code définit une classe nommée ma-classe et demande à ce que tous les éléments qui en font partie soient écrits en violet (purple en anglais). Notez qu’il faut mettre un . avant le nom de la classe.
Maintenant, il faut spécifier quels éléments HTML doivent faire partie de ma-classe. Cela se fait en spécifiant l’attribut class d’un élément HTML:
Testez par vous-même. N’hésitez pas à le faire dans CodePen.
Exercice 3
Modifiez le code CSS de l’exercice précédent (pizza) pour mettre les éléments de la liste d’ingrédients qui contiennent de la tomate (1er et 3ème) en rouge.
Pour ce faire, créez une classe CSS et ajoutez les attributs HTML correspondants.
Solution
Pour faire des accolades sur le clavier, vous utilisez
Les propriétés CSS définies avec des classes ont la priorité sur les propriétés plus générales définies au niveau des balises.
Appliquer un style à un élément unique
Si l’attribut class permet de créer une classe d’éléments partageant un style commun, l’attribut id permet de définir un style pour un UNIQUE élément en particulier.
On définit les propriétés de cet élément unique en commençant par un dièse #:
À retenir
L’attribut id a la priorité sur tout le reste, mais il faut l’utiliser avec parcimonie car il crée plein d’éléments uniques rendant le code plus difficile à maintenir.
Les balises universelles
Tout ça c’est très bien mais comment appliquer un style à un mot particulier qui n’est pas entouré par une balise ?
Par exemple, comment écrire en rouge automatique et information dans le paragraphe suivant:
"L'informatique est la science du traitement automatique de l'information !"
Cela serait facile si ces deux mots étaient entourés par des balises… Eh bien on a inventé des balises qui ne servent à rien, exactement dans ce but ! Il s’agit de:
< span>< /span>
et < div>< /div>
Leur unique utilité est de regrouper du contenu HTML afin de pouvoir appliquer un style CSS.
Quelle est la différence entre ces deux balises ?
< span>< /span> est une balise qui ne provoque pas de retour à la ligne (tout comme les balises < a>< /a>, < strong> < /strong> , etc). On dit que ce sont des balises de type inline.
De l’autre côté, < div>< /div> provoque un retour à la ligne (comme < p>< /p>, < h1>< /h1>, etc). On dit que ce sont des balises de type block.
Pour mettre en couleur automatique et information dans le paragraphe ci-dessus. Utiliseriez-vous plutôt < span>< /span> ou < div>< /div>?
Solution
Il vaut mieux utiliser < span>... < /span> pour éviter de créer un retour à la ligne après chacun des mots. La balise < div> ... < /div> sert plutôt à définir un bloc et est beaucoup utilisée dans la construction de la mise en page.
Voici un code qui fonctionne : "L'informatique est la science du traitement < span style="color:red"> automatique < /span> de < span style="color:red"> l'information < /span> !"
Une autre manière de procéder serait de créer une classe rouge et de la déclarer dans le fichier css.
Rendez-vous sur CodePen pour tester ces deux manières de faire.
Exercice 4
Voici un Mario entièrement réalisé avec du css.
Cliquez sur le lien pour voir comment ça a été fait (n’hésitez pas à essayer de modifier la couleur de ses yeux ou autres si vous vous en sentez capable !).
Aidez-vous avec cet autre lien pour les codes couleur en rgba.
Exercice récapitulatif 5 à rendre sur Moodle
Il est temps d’ajouter un peu de style à votre site de photographe !
Reprenez votre dossier photographie des exercices récapitulatifs précédents.
Créez-y un fichier style.css, puis, dans chacun de vos fichiers .html, ajoutez le lien vers la feuille de style style.css comme expliqué au début de ce chapitre.
Faites les améliorations suivantes:
Appliquez la couleur noire (black) à tous vos liens.
Appliquez une couleur de police et une couleur de fond à votre nom (titre principal de la page d’accueil).
Appliquez le style color:#A5B4FC; à 2 mots séparés de votre paragraphe auto-biographique.
Dans votre page galerie, appliquez une couleur de fond à un bloc regroupant toute vos photos.
Dans votre page contact, appliquez une couleur aux items de la liste (li).
Créer une classe (ma-classe) que vous appliquerez à un seul paragraphe et à un seul sous-titre. Vous pouvez choisir lesquels. Cette classe aura un effet sur la couleur du texte et sa taille.
Déposez le dossier compressé sur Moodle à l’endroit prévu.
