Fichier CSS

Identification

Infoforall

4 - Créer un fichier CSS


Nous allons voir maintenant comment créer un fichier CSS. De cette façon, toutes vos pages pourront pointer vers le même fichier CSS et donc utiliser toutes les mêmes propriétés CSS.

Les fichiers HTML ont comme extension .html ou .htm.

Les fichiers CSS ont eux une extension en .css.

Logiciel nécessaire pour l'activité : Atom ou Notepad++ (Windows) ou Notepaddd (Linux)

1 - Création des fichiers

Nous allons maintenant créer un véritable CSS en dehors des pages HTML : cela nous permettra d'avoir le même aspect sur toutes les pages d'un même site. L'apparence sera centralisée dans un seul fichier. De cette façon, il suffit de changer la couleur dans ce fichier pour changer l'apparence de toutes les pages !

Pour faire apparaître la barre des menus d'Atom, il faut utiliser  ALT .

01° Créez et enregistrez un nouveau document (vide pour l'instant) avec Notepad++, Notepadqq ou Atom. Précisez bien un encodage UTF-8 et que le langage est le CSS. Enregistrer le fichier sous le nom style_1.css.

Après l'avoir créé, vous devriez avoir cela dans votre répertoire de travail :

📁 votre dossier de travail

📄 ma_page.html

📄 style_1.css

02° Créer et enregistrer un nouveau fichier, cette fois de type HTML en utilisant le code suivant. Vérifiez bien que dans la balise head le fichier CSS indiqué dans la balise soit bien nommé style_1.css.

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
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>CSS à part (page 1)</title> <link rel="stylesheet" href="style_1.css" /> </head> <body> <header> <h3>Premiers pas à un CSS à part (page 1)</h3> <p>La phrase est située dans mon header</p> </header> <nav> <p>Retour à l'accueil</p> </nav> <main> <h1>Page 1 de l'article.</h1> <p>C'est ici que commence vraiment l'article.</p> <h2>Partie A</h2> <p>Blabla.</p> <h2>Partie B</h2> <p>Blabla.</p> </main> <footer> <p>Pour contacter le webmaster</p> </footer> </body> </html>

03° Créer et enregister sous un autre nom le nouveau code HTML fourni ci-dessous pour modéliser une autre page de votre site. On notera que la balise <link> pointe le même fichier CSS.

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
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>CSS à part (page 2)</title> <link rel="stylesheet" href="style_1.css" /> </head> <body> <header> <h3>Premiers pas à un CSS à part (page 2)</h3> <p>La phrase est située dans mon header</p> </header> <nav> <p>Retour à l'accueil</p> </nav> <main> <h1>Page 2 de l'article</h1> <p>Blabla d'introduction.</p> <h2>Partie C</h2> <p>Blabla.</p> <h2>Partie D</h2> <p>Blabla.</p> </main> <footer> <p>Pour contacter le webmaster</p> </footer> </body> </html>

Vous avez donc désormais deux pages HTML pointant vers le même fichier css nommé style_1.css. Si on modifie le code css cela va donc automatiquement modifier la forme sur les deux pages. L’uniformité entre les différentes pages est ainsi garantie.

📁 votre dossier de travail

📄 ma_page.html

📄 la_page_2.html

📄 style_1.css

04° Ouvrez vos deux pages HTML dans le navigateur. Les couleurs doivent avoir totalement disparues : nous sommes revenus aux modes par défaut pour lesquelles la couleur de fond est toujours le blanc.

La structure est posée. Il reste à remettre un peu de couleur sur les pages.

2 - Remplissage du fichier CSS

Dans le fichier HTML, nous avons appliqué le CSS directement dans une balise. Il n'était donc pas nécessaire de préciser sur quelle balise Nous allons devoir préciser sur quelle balise la couleur de fond (background-color) doit s’appliquer.

Codification CSS

Les indications liées à la modification de l'apparence des balises devront être notées dans le fichier CSS ( ici le fichier style_1.css).

La codification est la suivante si on veut par exemple avoir un menu de navigation colorée  :

1 2 3 4
nav /* Voilà un commentaire : c'est ici qu'on modifie la forme de nav */ { background-color:#AAAA00; }

Ici, on voit que nous allons modifier la façon dont les balises <nav> vont être affichées : au vu des intensités Rouge et Verte, on voit que nous désirons une teinte jaunatre.

Attention, il suffit de noter le nom du type de balises : il ne faut pas noter les signes < et >.

On remarquera l’utilisation des accolades ou brackets { et } pour signaler le début et la fin des informations de forme s’appliquant à la balise précisée en début d’accolades.

Sur ces balises, nous allons définir une propriété CSS (couleur de fond, background-color) à la valeur #AAAA00.

On code la fin de l’instruction par un point-virgule, ne l’oubliez pas.

J’ai rajouté tout de suite la façon de faire des commentaires. Résumons la façon de faire des commentaires :

En Python : # Commentaires

En HTML : <!-- Commentaires -->

En CSS : /* Commentaires */

05° Rajoutez les noms des balises body, header, nav, section et footer dans le CSS et définissez un ensemble de propriétés-couleurs de fond (via la propriété background-color) et de couleur de texte (via la propriété color) qui ne vous fera pas trop mal aux yeux.

Vous pouvez faire une recherche sur un moteur de recherche de façon à trouver un site d'infographie présentant des méthodes de choix de couleurs adaptées. Il y a plein de sites de ce genre.

Codification multiple

On peut vouloir modifier à l’identique deux balises. Imaginons qu’on veille rendre identique le header et le footer.

On peut alors écrire utiliser une seule accolade en séparant les éléments identiques par des virgules

1 2 3 4
header, footer /* Les deux auront les mêmes effets de forme */ { background-color:#AAAA00; }

De la même façon, il est possible de mettre plusieurs propriétés entre les accolades :

1 2 3 4 5
header, footer /* Les deux auront les mêmes effets de forme */ { background-color:#AAAA00; color:#5555AA; }

Le fond est toujours blanc : c’est normal, nous n’avons rien défini pour la balise header et la couleur de fond par défaut est le blanc.

Imaginons qu’on désire que le texte soit en gris partout.

La propriété correspondant à la couleur du texte est color.

La valeur correspondant au gris pourrait être rgb(100,100,100).

On peut donc écrire :

color:rgb(100,100,100);
Sélecteur universel *

Comment faire pour affecter le texte de tous les objets de la même façon ? Il faut utiliser l’étoile *.

Par exemple, pour afficher tous les textes en blanc :

1 2 3 4
* { color:white; }

06° Utiliser le sélecteur universel pour que tous les textes des pages soient en gris foncé.

...CORRECTION...

1 2 3 4
* { color:rgb(100,100,100); }
Apparence du code CSS

Comme pour le HTML, le CSS ne lit pas les sauts de lignes et les espacements multiples. La présentation usuelle est de tabuler de façon à comprendre rapidement l’enchaînement des propriétés associées à la balise.

Lorsqu'une balise ne comporte pas beaucoup de propriétés, on peut également supprimer une grande partie des espaces et tabulations pour gagner en lisibilité.

On aurait très bien pu simplement noter sur la question précédente :

1
* { color:rgb(100,100,100); }

07° Imposer maintenant que le texte des paragraphes (uniquement le texte des paragraphes) soit jaune.

...CORRECTION...

1
p { color:yellow; }

3 - Priorité des propriétés

Sur une page réelle, on peut avoir plusieurs dizaines ou centaines de propriétés à établir. La possibilité qu’on oublie qu’une balise avait déjà été définie est réelle.

08° Imaginons le code donné ci-dessous. A votre avis, quelle va être la couleur du texte des paragraphes ? J’ai enlevé les espaces et les sauts de lignes pour avoir un code plus condensé mais moins lisible. Donner votre réponse pour les deux cas et lancer ensuite le code à tour de rôle :

Cas A :

1 2 3
* { color:white; } p { color:black; } p { color:pink; }

Cas B :

1 2 3
* { color:white; } p { color:red; } p { color:blue; }

...CORRECTION A...

Toutes les balises sont configurées avec un texte blanc.

Les balises p sont configurées deux fois : on ne prendra que les valeurs les plus récentes, donc les dernières : celles du bas.

Les balises auront donc un texte blanc, sauf pour les balises p qui auront un texte rose.

...CORRECTION B...

Toutes les balises sont configurées avec un texte blanc.

Les balises p sont configurées deux fois : on ne prendra que les valeurs les plus récentes, donc les dernières : celles du bas.

Les balises auront donc un texte blanc, exceptées les balises p qui auront un texte bleu.

Vous devriez avoir vu que le deuxième définition du classe paragraphe a écrasé à chaque fois celle donnée juste au dessus.

Première règle de priorité : position de la demande

Lorsque deux éléments ayant le même rang sont donnés et veulent modifier la même propriété, le dernier inscrit gagne la mise.

Doonc si vous placez plusieurs balises ayant le même nom dans votre fichier css, c’est la valeur de celui le plus bas dans le code qui sera activée.

09° Avec le CSS proposé, quelle va être la couleur de texte de votre paragraphe  ?

1 2 3
p { color:pink; } p { color:black; } * { color:white; }

Voilà : seconde règle de priorité :

Deuxième règle de priorité : précision de la demande

Un élément plus précis qu’un autre gagne en priorité : la balise p étant plus précise que la balise *, c’est la définition de p (texte des paragraphes en noir) qui prime même s'il est déclaré avant la couleur du texte de l'étoile. Dans l’ordre croissant, on obtient donc :

La version par défaut du navigateur : certainement noir.

La moins forte : la couleur de *.

La plus forte : la couleur de la dernière déclaration de balise p.

Vous pouvez voir la balise * comme voulant dire « Change l’élément sauf si un ordre plus précis concernant une balise précise est donnée ». Ainsi même en mettant la balise * à la fin, vous ne parviendrez pas à modifier les valeurs précédentes : la balise * est la balise la moins prioritaire puisqu’elle englobe tout par définition.

Sur notre exemple, on ne garde donc que la ligne 2 : le texte des paragraphes est noir. Les autres textes seront blancs à cause de la ligne 3.

D'ailleurs; attention : * n'est PAS une balise : il s'agit juste du sélecteur univervel : il affecte donc toutes les balises. C'est un gros abus de langage que j'utilise...

10° Et là ? Quelle va être la couleur de fond des paragraphes ? Quelle va être la couleur du texte des paragraphes ?

1 2 3 4
body { background-color:green; color:yellow; } p { color:pink; background-color:orange;} main { background-color:#999955; color:red; } p { color:black; }

Explications :

Puisqu’on cherche à connaître la couleur de fond de p, la définition la plus précise est celle de … p. On ne définit la couleur de fond des paragraphes que sur la ligne 2. On aura donc un fond orange pour les balises p.

Pour la couleur du texte des paragraphes, on a une propriété sur la ligne 2 et 4 : on garde donc celle de la ligne 4. On aura un texte noir.

11° Quelle va être la couleur de fond de vos paragraphes p si on impose le CSS suivant ?

1 2 3
body { background-color:green; color:yellow; } main { background-color:#999955; color:red; } p { color:black; }

La réponse n’est pas unique : un CSS propre à la balise p existe mais il ne contient pas de couleur de fond. Il faut donc regarder la balise-conteneur dans laquelle est inséré la balise paragraphe.

Le cas le plus général est la balise body : par définition toutes les balises sont incluses dans cette balise-conteneur ! Le fond correspondant est green.

Le seul cas particulier est donc le cas des paragraphes p contenus dans main qui vont avoir un fond #999955.

Un dernier exemple (avec page html et css à changer) :

Code html

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
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>Premiers pas HTML + CSS</title> <link rel="stylesheet" href="style_1.css" /> </head> <body> <header> <h3>Le titre de mon site</h3> <p>La phrase est située dans mon header</p> </header> <nav> <ul> <li>Accueil</li> <li>Partie 1</li> <li>Partie 2</li> </ul> </nav> <main> <h1>C'est ici que commence ma section, mon article.</h1> <br /> <p>Nous allons pouvoir faire ici de très longues phrases puisque c'est la partie la plus encombrante de la page habituellement.</p> <p>J'en profite pour vous montrer comment utiliser la balise strong pour <strong>renforcer</strong> une partie d'un texte.</p> <p>Il est également possible d'utiliser la <em>balise em</em>, ce n'est pas très compliqué...</p> <h3>Ceci est une partie assez importante.</h3> <h4>Ou un titre moins important</h4> <h6>Jusqu'au degré 6, mais si vous avez besoin de 6 degrés de titres imbriqués, c'est certainement que vous avez un peu <mark>abusé</mark> dans la structuration de votre présentation.</h6> <p>Exemple de liste non ordonnée : les éléments composant un atome sont</p> <ul> <li>Proton(s)</li> <li>Neutron(s)</li> <li>Electron(s)</li> </ul> <p>Exemple de liste ordonnée : pour équilibrer une équation de combustion</p> <ol> <li>On équilibre le carbone C</li> <li>On équilibre l’hydrogène</li> <li>On équilbre l’oxygène</li> </ol> </main> <footer> <p>Pour contacter le webmaster, on met son adresse ici. Pour l'instant, il préfère rester discret car le contenu n'est pas très conséquent.</p> </footer> </body> </html>

Code CSS à sauvegarder sous le nom "style_1.css"

1 2 3 4 5
body { background-color:silver; color:green; } nav { color:blue; } main { background-color :orange; color:red; } footer {} p { color:black; }

Couleur du texte :

Les paragraphes seront tous en noir.

Les autres types de texte (listes, titres…) seront :

  • rouge dans la balise main,
  • bleu dans la balise nav et
  • vert sinon (dans header et footer donc).
résultat de l'affichage

Couleur du fond :

Le body (ainsi que header, nav et footer ) est silver.

La section est orange.

En résumé

On précise le nom de la balise dont on désire changer l'apparence.

On fournit l'ensemble des propriétés à modifier entre accolades { }.

On note la propriété, deux points et la valeur à donner à une propriété. On finit par un point-virgule.

Il existe des règles permettant de savoir quelles modifications sont prioritaires sur les autres.

Exemple de code CSS

1 2 3 4
body { background-color:silver; color:green; }

12° Réaliser une présentation rapide d'un sujet à l'aide de trois pages HTMl traitant chacune d'un aspect particulier de votre sujet. Pas plus de 10 phrases dans le main de chacune des pages. Le but n'est pas de faire un vrai article mais de manipuler le HTML. Créer un CSS commun pour vos trois pages. Vérifier que vos trois pages s'affichent bien avec le même code couleur.

La prochaine fois, nous irons fouiller dans le CSS puis le HTML. Mais vous avez fait le plus dur : comprendre le système de balises en HTML et voir comment faire référence à une feuille de style CSS depuis le HTML.

Activité publiée le 28 08 2019
Dernière modification : 28 08 2019
Auteur : ows. h.