Introduction au langage CSS [1]

CSS

Les feuilles de style en cascade, généralement appelées CSS, de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).

Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

• 1996 : acceptation des CSS niveau 1 par le W3C, qui les lia au HTML
• 1998 : CSS niveau 2
• 2007 : CSS niveau 2.1
• Aujourd'hui : CSS niveau 3
• CSS niveau 4 : le développement de plusieurs modules des CSS de niveau 4 est en cours depuis 2010.

Séparer la structure de la forme

Avec la généralisation de l'usage des CSS, désormais le mot d'ordre est : séparer la structure de la forme! C'est-à-dire que les instructions concernant la structure (HTML) d'une page web sont complètement séparées des informations concernant sa mise en forme (CSS).

Les avantages

• Conception simplifiée des pages Web;
• Compatibilité accrue sur une large variété d'agents utilisateurs (ordinateurs de table, assistants personnels, téléphone portable, synthétiseur vocal, navigateur braille, etc.);
• Entretien et mise à jour simplifiés.

Références

Le flux Internet

De la saisie d'une adresse dans votre navigateur jusqu'à la réception du document demandé, voici une description brève des étapes d'une requête effectuée d'un ordinateur client (votre ordinateur) vers un serveur.

Étapes d'une requête effectuée d'un ordinateur client vers un serveur

1. Saisie d'une adresse www dans le navigateur.
2. Le navigateur contacte le serveur HTTPS situé à cette adresse.
3. Le serveur HTTPS reçoit la requête du navigateur.
4. Le serveur HTTPS recherche le document Web.
5. Le serveur HTTPS envoie le document Web.
6. Votre navigateur reçoit le document.
7. Votre navigateur traite le code source.
8. Le navigateur affiche la page Web.

À quel moment les CSS interviennent-ils ?

C'est à partir de la dernière étape de la liste précédente qu'interviennent les CSS.

1. Si le document en contient, ils décrivent au navigateur l'aspect visuel que doit prendre le document HTML.
2. Si le navigateur comprend et reconnaît les CSS, il convertit la page en un document que vous pouvez visualiser et avec lequel vous pouvez interagir.
3. S'il n'en comprend qu'une partie, il ignore ce qu'il ne peut déchiffrer.
4. S'il ne comprend pas du tout les CSS, il affiche une version brute du document HTML.

Rédiger des CSS

Tout comme pour le HTML, la méthode la plus simple pour rédiger les CSS consiste à utiliser un éditeur de texte brut.

Les fichiers CSS sont en effet de simples documents texte.

La rédaction des CSS peut se faire à l'aide d'un éditeur de code comme Visual Studio Code.

Où trouve-t-on les règles de style?

En ligne

Les règles de style en ligne sont rédigées à même le balisage HTML. Voici un exemple de règle de style en ligne associée à un élément <td>:

                        <p style="font-size:2em"> ... </p>
                    

Cette règle de style, rédigée à l'intérieur de la balise ouvrante d'un élément "p" (paragraphe), permet d'appliquer une taille de police de caractère de 2em au texte du paragraphe concerné.

Règle générale, cette pratique est à éviter. Mais il existe des situations particulières où les styles en ligne sont pertinents.

Le tableau présentant les couleurs « nommées » des CSS 2.1 que vous pouvez consulter un peu plus bas est un exemple d'utilisation pertinente de règles de style en ligne :

• La colonne de droite de ce tableau comporte 16 cellules de couleurs différentes.
• Dans une feuille de style externe ou interne, il aurait fallu rédiger 16 règles de style distinctes pour ces 16 cellules.
• En plus de ces 16 règles, il aurait aussi fallu inscrire 16 noms de classe distincts dans le balisage HTML.
• Dans cette situation, où chaque cellule est un cas particulier, il peut être pertinent d'avoir recourt aux règles de style en ligne.

Extrait du balisage du tableau cité en exemple (remarquez les règles de style en ligne apparaissant dans les balises <td>):

Feuille de style interne

