Nous abordons enfin la deuxième partie essentielle de ce cours sur l’intégration avec les styles qui permettent l’ « habillage » graphique des pages web. Cette première leçon est spécifiquement consacré au principe des styles, les feuilles dites CSS étant vues à la leçon suivante. Les styles que nous allons voir concernent le texte, les paragraphes et les listes.

Examinons tout d’abord comment les styles s’écrivent de manière générale.

Styles

Un style est donné par trois éléments :

1. 1. 1. une propriété, par exemple color pour la couleur du texte
      2. une valeur parmi un ensemble de valeurs permises, par exemple yellow
      3. un élément auquel il applique

Par exemple pour passer en jaune la couleur d’un titre, nous écrivons ceci : <h1 style="color:yellow">Titre</h1>.

Le style est donc appliqué directement à un élément par l’attribut style et s’écrit en général propriété:valeur. Nous verrons par la suite d’autres façons d’attribuer un style à un ou plusieurs éléments.

Vous pouvez attribuer plusieurs styles en une fois en les séparant par un point-virgule, par exemple :

<p style="color:green; font-size:12px"/>

Modalités d’application

Un style, selon sa nature, peut avoir un effet visuel selon deux modalités :

1. 1. 1. soit il s’applique uniquement à l’élément et pas à ses descendants ; c’est par exemple le cas de border que nous verrons dans la leçon suivante, qui trace une bordure autour de l’élément uniquement
      2. soit il s’applique à tout le contenu, c’est le cas en général pour tout ce qui touche au texte ; par exemple modifier la taille de police par font-size applique le changement à tout le texte contenu dans l’élément, quelque soit les sous-éléments

Prenons cette situation :

<p style="color:red">Le petit <b>chat</b> est <span style="color:blue">gris</span></p>

Le résultat, que vous pouvez tester en copiant ce code dans une page, est assez logique : la couleur rouge s’applique à tout le texte, y compris dans la balise <b>, sauf à « gris » pour lequel la couleur a été définie en bleu. Notons au passage une nouvelle balise, dont nous reparlerons, qui sert uniquement à appliquer un style : span.

Avant d’entrer dans le cœur du sujet, voyons quelles valeurs peut prendre une propriété :

1. une liste fermée de valeurs possibles, comme par exemple font-style qui peut valoir normal, italic ou oblique
2. une couleur, pour color ou background-color par exemple
3. une adresse web (URL) comme pour background-image
4. une longueur pour exprimer par exemple la taille police (font-size) ou la marge (margin)

Avant de traiter en détail les styles, examinons comment les trois derniers types de valeurs s’écrivent.

Exprimer une couleur

Donner une longueur

Les unités de longueur les plus courantes sont :

