Les CSS et la gestion des différentes polices

En CSS, il est bien pratique de mettre en forme un texte et le définir une seule fois dans sa feuille de style.

La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS.

1.Famille de police. Vous devez indiquer le nom de la police comme ceci :font-family:police;
Seulement, pour éviter qu'il n'y ait de problème si l'internaute n'a pas la même police que vous, on met en général plusieurs noms de police, séparés par des virgules : font-family:police1, police2, police3, police4;

Le navigateur essaiera d'abord de mettre la police1. S'il ne l'a pas, il essaiera de mettre la police2. S'il ne l'a pas, il essaiera la police3 et ainsi de suite.
En général, on met en tout dernier "serif", ce qui correspond à une police standard (qui ne se met que si aucune autre police n'a été trouvée).
Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs et que vous pouvez donc utiliser sans crainte :
2.Taille de votre police de caratère. Vous devez indiquer le nom de la police comme ceci : font-size:taille;
En réalité, les possibilités pour modifier la taille du texte sont nombreuses (et variées !).

En pixels : c'est une façon très précise d'indiquer la taille du texte. C'est à vous de dire combien de pixels exactement doit faire le texte.
Pour avoir un texte de 16 pixels de hauteur, vous devez écrire :
font-size:16px;

En donnant une valeur relative : c'est-à-dire en écrivant carrément "gros", "très gros", "petit", "minuscule". Mais bien sûr, comme tout c'est en anglais, vous devez écrire: font-size: xx-small
Voici la liste des différentes valeurs que vous pouvez mettre ainsi que leur signification :

En em : c'est une autre façon d'indiquer de manière relative la taille du texte. Un peu délicat à comprendre,mais une fois qu'on a un peu testé ça vient tout seul, et on se rend compte que c'est une méthode vraiment pratique.
On doit indiquer la taille du texte par rapport à la taille normale de la police. Je m'explique : "1em" signifie "Taille normale". Si vous mettez un nombre supérieur (généralement un nombre décimal) comme "1.3em", le texte aura une taille 1,3 fois plus grande. De même pour réduire : "0.8em" et votre texte aura une taille 0,8 fois plus petite.Vous devez écrire: font-size: 0.7em;

En pourcentage : ça c'est facile. Si vous indiquez "100%", le texte aura une taille "normale". Si vous mettez "130%", le texte aura une taille correspondant à 130% de la taille normale. Ca ressemble énormément aux "em" (en fait c'est plus ou moins pareil). Après, tout est une question de goût. Vous devez écrire: font-size:140%
Les mentions en pourcentage se réfèrent à la taille de police de l'élément parent.

3.Le style de police. Vous devez indiquer le nom de la police comme ceci : font-style: italic;

Avec font-style: vous pouvez spécifier le style de police. Les données suivantes sont possibles:

4.La variante de police. Vous devez indiquer le nom de la police comme ceci : font-variant:valeur;

Cette option d'afficher en petites capitales, peut vous être utile pour réaliser des titres ou sous-titres mais son utilité est vite limitée et sa répétition peut devenir pénible pour le visiteur.vous devez écrire: font-variant: normal
Valeurs possibles

5.La taille de la police (graisse de police). La graisse de police correspond à l'état plus ou moins gras dans lequel la police est représentée.Vous devez indiquer le nom de la police comme ceci : font-weight: valeur

Vous pouvez controler la taille de votre texte. Valeurs possibles:

Attention:
Il n'y a pour ainsi dire aucune police installée qui supporte toutes les mentions permises relatives à la graisse de police.

Exemple:

1. Ouvrir l'éditeur de texte.
Si vous utilisez Notepad++, pensez à aller dans le menu "Langage / CSS" pour activer la coloration du CSS. Vous penserez à enregistrer votre fichier en .css au lieu de .html.

2. Créons un modèle de texte
Cette page sera un fichier CSS nommée: styles_polices

#police {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
}

3. Ecrire les codes Html suivants dans le fichier polices.htm

Pour inclure notre CSS dans notre page HTML, il nous suffit d'insérer le code suivant entre les balises <head> et </head>:
<link rel="stylesheet" type="text/css" href="styles_polices">, pour indiquer le chemin du fichier
style_div.css

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<link href="styles_polices.css" rel="stylesheet" type="text/css">
<title>Police et CSS</title>
</head>
<body>
<div id="police">Ceci est une police arial de 14px gras italique et avec des petites majuscules</div>
</body>
</html>

Les classes et les ID

Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe.

La définition des classes est aussi simple que celles des styles. Elle consiste à préciser la balise sélectionnée (comme pour une déclaration de style), puis de lui ajouter un point (.) et le nom que l'on souhaite donner à la classe. Le nom de la classe peut-être composé de lettres (accentuées ou non), de chiffres et de tirets :

Reprenons notre exemple

.police {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
}

3.Appel d'une classe dans le fichier polices.htm

Pour appeler une classe dans le code HTML, il suffit de rajouter un attribut class à la balise :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<link href="styles_polices.css" rel="stylesheet" type="text/css">
<title>Police et CSS</title>
</head>
<body>
<div class="police" id="boite">Ceci est une police arial de 14px gras italique et avec des petites majuscules</div>
</body>
</html>