La feuille de style interne est rédigée à même l'en-tête du document HTML, dans un élément <style> ... </style> mais reste tout de même isolée du balisage HTML proprement dit, comme le montre cet exemple:

Exemple de feuille de style interne

                    <!DOCTYPE html>
                    <html lang="fr">
                      <head>
                        <meta charset="utf-8">
                        <title>Asie centrale - Voyages à travers le monde</title>
                        <style>
                        <!--
                        h2 {
                          color: red;
                        }
                        -->
                        </style>
                      </head>
                      <body>
                      (...)
                    

Feuille de style externe (ou « attachée »)

La feuille de style externe est consignée dans un document comportant l'extension .css. Elle est liée au document HTML par un élément link placé dans la partie head de ce document.

On trouve au tout début d'une feuille de style externe la spécification du type d'encodage de caractères employé (@charset "utf-8";) comme le montre cet exemple:

Exemple de feuille de style externe

                    @charset "utf-8";
                    html {
                      font-family: Arial, Helvetica, sans-serif;
                    }
                    header {
                      background-color: black;
                      max-width: 1000px;
                    }
                    (...)
                    

Les composantes d'une feuille de style

La feuille de style est le document (indépendant ou imbriqué) contenant les règles de style.

Une règle de style est en quelque sorte une directive contenant des indications de mise en forme visant un ou des éléments de contenu d'une page web.

La règle de style est composée des quatre éléments suivants:

1. sélecteur
2. déclaration
3. propriété
4. valeur

Règle de style

Exemple de règle de style écrite avec une déclaration par ligne

                    h1 {
                      font-family: Georgia, "Times New Roman", serif;
                      font-size: 1.4em;
                      color: #0033cc;
                    }
                    

