CSSdebutant.com

Les polices en CSS : choisir la famille de polices de caractères
Police en CSS : taille, gras, italique, oblique...


bouton de manchette clavierA découvrir les boutons de manchette Geek :) - Des idées de cadeaux à petits prix :)

Gestion des différentes polices

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

  1. font-family: Famille de police
  2. font-size: Taille de votre police de caratère
  3. font-style: Gras, italique, oblique...
  4. font-variant: Variante de police
  5. font-weight: Taille de la police
A savoir : Dans ce chapitre, la notion d'héritage est appliquée. (voir notion d'héritage sur ce lien Les noms de familles contenant des espaces doivent etre mis entre guillemets:
font-family: "Trebuchet MS", Verdana, Geneva, Arial;

Famille de police

Il est très utile de fixer avec le CSS la police de caratère : font-family: Verdana, sans-serif;
Deux valeurs possibles :
  1. Nom de la famille
  2. Famille généric
Si vous mettrez un nom de famille comme "verdana", c'est bien de mettre d'autre police de caratère dans l'ordre de votre préférence.

En effet, si la police que vous souhaitez pour votre site s'affiche correctement si votre ordinateur, elle peut ne pas etre présente sur un autre ordinateur.
D'ou l'intéret d'en mettre d'autres.

Taille de votre police de caratère

code CSS Vous pouvez aussi définir la taille de votre texte : font-size: valeur;
Valeurs possibles (en anglais):
  1. xx-large
  2. x-large
  3. larger
  4. large
  5. medium
  6. small
  7. smaller
  8. x-small
  9. xx-small
  10. length
  11. % (pourcentage)

Gras, italique, oblique...

Vous pouvez définir de nombreuses choses grace au CSS: Gras, italique, oblique : font-style: valeur;
Valeurs possibles :
  1. normal
  2. italic (italique)
  3. oblique

Voir un exemple :
Texte en italique.
 Voir le code CSS :
Texte en italique.
Texte oblique.

Variante de police

Cette option d'afficher en petites capitales, peut vous etre 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. font-variant: valeur;
Valeurs possibles
  1. normal
  2. small-caps
Voir un exemple :

Voici un titre en petites majuscules

 Voir le code CSS :
.small-caps { font-variant: small-caps ;}

Voir le code dans l'élément
<p class="small-caps">Voici un titre en petites majuscules</p>

Taille de la police

code CSS Vous pouvez controler la taille de votre texte : font-weight: valeur;
Valeurs possibles
  1. lighter
  2. normal
  3. 100
  4. 200
  5. ...
  6. bold
  7. bolder
Voir un exemple :

Voici un text font-weight: lighter

 Voir le code CSS :
.font_weight_bolder { font-weight: lighter ;} Voir le code dans l'élément
<p class="font-weight">Voici un text font-weight: bolder</p> Apprendons la gestion des Ancres, Liens et Pseudo Classes en CSS >>>

Le CSS en 3 questions/réponses - en bref

🖥️ C'est quoi HTML et CSS ?

Le CSS est un langage informatique utilisé pour mettre en forme les fichiers HTML sur un site web. Ainsi, les fichiers CSS permettent de gérer l'aspect graphique d'une page en HTML.

🤔 Qu'est-ce que le CSS ?

CSS est l'acronyme de « Cascading Style Sheets » c'est à dire « feuille de style en cascade ». Le CSS est un langage informatique permettant de mettre en forme des pages web (HTML ou XML).

📆 Différence entre CSS et CSS3 ?

CSS3 est la dernière version de CSS. Il fournit des capacités de type JavaScript. En plus de cela, il fournit également des fonctionnalités de développement mobile.

Voulez-vous laisser une note ou un commentaire ?

Donnez votre avis sur ce contenu :
Votes: 4.1 (100%) 59 votes