Mise en forme de texte

Dans cet article, je vais créer des régles pour des classes CSS, vous pouvez bien entendu les appliquer aux balises, ID, élements composés

Police de caractére

font-family: "Arial Black, Gadget, sans-serif";

Liste des polices HTML / CSS

Police	Usage
Arial	Imprimé, Web
Arial Black	Imprimé, Web
Comic Sans MS	Web
Courier New	Simulation listing
Georgia	Web
Impact	Imprimé, Web
Symbol	Imprimé, Web
Times New Roman	Imprimé, Web
Trebuchet MS	Web
Verdana	Web (petits caractéres)
Webdings	Web

Exemple

Texte en Arial Black, Gadget, sans-serif

Code CSS

.texte1 {

    font-family: "Arial Black, Gadget, sans-serif";

    }

Code HTML

Texte en Arial Black, Gadget, sans-serif

Taille de la police de caractére

font-size: 14px;

Les tailles de police en HTML peuvent être exprimées en px, pt, in, cm, mm, pc, em, ex %

Exemple

Texte dans un bloc de paragaphe en Arial Black, Gadget, sans-serif et taille 14px

Code CSS

.texte-taille14 {

    font-family: "Arial Black, Gadget, sans-serif";

    font-size: 14px;

  }

Code HTML

<p class="texte-taille14">Texte dans un bloc de paragaphe en Arial Black, Gadget, sans-serif et  taille 14px</p>

Couleur de la police de caractére

color: #FF0000; /* Rouge */

Exemple

Texte rouge

Code CSS

.texte-rouge {

    color: #FF0000; /* Texte en rouge */

   }

Code HTML


  <p class="texte-rouge">Texte rouge</p>

Comme vous pouvez le constater, la couleur de la police, peut être exprimée en texte (Anglais) ou en héxadécimal.

1. En texte : Tout simplement, les couleurs écrites en Anglais

2. En héxadécimal : On ajoute un diése avant les valeurs numériques, les 6 valeurs à la suite correspondent aux valeurs du rouge, du vert et du bleu

Comme vous le savez, les couleurs du web sont exprimées en RVB (Rouge, vert, bleu)

Exemple #FF0000

FF = valeur du Rouge, 00 = Valeur du vert, 00 = Valeur du bleu

En savoir plus sur les couleurs HTML

Grassage du texte

font-weight : bold;

Valeurs possibles : lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900, bold, bolder

Exemple

Texte gras et rouge

Code CSS

.texte-gras-rouge {

    font-weight: bold; /* Texte gras */

    color: #FF0000; 

  }

Code HTML


  <p class="texte-gras-rouge">Texte gras et rouge</p>

Style

font-style : italic;

Valeurs possibles : normal, italic, oblique

Exemple

Texte en italique et rouge

Code CSS

.texte-italique-rouge { font-style: italic; color: #FF0000; }

Code HTML

Texte en italique et rouge

Variante de police

font-variant: small-caps; /* Autre valeur possible : normal*/

Permet d'afficher un texte en petites capitales, vous pouvez l'utiliser par exemple l'utiliser sur des titres

Exemple

Texte en petite capitale et rouge

Code CSS

.rouge-capital {

    font-variant: small-caps;

    color: #FF0000;

    }

Code HTML

Texte en petite capitale et rouge

Hauteur de ligne

line-height: 40px;

Les hauteurs de police en HTML peuvent être exprimées en : : px, pt, in, cm, mm, pc, em, ex %

Exemple de texte avec une hauteur de ligne fixée à 40px sur fond rose

Texte avec une hauteur de 40px sur fond rose

Code CSS

.hauteur-40 {
line-height:40px;
background-color:#FCF; /* La couleur de fond */
}

Code HTML

Texte avec une hauteur de 40px sur fond rose

La casse

text-transform: uppercase;

Valeurs possibles

capitalize, premiére lettre du texte en majuscule,
uppercase, texte en majuscule
lowercase, texte en minuscule,
none, texte normal.
inherit hérite de son parent

Exemple

Texte écrit en minuscule qui s'affiche en majuscule

Code CSS

.majuscule {

        text-transform: uppercase;

      }

Code HTML

Texte écrit en minuscule qui s'affiche en majuscule

Soulignement

text-decoration: underline;

valeurs possibles :

underline (souligné), overline (ligne au dessus), line-throught (barré)

blink (clignotant), none (aucun)

Exemple

Texte souligné

Code CSS

.texte-souligne {

    text-decoration: underline;

  
    
  }

Code HTML

Texte souligné

Tutoriel CSS