Formatage du texte en CSS (partie 2/2)

Il existe en CSS une série de propriétés étonnantes comme sympathiques qui permettent de donner un peu plus de style à vos pages web (et je crois que ça ne sera pas de refus )
Cela va de la mise en gras, italique, souligné à la mise en capitales, en passant par la possibilité de faire clignoter le texte !

Mettre en italique

Je n'ai jamais dit ça
Retournez voir les chapitres précédents si vous avez des doutes, mais je n'ai jamais dit que la balise <em> était faite pour mettre le texte en italique (de même que je n'ai jamais dit que <strong> était fait pour mettre en gras).

<em>, mettez-vous bien ça dans la tête, est fait pour insister sur des mots. Ca veut dire que les mots qu'il entoure sont assez importants.
Pour représenter cette importance, la plupart des navigateurs mettent le texte en italique (et ce n'est pas une obligation).

Si on a la possibilité de mettre en italique en CSS, c'est donc utile juste à des fins de présentation. Parce que, je vous le rappelle, le CSS sert uniquement à la présentation de vos pages web.

Concrètement, pour mettre en italique en CSS on utilise font-style, qui peut prendre 3 valeurs :

• italic : le texte sera mis en italique.
• oblique : le texte sera mis en italique. Quoi là aussi ? Euh, pour tout vous dire je n'en sais rien moi-même, mais tout ce que je constate c'est que "italic" et "oblique" reviennent au même. Choisissez donc l'un des deux
• normal : le texte sera normal (par défaut). Cela vous permet d'annuler une mise en italique. Par exemple, si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez écrire :
  
  Code : CSS

  1 2 3 4

  em { font-style: normal; }

  
  

Sur l'exemple suivant, je me sers par exemple de font-style pour mettre en italique tous mes titres <h2> :

Code : CSS


Bref, c'est facile à utiliser, pas la peine de traîner plus longtemps là-dessus

Mettre en gras

Et si nous passions à la mise en gras ?
Alors là, pareil pour <strong>, je ne vous refais pas le même speech que tout à l'heure. La mise en gras en CSS permet de mettre en gras par exemple les titres, certains paragraphes entiers etc... C'est à vous de voir.

La propriété CSS pour mettre en gras est font-weight, et prend les valeurs suivantes :

• bold : le texte sera en gras.
• normal : le texte sera écrit normalement (par défaut).

On n'a qu'à s'en servir pour mettre les paragraphes en gras, tenez :

Code : CSS

Les majuscules en CSS

Le CSS permet d'appliquer des effets très intéressants sur du texte, en modifiant automatiquement les majuscules.
Nous allons voir 2 propriétés CSS qui travaillent sur les majuscules.

Commençons par la propriété font-variant, toute simple, qui prend uniquement 2 valeurs différentes :

• small-caps : le texte sera écrit en petites capitales.
• normal : le texte sera écrit normalement (par défaut).

Code : CSS


Vous écrivez vos paragraphes normalement (comme d'habitude), et vous laissez CSS s'occuper de transformer ça pour vous automatiquement en petites capitales. C'est-y pas beau ?

Mais attendez, il y a une seconde propriété CSS qui travaille sur les majuscules elle aussi : text-transform. Elle peut prendre ces valeurs :

• uppercase : tout le texte sera écrit en majuscules.
• lowercase : tout le texte sera en minuscules.
• capitalize : la première lettre de chaque mot sera en majuscule.
• none : pas de transformation (par défaut).

Allez, ça faisait un moment : pour cet exemple je vous mets le code XHTML qui va avec
Regardez en particulier comment je me sers des class pour créer (entre autres) une class pousser_une_gueulante

Code : HTML
Code : CSS


Cette propriété text-transform est vraiment pratique pour changer l'apparence de tout un texte en un clin d'oeil !

Comme quoi, le CSS n'est pas que bon à aligner le texte et changer la police. Il peut aussi agir directement sur un texte déjà écrit pour modifier ses majuscules / minuscules.

Un peu de déco ?

Cette propriété CSS porte bien son nom : text-decoration
Elle permet, entre autres, de souligner le texte. Voici les différentes valeurs qu'elle peut prendre :

• underline : souligné.
• line-through : barré.
• overline : ligne au-dessus.
• blink : clignotant. Attention, cette propriété ne marche pas sous Internet Explorer. Elle fonctionne en revanche bien sur tous les autres navigateurs, dont Mozilla Firefox.
• none : normal (par défaut).

Ce CSS va vous permettre de tester les effets de text-decoration :

Code : CSS

Au passage, voici le XHTML qui va avec :

Code : HTML


N'oubliez pas que l'intérêt du CSS c'est aussi de pouvoir cumuler les styles. Là j'ai créé une class "souligne" qui ne fait que souligner pour l'exemple, mais dans la pratique on crée souvent des class combinant les styles, comme par exemple une class "important" qui souligne le texte, le met en gras, et l'écrit en plus gros

Passons maintenant au vaste sujet de la couleur


Eh bien on a plusieurs possibilités pour indiquer une couleur, comme c'était le cas avec la taille du texte.
Nous allons ici voir quelles sont toutes ces possibilités qu'offre le CSS pour choisir une couleur.

Première chose à savoir : la propriété qui permet de changer la couleur du texte est color (facile à retenir ;)), vous l'avez d'ailleurs entraperçue dans notre introduction au CSS.

Indiquer le nom de la couleur

La méthode la plus simple et la plus pratique pour choisir une couleur est de taper son nom (in english, of course).
Le seul défaut de cette méthode est qu'il n'existe que 16 couleurs dites "standard". D'autres couleurs officieuses existent, mais comme elles ne fonctionneront pas forcément pareil sur tous les navigateurs, je vais éviter de vous les montrer.

Voici les 16 couleurs que vous pouvez utiliser en tapant simplement leur nom :

Couleur	Aperçu
white
silver
gray
black
red
maroon
lime
green
yellow
olive
blue
navy
fuchsia
purple
aqua
teal

Vous pouvez les apprendre par coeur si ça vous chante, en plus ça vous fera réviser votre anglais

Voici le CSS de test :

Code : CSS

... et la page XHTML qui va avec :

Code : HTML


Les textes importants en rouge clignotant... ben ouais, fallait y penser ! Allez, un peu d'imagination quoi

La notation hexadécimale

16 couleurs, c'est quand même un peu limite quand on sait que la plupart des écrans peuvent en afficher 16 millions.
D'un autre côté remarquez, s'il avait fallu donner un nom à chacune des 16 millions de couleurs...

Heureusement, il existe plusieurs façons en CSS de choisir une couleur parmi toutes celles qui existent. La première que je vais vous montrer est la notation hexadécimale.
Je ne vais pas m'attarder dessus car elle n'est pas très pratique à manier, mais elle reste encore souvent utilisée par habitude. En effet, avant que le CSS n'apparaisse, c'était une méthode courante pour définir une couleur (en fait c'était la seule :p).
Heureusement depuis, on a inventé des méthodes plus simples.

Un nom de couleur en hexadécimal, ça ressemble à ça : #FF5A28. Pour faire simple, c'est une combinaison de lettres et de chiffres qui indiquent une couleur.
On doit toujours commencer par écrire un dièse (#), suivi de 6 lettres ou chiffres allant de 0 à 9 et de A à F.
Ces lettres ou chiffres fonctionnent deux par deux. Les 2 premiers indiquent une quantité de rouge, les 2 suivants une quantité de vert, et les 2 derniers une quantité de bleu. En mélangeant ces quantités (qui sont les composantes Rouge-Vert-Bleu de la couleur) on peut obtenir la couleur qu'on veut.

Ainsi, #000000 correspond à la couleur noire et #FFFFFF à la couleur blanche. Mais maintenant, me demandez pas quelle est la combinaison qui produit du orange couleur "coucher de soleil", je n'en sais strictement rien

Voici par exemple comment on fait pour appliquer la couleur blanche en hexadécimal :
color:#FFFFFF;

La méthode RGB

Que signifie RGB ? En anglais, Rouge-Vert-Bleu s'écrit Red-Green-Blue, ce qui s'abrège en "RGB". Comme pour la notation hexadécimale, on doit définir une quantité de rouge, de vert et de bleu pour choisir une couleur.

Oui, mais là vous allez voir que c'est beaucoup plus pratique et qu'avec un logiciel de dessin tout simple comme Paint, vous pouvez trouver la couleur que vous désirez.Voici la marche à suivre :

1. Lancez le logiciel Paint depuis le menu Démarrer.
2. Rendez-vous dans le menu Couleurs / Modifier les couleurs :
   
   
   
   
   
   
3. Une fenêtre s'ouvre. Cliquez sur le bouton "Définir les couleurs personnalisées" en bas. Dans la zone qui apparaît à droite, faites bouger les curseurs pour sélectionner la couleur qui vous intéresse.
4. Supposons que je sois pris d'une envie folle d'écrire mes titres <h1> en rose barbie (supposons seulement). Je sélectionne la couleur dans la fenêtre, comme ceci :
   
   
   
   
   
   
5. On relève les quantités de Rouge-Vert-Bleu correspondantes indiquées en bas à droite de la fenêtre (ici 243-65-243). Je recopie ces valeurs dans cet ordre dans le fichier CSS, comme ceci :
   
   Code : CSS

   1 2 3 4 5

   h1 { text-align: center; color: rgb(243,65,243); }

   
   
   Essayer !
   
   
   

Et voilà le travail !

Comme vous avez pu le constater dans l'exemple, pour utiliser la méthode RGB il faut taper rgb(Rouge, Vert, Bleu) en remplaçant "Rouge, Vert, Bleu" par les nombres correspondants.
Pour votre information, ces nombres vont de 0 à 255. Si vous écrivez un jour une quantité de rouge de 327, c'est qu'il y a un problème

Et en Bonus Track...

Je mets à votre disposition un petit logiciel tout simple, spécialisé dans le choix d'une couleur. Nul doute qu'il vous sera très utile pour vous aider à choisir vos couleurs.Ce logiciel s'appelle "La boîte à couleurs" (pas compliqué comme nom ), et il ressemble à ceci :



Bien entendu, il est en français, totalement gratuit et il est téléchargeable directement depuis le Site du Zér0. Bref, ce serait bien bête de ne pas l'essayer



Il y a plusieurs onglets comme vous pouvez le voir. Je vous recommande de rester sur le premier ("RVB") ou d'aller dans l'onglet "Visuel". Les autres ne nous concernent pas, et évitez en particulier l'onglet "Nom" qui propose des noms de couleurs parfois invalides (je vous rappelle qu'il existe seulement 16 noms de couleurs "standards").
Vous pouvez récupérer en bas à droite le numéro de la couleur en hexadécimal (le numéro commence toujours par un #), ou encore recopier les valeurs de Rouge-Vert-Bleu (RVB) dans le CSS.

Enfin, et c'est certainement la fonctionnalité la plus intéressante du logiciel, vous pouvez utiliser sur la pipette en haut à droite pour récupérer n'importe quelle couleur s'affichant sur votre écran !
Amusez-vous bien !

Contrairement à ce qu'on pourrait croire, le fond ne désigne pas forcément le fond de toute une page web. On peut aussi appliquer un fond uniquement aux titres, ou aux paragraphes, ou encore à certains mots d'un paragraphe.

Il faut tout d'abord savoir qu'il existe 2 types de fonds :

• Les fonds comportant une couleur
• Les fonds comportant une image de fond

Nous allons commencer à nous intéresser à la couleur de fond dans un premier temps, puis nous verrons comment faire pour avoir une image de fond.

La couleur de fond

Pour indiquer une couleur de fond, on utilise la propriété CSS background-color. Elle s'utilise de la même manière que la propriété color, c'est-à-dire que vous pouvez taper le nom d'une couleur, l'écrire en notation hexadécimale ou encore utiliser la méthode RGB.

Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body>. Eh oui, <body> correspond à toute la page web, c'est donc en modifiant sa couleur de fond que l'on changera la couleur de fond de la page web.
Regardez très attentivement ce fichier CSS :

Code : CSS



Je voulais justement profiter de l'occasion pour vous en parler. Ce phénomène s'appelle l'héritage.Non non, rassurez-vous, il n'y a pas eu de morts

En CSS, si vous appliquez un style à une balise, toutes les balises qui se trouvent à l'intérieur de cette balise prendront le même style.

Gné ?
C'est en fait simple à comprendre et intuitif. La balise <body>, vous le savez, contient entre autres les balises de paragraphe <p> et de titre <h1>.

SI j'applique une couleur de fond noire et une couleur de texte blanche à la balise <body>, tous mes titres et paragraphes auront eux aussi une couleur de fond noire et un texte de couleur blanche... C'est ce phénomène qui s'appelle l'héritage : on dit que les balises qui se trouvent à l'intérieur d'une autre balise "héritent" de ses propriétés.


Non, pas obligatoirement. Si vous dites par la suite que vous voulez vos titres en rouge, ce style aura la priorité et vos titres seront donc en rouge. En revanche, si vous n'indiquez rien de particulier (comme on l'a fait tout à l'heure), alors vos titres hériteront de la couleur blanche.
Cela ne fonctionne pas uniquement pour la couleur, entendons-nous bien. Toutes les propriétés CSS seront héritées : vous pouvez par exemple demander une taille de texte de "1.3em" dans la balise <body>, et tous vos titres et paragraphes seront de cette taille-là.

Voici un exemple où je vous montre comment on "annule" l'héritage pour que nos titres ne soient pas écrits en blanc. J'en ai profité pour créer une class "surligne" qui met le texte sur fond jaune pour donner une impression de surlignage.

Code : CSS


Comme vous pouvez le constater, on n'a pas indiqué de couleur particulière pour les paragraphes (<p>), donc ils ont hérité de la couleur blanche. En revanche, le titre n'a pas hérité de la couleur blanche car on a écrit qu'on voulait qu'il soit en rouge.
La class "surligne" vous montre qu'on peut sans problème appliquer une couleur de fond à certains mots d'un texte. Et l'effet est plutôt sympa non, qu'en dites-vous ?

L'image de fond

Tout comme pour la couleur de fond, l'image de fond ne s'applique pas forcément à la page entière, on peut tout aussi bien mettre une image de fond aux titres, paragraphes, citations etc...

La propriété permettant d'indiquer une image de fond est background-image. Comme valeur, on doit lui mettre url("nom_de_l_image.png"). Par exemple :
background-image:url("fond.png");

Bien entendu, votre fond n'est pas forcément en PNG, il peut aussi être en JPEG ou en GIF.
L'adresse indiquant où se trouve l'image de fond peut être en absolu (http://...) ou en relatif (fond.png).

Si on veut appliquer une image de fond à toute la page, on doit là encore utiliser la balise <body> :

Code : CSS


Il existe par ailleurs une propriété CSS qui permet de "fixer" le fond, pour ne pas qu'il bouge en même temps que le texte. L'effet obtenu est, je trouve, intéressant.
La propriété concernée répond au doux nom de background-attachment et peut prendre 2 valeurs :

• fixed : l'image de fond reste fixe.
• scroll : l'image de fond défile avec le texte (par défaut).

En réutilisant le même fichier XHTML que tout à l'heure, mais en changeant un peu le CSS pour y rajouter background-attachment, on obtient ceci :

Code : CSS


Essayez de descendre plus bas dans la page avec les barres de défilement, vous verrez que le fond reste fixe

Il reste encore 2 propriétés en rapport avec les images de fond que je souhaite vous montrer.
La première d'entre elle est celle qui gère la répétition de l'image de fond. Cette propriété s'appelle background-repeat et peut prendre ces valeurs :

• no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page.
• repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement.
• repeat-y : le fond sera répété uniquement sur la première colonne, verticalement.
• repeat : le fond sera répété (par défaut).

Gardons encore notre même fichier XHTML, mais appliquons cette fois un fond dégradé qui se répète uniquement verticalement.
Voici l'image de fond que j'ai créée moi-même tout seul comme un grand sous Photoshop (oui ça mérite d'être souligné tant mon niveau en dessin est faible :p) :



Code : CSS


Enfin, la dernière des propriétés sur le fond que je tenais à vous montrer (comme ça on les aura toutes vues) concerne la position de l'image de fond.
On peut indiquer où doit se trouver l'image de fond avec background-position. Cette propriété n'est intéressante que si vous avez mis "background-repeat: no-repeat;" (un fond qui ne se répète pas).

Vous devez donner à background-position 2 valeurs en pixels pour indiquer la position du fond par rapport au coin supérieur gauche de la page (ou du paragraphe si vous appliquez le fond à un paragraphe). Ainsi, si vous tapez :
background-position:30px 50px;
... votre fond sera placé à 30 pixels de la gauche et à 50 pixels du haut. Il est aussi possible de mettre ces valeurs en anglais :

• top : en haut.
• bottom : en bas.
• left : à gauche.
• center : centré.
• right : à droite.

Il est possible de combiner ces mots. Par exemple, pour aligner une image en haut à droite, vous taperez :background-position: top right;

Allez, pour ce dernier exemple je vais réutiliser toutes les propriétés sur le fond qu'on a apprises

Code : CSS


Si vous utilisez beaucoup de propriétés en rapport avec le background (comme c'est le cas sur cet exemple), vous pouvez utiliser une sorte de "méga-propriété" background qui peut prendre plusieurs valeurs combinées des propriétés background-image, background-repeat, background-attachment et background-position.
C'est la première "méga-propriété" que je vous montre, il y en aura d'autres. Pour toutes les "méga-propriétés" comme background, il faut savoir que :

• L'ordre des valeurs n'a pas d'importance. Vous pouvez combiner les valeurs dans n'importe quel ordre :
  background: url("../images/skieur.gif") no-repeat top right fixed;
  background: no-repeat fixed top right url("../images/skieur.gif");
• Vous n'êtes pas obligés de mettre toutes les valeurs. Ainsi, si vous ne voulez pas mettre fixed, vous pouvez l'enlever sans problème :
  background:url("../images/skieur.gif") no-repeat top right;

La "méga-propriété" n'est intéressante que si vous avez plusieurs valeurs à combiner bien entendu
L'exemple ci-dessous donne le même résultat que l'exemple précédent, mais il utilise background pour combiner les valeurs et rendre le fichier CSS plus petit :

Code : CSS


Une dernière chose : dans tous ces exemples, j'ai appliqué un fond à la page entière (body). Mais cela ne doit pas vous faire oublier qu'on peut appliquer un fond à n'importe quel élément (un titre, un paragraphe, certains mots d'un paragraphe etc)...
Je vous conseille donc pour vous entraîner d'essayer d'appliquer un fond à vos titres ou paragraphes. Si vous avez un peu de goût (ce que je n'ai pas) vous arriverez certainement à donner une très belle allure à votre page web

1

color:rgb(180, 0, 212);

1
2
3
4
5

h1
{
font-variant:small-caps;
text-align:center;
}

1
2
3

background-image:url("../images/degrade.png");
background-repeat:repeat-x;
background-attachment:fixed;

1
2
3
4
5
6

.class_sans_nom
{
font-family:"Comic Sans MS", "Trebuchet MS", Georgia, serif;
text-decoration:underline;
text-align:right;
}

1
2
3
4

p
{
background:url("fond.png") bottom right no-repeat;
}