• Les propriété CSS de type FONT

1.1. La propriété font-size
Nous utiliserons la propriété font-size lorsque nous voudrons modifier la taille d’un texte.
Cette propriété accepte deux types de valeurs : des valeurs de type absolu (en pixel ou en point), ou relatif (en em, ex ou en pourcentage).

• Les valeurs de type « relatives » sont appelées de la sorte car elles permettent au texte de s’adapter relativement aux préférences de vos visiteurs. En clair, si vous fixez la taille d’un texte à 100%, ce texte pourra avoir des tailles différentes selon les réglages faits par vos visiteurs sur leurs navigateurs. Ce type de valeur présente des avantages indéniables, et notamment le fait que tous vos visiteurs devraient être capables de lire vos écrits sans difficulté. De plus, le texte peut également s’adapter relativement aux autres éléments de votre page web.
• Une valeur de type absolu, en revanche, va fixer la taille d’un texte définitivement. Le grand avantage de ce type de valeur est que vous pouvez contrôler précisément donc le rendu de votre texte et de votre page web.
•  

Code html :

Code CSS :

1.2. la propriété font style
La propriété font-style permet de fixer l’inclinaison d’un texte. Elle accepte 4 valeurs différentes :

• Normal (valeur par défaut) ;
• Italic (change le texte en italique) ;
• Oblique (penche le texte) ;
• Inherit (hérite des propriétés de l’élément parent).

Dans l’exemple qui suit, Si l’on souhaite que les paragraphes héritent du même style que notre div, l’utilisation de la valeur inherit est alors une excellente solution.

Code HTML :

Code CSS :

1.3. La propriété font-weight
La propriété font-weight permet de fixer le poids d’un texte. Cette propriété accepte 6 valeurs différentes :

• Normal (la valeur par défaut) ;
• Lighter (version allégée de la police) ;
• Bold (la police est en gras) ;
• Bolder (la police est encore plus en gras) ;
• Une centaine comprise entre 100 et 900 (du plus léger au plus gras) ;
• Inherit (hérite des styles de ses parents).

Voyons immédiatement comment cette propriété s’utilise avec un exemple :
Code html :

Code css :

1.4. La propriété font-family
La propriété font-family va nous permettre de choisir la police de notre texte.
Dans tous les cas, nous déclarerons plusieurs polices (on parle de « famille » de polices, d’où le nom de cette propriété) afin de s’assurer qu’au moins une des polices mentionnées soit supportée par vos visiteurs. En effet, il existe toujours des versions de navigateurs et des ordinateurs ne supportant pas certaines polices, d’où tout l’intérêt d’en déclarer plusieurs.

Code CSS : le code html est le même que le précédent

1.5. La propriété color
Elle permet de changer le couleur d’un texte.

Code HTML :

Code CSS :

Cette méthode est très limitée car nous ne pouvons que choisir parmi seize noms de couleurs qui sont les suivantes :

Il existe deux autres notation plus avancé et un peu plus complexe que la précédente pour gérer les couleurs : la notation hexadécimale et le code RGB.

. les propriétés CSS de type TEXT
Les propriétés de type « text- » servent également à fixer l’apparence de nos textes. Elles viennent donc compléter les propriétés de type « font- » vues dans la partie précédente.
2.1 Gérer l’alignement d’un texte
Pour modifier l’alignement d’un texte, nous allons utiliser la propriété text-align.
Cette propriété peut prendre cinq valeurs différentes :

• Left : le texte sera aligné sur la gauche ; valeur par défaut ;
• Center : le texte sera centré ;
• Right : le texte sera aligné sur la droite ;
• Justify : le texte sera justifié ;
• Inherit : hérite des propriétés de l’élément parent.

Il est bon de noter que le centrage ou l’alignement se fait toujours par rapport à l’élément parent le plus proche du texte.
5.2 La propriété text-decoration
On va pouvoir modifier la décoration d’un texte grâce à la propriété text-decoration.
On peut choisir parmi six valeurs pour cette propriété :

• Underline : le texte sera souligné ;
• Overline : une ligne apparaîtra au-dessus du texte ;
• Line-through : le texte sera barré ;
• Blink : le texte clignotera (attention, ne fonctionne pas sur tous les navigateurs) ;
• Inherit ;
• None : pas de décoration, comportement par défaut

3. tableau récapitulatif des propriété CSS
Le CSS propose plusieurs propriétés pour la mise en forme. Dans cette section il sera question de présenter sous formes de tableau les propriétés les plus utilisées.

3.1. les propriétés de mise en forme

3.2. Les propriétés de couleur de font

3.3. Propriétés des boites

3.4. Propriété des listes

           
3.5. Les propriétés des tableaux

3.6. Autres propriétés