Dans cet exemple, la règle permet de mettre en forme l'élément h1 en lui attribuant une police de caractère (Georgia) ainsi qu'une taille de police (1.4em) et une couleur de police (#0033cc).

À noter que cette règle de style est écrite avec des sauts de ligne et de l'indentation pour assurer que le code soit lisible et bien organisé. C'est la méthode que nous utiliserons tout au long de la session.

Il vous arrivera en effet de voir la même règle écrite ainsi:

Règle de style écrite dans retour à la ligne

                        h1 {font-family:Georgia, "Times New Roman", serif;font-size:1.4em;color:#0033cc;}
                    

C'est tout aussi valide, mais moins facile à lire et à corriger.

À l'instar du HTML, les CSS exploitent les espaces blancs, l'indentation et les sauts de ligne pour une meilleure lisibilité.

Dans une règle de style, l'élément qui choisit la portion du document HTML à mettre en forme est le sélecteur.

Sélecteur

Un sélecteur correspond à l'élément ou les éléments HTML auxquels une règle CSS s'applique.

Le sélecteur de l'exemple précédent est h1. Il s'agit, dans ce cas, d'un élément HTML simple.

• Il est écrit avant la première accolade.
• Notez qu'il est écrit sans les chevrons qui encadrent la balise correspondante dans le document HTML.

Lorsque plusieurs éléments HTML, classes ou identifiants apparaissent au sein d'une même règle, séparés par des virgules, on dit que le sélecteur est «groupé».

Sélecteur groupé

h1, h2 ,h3 { ...

Lorsque le sélecteur comporte une série d'éléments HTML, de classes ou d'identifiants placés dans un ordre hiérarchique, avec des espaces mais sans virgules, on dit que le sélecteur est «composé».

Sélecteur composé

ul li a { ...

Déclaration

Les déclarations sont placées entre les accolades pour les isoler des sélecteurs.

Une déclaration est composée d'une propriété et d'une valeur CSS séparées par un deux-points, le tout se terminant par un point-virgule. Voici l'une des trois déclarations de l'exemple cité plus haut:

Exemple de déclaration

font-family: Georgia, "Times New Roman", serif;

Lorsque plusieurs déclarations apparaissent au sein d'une même règle, comme c'est le cas de l'exemple ci-haut, on dit qu'elles sont groupées. Elles doivent être séparées par des points-virgules.

Exemple de déclarations groupées

                    font-family: Georgia, "Times New Roman", serif;
                    font-size: 1.4em;
                    color: #0033cc;
                    

Propriété

La propriété décrit un aspect de la présentation d'un élément, comme sa couleur, sa taille, etc.

CSS3 propose plus de 300 propriétés et ce nombre est en progression.

La propriété est toujours suivie par une valeur dont elle est séparée par un deux-points.

Dans l'exemple précédent, font-family, font-size et color sont les propriétés ; elles représentent respectivement la police de caractère, sa taille et sa couleur.

Liste non exhaustive de propriétés CSS

Valeur

La valeur est un descripteur définissant une apparence spécifique, comme un nom ou un code de couleur, une mesure de longueur, un pourcentage ou un nombre d'unités.

Dans l'exemple qui précède, les valeurs sont Georgia, "Times New Roman", serif, 1.4em et #0033cc.

Notes sur la couleur

Notation hexadécimale longue

La notation numérique de la couleur utilisée dans l'exemple suivant se nomme notation hexadécimale longue :

1. les deux premiers chiffres désignent le rouge,
2. les deux chiffres du milieu, le vert,
3. les deux chiffres de la fin, le bleu.

Exemple : notation hexadécimale longue

                    h1 {
                      color: #0a4dee;
                    }
                    

Voir cette couleur dans Google

Notation hexadécimale courte

Cette variante de la notation hexadécimale utilise seulement 3 chiffres, lorsque les chiffres sont implicitement dédoublés. Ainsi, #999999 devient #999, #ff0066 devient #f06, etc.

Exemple : notation hexadécimale courte

                    h1 {
                      color: #f06;
                    }
                    

Voir cette couleur dans Google

RGB (Red, Green, Blue)

Les couleurs peuvent aussi être décrites à l'aide du conteneur rgb():

• Valeurs entre 0 et 255 : rgb(50, 10, 204)

Exemple : le conteneur rgb( ))

                    h1 {
                      color: rgb(50, 10, 204);
                    }
                    

Voir cette couleur dans Google

RGBA (Red, Green, Blue, Alpha channel)

Le conteneur rgba() permet d'ajouter une valeur d'opacité (entre 0 et 1) à la couleur décrite:

Exemple : le conteneur rgba( )

                    h1 {
                      color: rgba(50, 10, 204, 0.4);
                    }
                    

HSL (Hue, Saturation, Lightness)

Les couleurs peuvent aussi être décrites à l'aide du conteneur hsl() qui décrit la teinte (hue) en degrés (0 étant rouge, 120 étant vert et 240 étant bleu), la saturation (saturation) en % et la luminosité (lightness) en %.

Exemple : le conteneur hsl( )

                    h1 {
                      color: hsl(100, 50%, 28%);
                    }
                    

Voir cette couleur dans Google

HSLA (Hue, Saturation, Lightness, Alpha channel)

Le conteneur HSLA permet d'ajouter une valeur d'opacité à la couleur décrite.

Exemple : le conteneur hsla( )

                    p {
                      background-color: hsla(24, 0%, 98%, 0.6);
                    }
                    

Couleurs nommées

Certains mots de couleur peuvent également servir à titre de valeur des propriétés de couleur :

Exemple : couleur nommée

                    footer {
                      background-color: maroon;
                    }
                    

Le HTML reconnaît les termes de 140 couleurs, dont 17 couleurs dites standards. Les couleurs standards sont listées dans le tableau suivant:

Informations supplémentaires

Les sélecteurs du DOM

Les exemples de règles CSS les plus évidents utilisent des balises HTML comme sélecteurs: body, h1, p, ul...

Ces règles affectent donc toutes les instances de ces balises dans les pages HTML auxquelle elles sont liées. Par exemple, une règle appliquée au sélecteur h1 affecte tous les éléments h1 du document HTML auquel cette règle de style est liée.

Cet effet n'est pas toujours désirable: on souhaite parfois n'intervenir que sur certaines balises d'un type donné: par exemple, les hyperliens du menu n'ont pas nécessairement les mêmes attributs visuels que ceux du contenu. Or, il s'agit pourtant de la même balise a dans les deux cas.

Pour pallier à cette situation, il existe une panoplie de sélecteurs qui permettent une sélectivité variable, selon le besoin.

Le tableau suivant énumére bon nombre de sélecteurs (il y en a d'autres!) qui permettent de sélectionner directement les éléments du DOM.

Activités d'évaluation

Exercice 3 - Intro au langage CSS

L'exercice 3 est une initiation à l'incorporation de règles de style dans un document CSS.

Sources

• Dupliquez le dossier de votre TP1 et renommez-le grX_nonmprenom_ex3

Documents à remettre

Un dossier rigoureusement nommé comme suit:

• groupe du mercredi : gr1_nominitialeprenom_ex3
• groupes du vendredi : gr2_nominitialeprenom_ex3

contenant les trois fichiers monarticle.html, monformulaire.html et montableau.html, un dossier images et un dossier css contenant le fichier styles.css.

Structure de fichiers :

ou

Échéancier

Remettez le dossier complet, zippé, sur Teams/Devoir, dans l'espace prévu à cette fin, au plus tard :

• le lundi (groupes du mercredi) ou le mercredi (groupe du vendredi) suivant le cours, 9h le matin au plus tard

Grille d'évaluation

Voir la grille d'évaluation complète sur Teams/Devoir.

Travail à faire

Les règles de style que vous allez soit copier, soit rédiger, dans les étapes qui suivent, doivent être mises en forme comme le montre l'exemple suivant, c'est-à-dire, une déclaration par ligne :

1. Démarrez Visual Studio Code

Dans la colonne de gauche de VSC, ouvrez le dossier gr1_nomInitialeprenom_ex3 ou gr2_nomInitialeprenom_ex3 grâce à l'option Ouvrir...; vous aurez ainsi accès à tous les fichiers et dossiers s'y trouvant ;

2. Complétez votre structure de dossiers

Dans la colonne de gauche de VSC, créez un nouveau dossier (en cliquant sur l'icône 'Nouveau dossier') et nommez-le «css».

3. Créez le fichier styles.css dans le dossier css

Dans votre dossier de travail, repérez le dossier css et cliquez-droit sur ce dossier: choisissez Nouveau fichier et nommez ce fichier styles.css.

Assurez-vous que le fichier styles.css est bien dans le dossier css, sinon, faites-le glisser dans ce dossier.

4. Liez la feuille de style aux documents HTML

Afin de lier ce fichier .css au document HTML, faites d'abord afficher le document monarticle.html en cliquant dessus, et insérez la ligne de code suivante à la suite de <title> à l'intérieur de l'élément <head> :

Pour le moment, votre page web ressemble à ceci dans Chrome :

5. Insérez les éléments de structure HTML pour compléter la structure de vos pages

Insérez les conteneurs header, nav, main et footer dans vos trois pages HTML comme le montre l'image suivante.

Cette étape est cruciale avant d'entamer la rédaction des règles de style, car les règles de style y font référence.

6. Insérez une première règle de style pour la réinitialisation de certaines propriétés

Dans votre feuille de style, sous l'encodage de caractères, insérez le code suivant (y compris le commentaire CSS se trouvant au début de la règle) :

• Il s'agit des règles de style chargées de réinitialiser les valeurs de marges internes et externes de tous les éléments HTML.
• Actualisez l'affichage de votre navigateur et constatez le résultat: les marges en bordure du document, ainsi qu'entre les titres et les paragraphes ont disparu :

Insérez des valeurs à margin et padding (par exemple: 50px) pour en voir l'effet, puis remettez le tout à zéro.

7. Charte typographique

Dans votre feuille de style, à la suite du code s'y trouvant, insérez le code suivant :

Notez le changement obtenu : la police de caractères a été modifiée :

8. Mise en forme des éléments de structure

Insérez les règles suivantes qui définissent la mise en forme des éléments de structure ajoutés à vos documents :

La propriété width limite la largeur des lignes de texte pour rendre la lecture plus agréable.

Les marges automatiques (margin: 0 auto) à gauche et à droite permettent de centrer le corps de l'article sur la page:

9. Mise en forme des hyperliens

Insérez les règles suivantes qui définissent la mise en forme des hyperliens de tout le document :

Ce code façonne les états des hyperliens; survolez les liens pour noter l'état au survol :

10. Mise en forme générale des paragraphes

Définissez maintenant l'allure générale des paragraphes en insérant le code suivant dans votre feuille de style :

Notez la moficiation de l'espace entre les paragraphes :

11. Mise en forme des titres

Insérez le code suivant dans votre feuille de style pour mettre en forme les titres et sous-titres :

Notez que la taille des caractères, l'alignement du texte et ses marges ont changé :

N'hésitez pas à modifier la taille et la couleur pour expérimenter.

12. Mise en forme des images et de la vidéo

Ajoutez ce code pour mettre en forme les images et la vidéo :

Remarquez comment les marges et l'alignement de l'image et du figcaption s'ajustent :

13. Mise en forme du contenu de 'header'

Inscrivez ce code pour mettre en forme le contenu de 'header' :

D'entrée de jeu, le texte est centré.

Ensuite, pour sélectionner le nom du site, on utilise un sélecteur composé (header p) qui vise le paragraphe inclus dans header :

Le type, la casse et la taille de la police sont ajustés, et vous noterez l'ajout de bordures en haut et en bas :

14. Mise en forme de la navigation principale

Écrivez la règle suivante pour raffiner la mise en forme de la navigation principale :

Le sélecteur de type nav permet d'ajouter de l'espacement dans le haut et le bas du menu.

Le sélecteur ul de son côté présente la déclaration list-style-type:none qui élimine les boulets de la liste, et la déclaration display:inline-block qui place les éléments de liste côte-à-côte tout en permettant d'attributer une largeur fixe :

15. Mise en forme la section principale 'main'

Rédigez cette règle à la suite des autres :

Les sélecteurs p:first-of-type et p:nth-of-type(2) permettent de sélectionner les premier (date) et deuxième (source) éléments de type 'p' à l'intérieur du conteneur 'main' :

16. Mise en forme du formulaire

La mise en forme du formulaire nécessite un peu de balisage supplémentaire pour effectuer un travail satisfaisant.

Insérez les éléments 'div' suivants afin d'améliorer la structure des couples label+input :

Afin de structurer les groupes de boutons radio et de cases à cocher, insérez les éléments 'ul' et 'li' suivants :

Écrivez cette règle pour mettre en forme le formulaire à l'aide des sélecteurs qui permettent de pointer les éléments spécifiques de celui-ci :

17. Mise en forme du tableau

Ajoutez les règles suivantes pour mettre en forme le tableau de la page montableau.html :

18. Mise en forme du pied de page 'footer'

Ajoutez la règle suivante pour mettre en forme le pied de page :

À ce stade, le résultat devrait ressembler à ceci :

19. Défi #1 : Personnalisez la couleur des liens de la navigation principale

Analysez les règles de style utilisées pour mettre en forme les hyperliens.

Modifiez la couleur des liens de la navigation principale (ceux qui se trouvent dans l'élément nav), sans affecter les autres liens du document.

20. Défi #2 : Ajoutez une lettrine

L'ajout d'une lettrine donnerait un chic fou à votre article.

En vous inspirant de l'exemple Codepen plus bas, relevez le défi d'ajouter une lettrine au premier paragraphe de texte du contenu principal.

Modifiez ensuite les déclarations suivantes afin d'ajuster la lettrine à vos documents :

• la police de caractère,
• la couleur du texte,
• la hauteur de ligne
• et les autres propriétés au besoin.

See the Pen c04-lettrine01 by Sylvain Lamoureux (@slamoureux) on CodePen.