Introduction aux CSS

Photo par Marcus GANAHL publiée sur Unsplash

Ajouter du style à un paragraphe

L'ensemble des balises que nous avons vu en HTML jusqu'ici concernaient le fond et pas la forme du document. C'est quelque chose de voulu. Au premier temps du HTML, on avait quelques balises qui concernaient la mise en forme, ainsi que quelques attributs de balises qui pouvaient ceoncerner la mise en forme (comme la couleur par exemple pour un paragraphe). Tout ceci a été retiré de la norme HTML pour être confié à un langage particulier qui permet d'appliquer un style.

Il y a plusieurs façon de gérer le style d'un élément HTML. Le premier que nous allons voir est à la fois le plus simple et le plus rarement utilisé. Il consiste à rajouter un attribut style à notre élément et à y indiquer les éléments de style que l'on veut avoir. Supposons par exemple que l'on veut avoir un paragraphe dont le texte est écrit en rouge. La syntaxe serait la suivante :

<p style="color:red;"> un paragraphe en rouge </p>

À propos des couleurs ...

Il y a essentiellement 3 manières différentes d'utiliser les couleurs en HTML

• En utilisant ce que l'on appelle une couleur nommée, c'est à dire identifiée par un nom. Il y en a 140 qui sont standardisées et supportées par les navigateurs modernes. Les noms sont en anglais, parfois poétiques (MediumSeaGreen ou PowderBlue par exemple). On trouve facilement la liste en ligne.
• Ces noms sont en fait assez rarement utilisés de nos jours. Les concepteurs de design préférent utiliser le triple rgb qui définit la couleur, avec trois valeurs entre 0 et 255 pour le rouge, le vert ou le bleu. Par exemple, la couleur LightSkyeBlue correspond au triplet rgb(135, 206, 250). C'est sans doute le mode le plus utilisé actuellement, pour accéder à 16 millions de couleurs différentes.
• Enfin, on trouve encore les couleurs notées avec le rouge, le vert et le bleu encodé en héxadécimal. Cela se reconnait au caractère # en préfixe de la couleur.

Pour trouver le code rgb ou hexadécimal d'une couleur facilement, on peut utiliser en ligne le color picker.

On aurait exactement le même résultat avec les trois déclarations ci dessous :

<p style="color:lavender;"> un paragraphe en rouge </p>
<p style="color:rgb(230, 230, 250);"> un paragraphe en rouge </p>
<p style="color:#E6E6FA;"> un paragraphe en rouge </p>

Nous allons travailler sur une page HTML qui présente le Golden Gate de San Francisco, dont nous allons modifier l'apparence au fur et à mesure.

Plusieurs propriétés

Si vous avez visionné la page, à moins que vous n'ayez un écran très très large, vous avez du constater que l'image qui est en bas ne rentre pas dans l'affichage. Elle est trop grande, il faut "scroller". On peut y remédier là encore avec le style. Il suffit de lui rajouter une propriété qui fasse en sorte que sa largeur ne dépasse pas 80% de la largeur de l'espace visible

<img src="..." style="max-width:80%;">

Mais l'image est affichée à gauche, et nous aimerions qu'elle soit centrée. En html, une image est considéré comme un caractère de texte, ce qui permet d'inclure des petites images dans le flux du texte (des émoticones par exemple). Si l'on veut modifier cela, il faut changer la propriété display dans le style de l'élément. On indique que le display est un block, ce qui signifie que c'est un bloc de la page comme un paragraphe ou une autre forme de section. Une fois que l'on a fait ça, un bloc peut être centré en utilisant la propriété margin et en mettant sa valeur à auto.

Pour pouvoir positionner plusieurs propriétés dans le style de notre image, il suffit de les séparer par des point-virgules.

<img src="..." style="max-width: 80%; display: block; margin: auto;">

Ajouter du style au début du fichier

Lorsque l'on ajoute des attributs style à une balise HTML, on peut donc apporter des modifications visuelle à la page en procédant élément par élément. Le problème avec cette approche est que l'on risque vite de se retrouver avec des pages incohérentes si on modifie le style au fur et à mesure. Imaginez que pour les paragraphes vous souhaitiez modifier la police par défaut, sa taille, sa couleur, etc. Et à un moment, vous voulez de nouveau modifier la taille. Si vous modifiez tous les paragraphes les uns après les autres, il y a fort à paier que vous allez finir par en oublier au moins un.

La solution, à ce moment là, c'est de concentrer les styles au début du fichier. On insère une balise style dans la partie head et à l'intérieur de cette balise style, on indique les propriétés de style. Pour savoir à quoi on va les appliquer, on commence par mettre ce que l'on appelle un sélecteur CSS. Les sélecteurs les plus simples sont les noms des balises. Par exemple, pour mettre en bleu tous les paragraphes, et choisir les polices de type "georgia" ou "Times", on modifiera ainsi le début du fichier

<html>
    <head>
        <meta .....>
        <style>
            p {
                color: blue;
                font-family: Georgia, 'Times New Roman', Times, serif;
            }
        </style>
    </head>
    .....
</html>

Ajouter du style dans un fichier séparé

La pratique la plus courante cependant est de placer l'ensemble des indications de style dans un fichier séparé, et nous allons voir pourquoi dans le prochain chapitre.