1. unités physiques, à réserver à l’impression (donc pas vraiment recommandées pour un site web affiché sur un écran !), que sont pt (point), pc (pica), cm (centimètre), mm (millimètre), in (pouce) avec comme équivalence 1 in = 2.54 cm = 25.4 mm = 72 pt = 6 pc
2. unité souvent qualifiée de « fixe », le pixel CSS abrégé en px ; il n’a pas en réalité la même taille physique selon les écrans, il ne correspond donc pas à un pixel réel mais il représente un point très fin visible par un utilisateur à une distance courante à son écran (articles instructifs : https://hacks.mozilla.org/2013/09/css-length-explained)
3. unités relatives à la taille par défaut définie dans le navigateur (16px normalement), em et rem ; les deux sont des facteurs multiplicateurs par rapport à cette taille de base, mais em est relatif au parent alors que rem directement à cette taille (voir explication plus bas) ; on peut aussi utiliser un pourcentage sur le même principe
4. nouvelles unités introduite en CSS 3 pour le développement mobile, relative à la taille du viewport (vh hauteur, vw largeur) c’est-à-dire de la fenêtre dans laquelle le navigateur affiche le document, en centième (50 vh signifie la moitié de la hauteur de la fenêtre)

Résumons-les dans un tableau :

Il y en a d’autres d’un usage quasi confidentiel, voir https://developer.mozilla.org/fr/docs/Web/CSS/length

font-size: 1cm; // pour l'impression, ne pas utiliser en général
font-size: 24px; // l'unité de base, à utiliser pour les maquettes figées
font-size: 2em; // à privilégier dans tous les cas car respecte le choix de l'utilisateur, indispendable pour les maquettes responsives
font-size: 300%; // idem (la nouvelle unité rem est encore mieux, en général)

Pointer vers une adresse

Il est parfois nécessaire de désigner une ressource, souvent pour une image. Le principe est le même qu’avec les ressources liées ou intégrées dans le code HTML, avec les adresses absolues ou relatives (voir la Leçon 5). Dans les styles, l’adresse s’écrit url(adresse) avec la possibilité de mettre des guillemets simples ou doubles, soit par exemple :

background-image: url(img/fond.png)
background-image: url('img/fond.png')
background-image: url("img/fond.png")

Entrons enfin dans le vif du sujet avec les styles d’usage courant.

Styles de caractères

Changer la police de caractère

Il y a quatre propriétés incontournables pour changer la police de caractère (fonte) d’un élément :

font-family:cursive,helvetica,'times new roman'

Ces propriétés sont souvent appliquées à l’élément body pour que tout le document soit impacté.

Utiliser une police spéciale

Pour sortir des familles générique de police, vous pouvez déclarer une fonte particulière dans font-family, mais l’utilisateur final doit l’avoir installée sur son ordinateur. Sinon, la police par défaut sera utilisée.

Comment alors personnaliser et embellir le site avec une fonte particulière ? Il faudrait que le navigateur puisse récupérer la police juste pour afficher la page.

Ce mécanisme existe grâce à la version 3 des CSS.  Nous pouvons intégrer une police directement dans une page en fournissant le fichier de fonte dans un format reconnu par le navigateur, par exemple ttf (TrueType Font), otf (OpenTypeFont) ou svg (voir w3schools.com pour la liste des formats, ou encore cet article). Il faut soit importer une police qui se trouve sur un autre serveur, notamment les Google Fonts avec @import ou un simple link (voir le fichier d’exemple fonts.html ou ce tutoriel), soit l’intégrer au site. Pour cela, les étapes à réaliser sont :

1. télécharger le fichier de police au format otf par exemple, le plus commun
2. placer ce fichier dans l’arborescence de votre site, à la racine ou dans un sous dossier fonts si vous en avez plusieurs (inutile ici d’installer la police dans le système, l’important est de l’envoyer à tous les navigateurs qui appelle votre site)
3. intégrer la police dans les styles de votre page qui doit l’utiliser (voir fonts.html pour un exemple détaillé)

Type	Nom	Taille
ttf	OvertheRainbow	46.4k
zip	Company	467.6k
html	Fonts	1.9k

Sélectionner toutTélécharger

Changer la couleur du texte

<strong style="background-color: yellow">surligné</strong>

Autres effets touchant les caractères

Voici quelques effets qui touchent au souligné, à l’espacement entre les mots ou les lettres et à la mise en majuscule.

<span style="letter-spacing:4px>La petite maison</span>

<span style="word-spacing:2em>La petite maison</span>

Styles de paragraphe

Ces styles concernent les paragraphes au sens très général, pas seulement la balise <p>. Ils touchent un bloc de texte fait de plusieurs lignes, selon la largeur de la fenêtre.

Espacer un paragraphe avec le contenu autour

La marge permet de réaliser cet espacement. Abordée ici du point de vue du paragraphe, nous verrons à la leçon suivante que cette propriété concernent tous les blocs

Quelques exemples de déclarations de marge :

margin-top: 10px; /* marge haute de 10 pixels */
margin: 1%; /* toutes les marges sont à 1% de la taille du conteneur */
margin: 10px 1%; /* 10px en haut et en bas, 1% à droite et à gauche */

/* équivaut aux quatre directives qui suivent */
margin: 0 20px 5px 30px;

margin-top: 0;
margin-right: 20px;
margin-bottom: 5px;
margin-left: 30px;

Centrer horizontalement et verticalement

Dans ce leçon d’initiation aux styles, nous traitons du contenu textuel avec des styles que je qualifie de styles de caractère ou de paragraphe. Plus précisément, ce contenu recouvre :

1. le texte brut mis dans une balise quelconque, par exemple un dans un <p>
2. le texte mis dans une balise de mise en forme comme <i>, <b>, etc
3. les images
4. les liens <a>

Tous ces éléments s’affichent en suivant le fameux « flux » HTML, c’est-à-dire en ligne de gauche à droite (ce sens peut toutefois être inversé), puis vers le bas selon la largeur de la fenêtre du navigateur. Il n’y a de balise qui provoque implicitement un retour à la ligne, si ce n’est <br>.

• <h1 style="font-size:4rem; font-weight: normal">
     <img src="tree-logo_opt.svg" style="height:6rem"/>
     <a href="www.w3c.org">wXyz</a>
     <span style="font-size:2rem">(company)</span>
  </h1>

• 

Toutes les autres balises sont qualifiées de « bloc », comme <p>, <h1>, <section>, etc. Visuellement elle s’affiche dans un rectangle qui prend toute la largeur de la page ce qui provoque un retour à la ligne avant et après. Ce principe sera amplement traité dans la leçon suivante.

Comment centrer horizontalement un contenu textuel ?

Il faut une balise conteneur par exemple un <p> ou <h*> qui a pour enfant du texte, des images et/ou des liens. Pour que tout ce beau contenu soit centré, le style text-align est là avec text-align:center appliqué à cette balise conteneur.

Comment aligner verticalement les éléments textuels ?

L’alignement vertical du texte, ou de tout élément en ligne comme une image, s’appuie sur différentes hauteurs remarquables représentées par ce schéma :

Notons aussi que la taille de police définie par font-size correspond à une hauteur de caractère. En pixel (px) ou en taille relative (em), la taille correspond à la hauteur des plus haut caractères, en tenant des lettre haute comme « b » et basse comme « p ».

Les valeurs données à droite du schéma sont les valeurs possibles pour la propriété CSS vertical-align. Cette propriété s’applique à un élément en ligne (et non au conteneur bloc comme pour text-align !). Par défaut le texte est alignés au niveau de la ligne de base et les images au bas.

L’alignement doit se comprendre comme un placement de l’élément qui reçoit vertical-align par rapport à tous le texte qui reste par défaut en baseline. Plutôt que d’expliquer péniblement comment fonctionne l’alignement avec ces différentes valeurs, voyons les résultats possibles sur l’exemple précédent. La propriété vertical-align est appliquée à l’image et au petit texte « (company) », donc il faut comparer l’image par rapport à « wXyz » et « (company) » par rapport à « wXyz » qui ne se reçoit pas d’alignement. Pour bien voir certaines subtilités, nous avons colorer le fond du texte « wXyz » (sa « boîte ») et ajouté deux caractères « plein » █ qui est le plus haut possible.

Indenter et définir l’interligne

Styles de liste

Nous pouvons aussi changer l’aspect des listes en appliquant ces propriétés à un élément <ul> ou <ol> :

<ul style="list-style-image:url(/img/puce.png)">
</ul>


<ul style="list-style-image:url(http://pixels.org/puce.jpg)">
</ul>

list-style: none;

list-style: circle inside;

list-style: url(rond.jpg);

list-style: url(rond.jpg) outside;

list-style: square url(rond.jpg);

/* etc, il y a plein de possibilités ! */

A retenir

 

Ressources utiles

• site de référence pratique, facile à lire et permettant de tester le code, résumant l’essentiel mais n’étant pas exhaustif : w3schools avec une partie tutoriel et une partie référence (en anglais !)
• la référence pour tout savoir sur une balise, un attribut, une propriété CSS : MDN web docs

Téléchargements

Type	Nom	Taille
ttf	OvertheRainbow	46.4k
zip	Company	467.6k
html	Fonts	1.9k

Sélectionner toutTélécharger

Pour aller plus loin