Taille, organisation et police de texte
Les couleurs
Nous allons commencer simplement, nous allons mettre votre texte principal en une autre couleur que le noir traditionnel.
La balise principale pour modifier tout le texte de votre page, vous l'aurez compris, est la balise <body>.
La commande permettant de modifier la couleur de texte est tout simplement : color.
Voici les couleurs basiques à votre disposition aqua, black, blue, fuchsia, gray, green, lime, maroon, , olive, orange, purple, red, silver, teal, white, et yellow.
Voici donc la syntaxe à mettre dans votre code css pour changer votre couleur de texte en bleue par exemple.
{
color:blue;
}
Vous l'aurez compris vous pouvez ainsi changer à votre gré toutes les balises de votre texte et comme vous l'avez vu précédemment créer des balises afin de travailler l'aspect d'une zone en particulier. Vous vouliez mettre une autre couleur que celles proposées ? Aucun problème ! Il vous suffit de respecter la syntaxe suivante :
{
color:rgb(R,V,B);
}
Où il faudra remplacer R,V et B par un entier comprit entre 0 et 255. Ces trois valeurs formeront un subtil mélange des composantes rouges vertes et bleues. A l'aide de la pipette de paint par exemple, il est possible d'obtenir les composantes Rouge Verte et Bleue de n'importe quelle couleur, vous pouvez donc choisir aisément la couleur de vos souhaits.
De la même manière vous pouvez changer la couleur de fond de la balise qui vous intéresse à l'aide de background: couleur; .
Mais vous pouvez aussi insérer une image en remplaçant la couleur par une instruction, comme ceci:
background: url("../chemin_de_l'image/nom_de_l'image.jpg"); . cf cours de soutien sur l'arborescence.
Taille de votre texte
Pour modifier la taille de votre texte grâce au css, il faut utiliser font-size suivi de la valeur que vous voulez pour la taille des caractères.
Plusieurs façons d'indiquer la taille des caractères.
- Il existe 7 valeurs prédéfinies pour indiquer une taille:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- Il est possible d'indiquer la taille en utilisant "em". Mais qu'es-ce qu'un em ? Un em est la taille standard d'un caractère.
Pour modifier la taille d'un caractère il faut donc indiquer combien de em on veut pour la taille du caractère. Vous pouvez voir
le em comme une unité de mesure pour les caractères.
Donc par exemple, si on met font-size:1.5em; , le texte aura 1,5 fois la taille standard. - De la même manière, vous pouvez utiliser les pourcentages. Ainsi, 100% correspond à la taille standard, soit un em.
- Dernière manière de modifier la taille, les pixels. c'est la manière la plus simple de modifier la taille des caractères puisqu'il suffit
de mettre le nombre de pixels que doit occuper vos caractères : font-size: 10px;
Il est cependant possible d'indiquer la taille en centimètre ou en millimètre en remplaçant px par cm ou mm.
Bien que facile à utiliser, cette méthode n'est pas la plus recommandée car tous les utilisateurs n'utilisent pas la même résolution d'écran, la taille d'un pixel n'est donc pas la même sur tous les écran et peut donc dans certain cas entraîner des problèmes de lisibilité.
Organisation du texte
Comme dans tout bon éditeur de texte, il est possible de centrer, aligner à gauche, aligné à droite et justifier son texte. En CSS, il faut utiliser text-align et de mettre comme valeur
- right : qui aligne le texte à droite
- left : qui aligne le texte à gauche
- center : qui centre le texte
- justify : qui justifie le texte (alignement à la fois à gauche et à droite)
Indentation
Un autre effet possible est la tabulation en début de paragraphe (l'indentation du texte). text-indent est la pour ça. La longueur de la tabulation doit être indiquée en pixel. Pour par exemple faire une indentation de 20 pixels au début de chaque paragraphe, vous devrez mettre le code CSS suivant:
{
text-indent: 20px;
}
Toujours dans l'organisation de votre texte, il est possible d'indiquer l'espace entre chaque mot en nombre de pixels avec word-spacing qui s'utilise exactement de la même manière que les exemples précédents.
Pour finir, vous pouvez aussi modifier l'espace entre chaque lettre. Cet espace est également défini en pixels grâce à la propriété CSS suivante: letter-spacing.
Police de texte
Il est possible de modifier la police utilisée lors de l'affichage de votre texte mais il faut connaître le nom exact de la police que vous souhaitez utiliser. Vous
pouvez de plus utiliser des polices spéciales mais il faut savoir que si l'utilisateur ne possède pas la police utilisée sur son ordinateur, le texte ne s'affichera pas comme souhaité. Il
faut donc définir non pas une, mais plusieurs polices différentes pour qu'il y en ai au moins une valide. D'ailleurs pour être sûr qu'il y en ai
au moins une valide, on utilise la police serif qui désigne en fait la police par défaut du navigateur Internet de l'utilisateur.
La propriété CSS que vous devez utiliser est la suivante:
font-family
Exemple d'utilisation:
{
font-family: Arial, "Times New Roman", "Comic Sans MS", serif;
}
Dans un premier temps, vous pouvez remarquer que certaines polices sont entre guillemets et d'autres non. La raison est simple, les polices dont
le nom comporte plus d'un mot doivent être mises entre guillemets. Si le nom est en un seul mot, pas de problème, ne vous embêttez pas avec les guillemets.
Pour afficher le contenu qui se trouve entre les balises <p>, votre navigateur Internet choisira prioritairement la police Arial.
Si par hasard l'utilisateur ne possédai pas cette police, il utiliserai le Times New Roman et ainsi de suite pour toutes les autres polices que vous aurez indiqué.
La dernière police à indiquer est serif.
text-transform
Dans le même genre, il est possible de modifier le type de lettres utilisées (Majuscule ou minuscule). L'attribut nécessaire est text-transform. Il peut prendre les valeurs suivantes:
- uppercase: permet de mettre le texte en majuscules
- lowercase: permet de mettre le texte en minuscules
- capitalize: permet de mettre la première lettre de chaque mot en majuscule, le reste en minuscules.
- none: permet de remettre le texte original
Souligner, italique, gras...
Commençons par la mise en italique. Pour cela text-style est notre ami... Trois valeurs possibles:
- italic: hum... voyons... ah oui!! Met le texte en italique
- oblique: C'est un peu le même effet que italic mais il peut y avoir quelques différences selon la police utilisée
- normal: Permet de remettre le texte droit
Texte en gras
Passons à font-weight qui permet de mettre le texte en gras. Rappelons que la balise xhtml <strong>Type Inline sert également à mettre le texte en gras mais avec font-weight, vous pouvez personnaliser la densité de l'effet gras en fonctions des valeurs que vous indiquerez:
- lighter: texte affiché en "léger", c'est à dire l'effet inverse d'un strong
- normal: affichage normal du texte
- bold: texte affiché en gras
- bolder: texte affiché en très gras (l'effet dépend également de la police utilisée)
- 100, 200, 300, ..., 800, 900: selon la valeur que vous rentrerez vous obtiendrez un effet allant du "léger" au "bolder"
Souligner, surligner et autres
L'attribut text-decoration permet de souligner, surligner, barrer et même faire clignoter (sauf sur Internet Explorer) votre texte:
- underline: soulignement du texte
- overline: surlignement du texte
- line-through: texte barré
- blink: clignotement du texte (attention, ne marche pas pour Internet Explorer)
- none: retire tous les effets précédents (très utile pour retirer le soulignement par défaut des liens ;))
