Glossaire des propriétés CSS

I. Propriétés de mise en forme de texte▲

I-A. Mise en forme de la police▲

I-A-1. Nom de police | font-family▲

font-family : permet d'indiquer les noms de polices par ordre de préférence.

Syntaxe : [[ <family-name> | <generic-family> ] [, <family-name> | <generic-family>]* ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

font-family: "Arial Black", Arial, Verdana, serif;

Lorem ipsum dolore sit amet, consectetur adipisicing elit

Voir la source :

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .font-fam {
        font-family: 'Arial Black', Arial, Verdana, serif;
    }
</style>
<p class="font-fam">Lorem ipsum dolore sit amet, consectetur adipisicing elit</p>

Explications :

si le visiteur possède la police Arial Black, elle sera utilisée, sinon Arial, sinon Verdana ou enfin serif ;

il est possible d'utiliser des polices personnalisées en combinaison avec @font-face ;

pour les polices composées de deux mots, il faut les entourer de guillemets.

I-A-2. Police personnalisée | @font-face▲

@font-face : permet de déclarer une nouvelle police, qui sera téléchargée sur l'ordinateur de vos visiteurs.

Syntaxe : <font-description>+

Compatibilité : IE 9+, FF 3.5+, Chrome 0.2+, Safari 3.1+, Opera N/C

Version CSS : 2.1

Complément d'information : Comment utiliser une police personnalisée sur un site Web ?

Sélectionnez

@font-face {
    font-family: 'ma_police';
    src: url('ma_police.eot') format('eot'),
    url('ma_police.woff') format('woff'),
    url('ma_police.ttf') format('truetype'),
    url('ma_police.svg') format('svg');
}

Explications :

il est important ici de voir qu'une police est définie par plusieurs formats étant donné que tous les navigateurs ne prennent pas en charge tous les formats.

I-A-3. Taille du texte | font-size▲

font-size : permet de définir la taille de la police de caractères. Elle peut être exprimée avec plusieurs unités.

Syntaxe : <absolute-size> | <relative-size> | <length> | <percentage> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

font-size: 12px;
font-size: 100%; /* normal */
font-size: 1.2em; /* 1.0 : normal */
font-size: 1ex;
font-size: xx-small; /* très très petit */
font-size: x-small; /* très petit */
font-size: small; /* petit */
font-size: medium; /* moyen */
font-size: large; /* grand */
font-size: x-large; /* très grand */
font-size: xx-large; /* très très grand */

Lorem ipsum dolore sit amet

Voir la source

Cacher/Afficher le codeSélectionnez

<p style="font-size: 12px;">Lorem ipsum dolore sit amet</p>
<p style="font-size: 100%;">Lorem ipsum dolore sit amet</p>
<p style="font-size: 1.2em;">Lorem ipsum dolore sit amet</p>
<p style="font-size: 1ex;">Lorem ipsum dolore sit amet</p>
<p style="font-size: xx-small;">Lorem ipsum dolore sit amet</p>
<p style="font-size: x-small;">Lorem ipsum dolore sit amet</p>
<p style="font-size: small;">Lorem ipsum dolore sit amet</p>
<p style="font-size: medium;">Lorem ipsum dolore sit amet</p>
<p style="font-size: large;">Lorem ipsum dolore sit amet</p>
<p style="font-size: x-large;">Lorem ipsum dolore sit amet</p>
<p style="font-size: xx-large">Lorem ipsum dolore sit amet</p>

I-A-4. Gras | font-weight▲

font-weight : permet de définir l'épaisseur de la police de caractères.

Syntaxe : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

font-weight: bold; /* gras */
font-weight: bolder; /* plus gras */
font-weight: lighter; /* plus fin */
font-weight: normal; /* pas gras (par défaut) */

Lorem ipsum dolore sit amet

Voir la source

Cacher/Afficher le codeSélectionnez

<p style="font-weight: bold;">Lorem ipsum dolore sit amet</p>
<p style="font-weight: bolder;">Lorem ipsum dolore sit amet</p>
<p style="font-weight: lighter;">Lorem ipsum dolore sit amet</p>
<p style="font-weight: normal;">Lorem ipsum dolore sit amet</p>

I-A-5. Petites capitales | font-variant▲

font-variant : met le texte en petites capitales.

Syntaxe : normal | small-caps | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

font-variant: small-caps; /* petites capitales */
font-variant: normal; /* normal (par défaut) */

Lorem ipsum dolore sit amet

LOREM IPSUM DOLORE SIT AMET

Voir la source

Cacher/Afficher le codeSélectionnez

<p style="font-variant: small-caps;">Lorem ipsum dolore sit amet</p>
<p>LOREM IPSUM DOLORE SIT AMET</p>

I-A-6. Petites capitales | font-variant▲

font-variant : met le texte en petites capitales.

Syntaxe : normal | small-caps | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

font-variant: small-caps; /* petites capitales */
font-variant: normal; /* normal (par défaut) */

Lorem ipsum dolore sit amet

LOREM IPSUM DOLORE SIT AMET

Voir la source

Cacher/Afficher le codeSélectionnez

<p style="font-variant: small-caps;">Lorem ipsum dolore sit amet</p>
<p>LOREM IPSUM DOLORE SIT AMET</p>

I-A-7. Italique | font-style▲

font-style : permet de mettre un texte en italique.

Syntaxe : normal | italic | oblique | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

font-style: italic; /* italique (forcément !) */
font-style: oblique; /* autre façon de mettre en italique */
font-style: normal; /* normal (par défaut) */

Lorem ipsum dolore sit amet

Voir la source

Cacher/Afficher le codeSélectionnez

<p style="font-style: italic;">Lorem ipsum dolore sit amet</p>
<p style="font-style: oblique;">Lorem ipsum dolore sit amet</p>
<p style="font-style: normal;">Lorem ipsum dolore sit amet</p>

I-A-8. La police tout-en-un | font▲

font : regroupe les propriétés de mise en forme de la police. À moins de l'utilisation d'une des valeurs "caption | icon | menu | message-box | small-caption | status-bar | inherit", font-size et font-family sont tous les deux obligatoires et dans cet ordre (avec éventuellement le line-height entre les deux). 'font-style' || 'font-variant' || 'font-weight' sont optionnels, dans n'importe quel ordre, mais avant le font-size.

Syntaxe : [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

font: bold 16px Arial;

Lorem ipsum dolore sit amet

Voir la source

Cacher/Afficher le codeSélectionnez

<p style="font: 14pt bolder Arial;">Lorem ipsum dolore sit amet</p>

I-B. Mise en forme des paragraphes▲

I-B-1. Alignement horizontal | text-align▲

text-align : aligne un texte horizontalement.

Syntaxe : left | right | center | justify | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

text-align: left; /* à gauche (par défaut) */
text-align: center; /* centré */
text-align: right; /* à droite */
text-align: justify; /* texte justifié */

Lorem ipsum dolore sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .t-align-left {
        text-align: left;
        background-color: #93caff;
        border: 2px solid #696969;
        margin-bottom: 10px;
        width: 50%;
    }
 
    .t-align-center {
        text-align: center;
        background-color: #93caff;
        border: 2px solid #696969;
        margin-bottom: 10px;
        width: 50%;
    }
 
    .t-align-right {
        text-align: right;
        background-color: #93caff;
        border: 2px solid #696969;
        margin-bottom: 10px;
        width: 50%;
    }
 
    .t-align-justify {
        background-color: #93caff;
        text-align: justify;
        width: 50%;
        border: 2px solid #696969;
    }
</style>
<p class="t-align-left">Lorem ipsum dolore sit amet</p>
<p class="t-align-center">Lorem ipsum dolore sit amet</p>
<p class="t-align-right">Lorem ipsum dolore sit amet</p>
<p class="t-align-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

I-B-2. Dernière ligne | text-align-last▲

Cette propriété peut nécessiter l'utilisation des préfixes vendeurs.

text-align-last : aligne la dernière ligne d'un texte horizontalement.

Compatibilité : IE 5.5+, FF 12.0+, Chrome, Safari, Opera

Version CSS : 3

Explications.
auto : la ligne adopte le même alignement que pour text-align, sauf si text-align vaut justify, dans ce cas, la dernière ligne sera alignée à gauche.
start : la dernière ligne sera alignée en début de ligne, le côté dépendant du sens de lecture (ltr ou rtl).
end : la dernière ligne sera alignée en fin de ligne, le côté dépendant du sens de lecture (ltr ou rtl).
left : la dernière ligne sera alignée à gauche.
right : la dernière ligne sera alignée à droite.
center : la dernière ligne sera centrée.
justify : la dernière ligne prendra la largeur de l'élément.

Notes.
La notion de dernière ligne correspond à la dernière ligne affichée avant tout saut de ligne forcé (fin de balise de type bloc ou avant une balise entrainant un saut de ligne comme <br />.
Internet Explorer ne supporte pas les valeurs start et end.

Exemples :

Sélectionnez

text-align-last: auto; /* par défaut */
text-align-last: center; /* centré */
text-align-last: end; /* selon le sens de lecture */
text-align-last: justify; /* justifié */

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .t-align-last-left {
        text-align: right;
        text-align-last: left;
        background-color: #93caff;
        border: 2px solid #696969;
        margin-bottom: 10px;
        width: 50%;
    }
 
    .t-align-last-center {
        text-align: left;
        text-align-last: center;
        background-color: #93caff;
        border: 2px solid #696969;
        margin-bottom: 10px;
        width: 50%;
    }
 
    .t-align-last-right {
        text-align: left;
        text-align-last: right;
        background-color: #93caff;
        border: 2px solid #696969;
        margin-bottom: 10px;
        width: 50%;
    }
</style>
<p class="t-align-last-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="t-align-last-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="t-align-last-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

I-B-3. Alignement vertical | vertical-align▲

vertical-align : la propriété vertical-align ne fonctionne que pour les cellules (<td></td>) ou les éléments de type inline-block.

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

vertical-align: top; /* en haut */
vertical-align: middle; /* au milieu */
vertical-align: bottom; /* en bas */

Lorem ipsum dolore sit amet

Voir source

Cacher/Afficher le codeSélectionnez

<table>
<tr style="height: 50px; background-color: #93caff;">
    <td style="vertical-align: top;">Lorem ipsum dolore sit amet</td>
    <td style="vertical-align: middle;">Lorem ipsum dolore sit amet</td>
    <td style="vertical-align: bottom;">Lorem ipsum dolore sit amet</td>
</tr>
</table>

I-B-4. Décoration | text-decoration▲

text-decoration : permet d'appliquer une décoration sur un texte (souligné, barré, etc.).

Syntaxe : none | [ underline || overline || line-through ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

text-decoration: underline; /* souligné */
text-decoration: overline; /* ligne au-dessus */
text-decoration: line-through; /* barré */
text-decoration: none; /* normal (par défaut) */

Lorem ipsum dolore sit amet

Voir la source

Cacher/Afficher le codeSélectionnez

<p style="text-decoration: underline;">Lorem ipsum dolore sit amet</p>
<p style="text-decoration: overline;">Lorem ipsum dolore sit amet</p>
<p style="text-decoration: line-through;">Lorem ipsum dolore sit amet</p>
<p style="text-decoration: none;">Lorem ipsum dolore sit amet</p>

I-B-5. Capitales | text-transform▲

text-transform : permet de changer la casse du texte.

Syntaxe : capitalize | uppercase | lowercase | none | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

text-transform: uppercase; /* tout mettre en majuscules */
text-transform: lowercase; /* tout mettre en minuscules */
text-transform: capitalize; /* début des mots en majuscules */
text-transform: none; /* normal (par défaut) */

Lorem ipsum dolore sit amet

Voir la source

Cacher/Afficher le codeSélectionnez

<p style="text-transform: uppercase;">Lorem ipsum dolore sit amet</p>
<p style="text-transform: lowercase;">Lorem ipsum dolore sit amet</p>
<p style="text-transform: capitalize;">Lorem ipsum dolore sit amet</p>
<p style="text-transform: none;">Lorem ipsum dolore sit amet</p>

I-B-6. Alinéa | text-indent▲

text-indent : permet de définir l'alinéa d'un texte.

Syntaxe : <length> | <percentage> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

text-indent : 20px;

Voir la source

Cacher/Afficher le codeSélectionnez

<p style="text-indent: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
                ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
                esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
                sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

I-B-7. Hauteur de ligne | line-height▲

line-height : permet de définir l'interligne entre deux phrases. Les valeurs nulles ne sont pas autorisées.

Syntaxe : normal | <number> | <length> | <percentage> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Sélectionnez

line-height: 30px;
line-height: 20%;

Ici le line-height est à la valeur par défaut.
Ce qui explique que l'interligne soit normal.

Là on le définit à 30px
On se rend compte de l'écart plus important entre les deux phrases.

Pareil ici, le line-height est à 200%.
Pour un interligne "normal" mettre 100%.

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .line-height1 {
        background-color: #93caff;
        border: 2px solid #696969;
    }
 
    .line-height2 {
        background-color: #93caff;
        line-height: 30px;
        border: 2px solid #696969;
    }
 
    .line-height3 {
        background-color: #93caff;
        border: 2px solid #696969;
        line-height: 200%;
    }
</style>
<div style="width: 40%;">
    <p class="line-height1">Ici le line-height est à la valeur par défaut.<br />Ce qui explique que l'interligne soit normal.</p>
    <hr />
    <p class="line-height2">Là on le définit à 30px<br />On se rend compte de l'écart plus important entre les deux phrases.</p>
    <hr />
    <p class="line-height3">Pareil ici, le line-height est à 200%.<br />Pour un interligne "normal" mettre 100%.</p>
</div>

I-B-8. Césure | white-space▲

white-space : permet de définir comment sont gérés les espaces dans un texte.

Compatibilité : IE 5.5+, FF 1.0+, Chrome 1.0+, Safari 1.0+, Opera 9.5+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

Explications des valeurs :

normal : passage à la ligne automatique (par défaut) ;
nowrap : pas de passage à la ligne automatique, à moins qu'une balise HTML comme <br /> ne soit présente ;
pre : le passage à la ligne se fait tel que le texte a été saisi dans le code source (comme la balise <pre>).

Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet.

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .white-space1 {
        white-space: normal;
        width: 50%;
        border: 2px solid #696969;
    }
 
    .white-space2 {
        white-space: nowrap;
        width: 50%;
        border: 2px solid #696969;
    }
 
    .white-space3 {
        white-space: pre;
        width: 50%;
        border: 2px solid #696969;
    }
</style>
<p class="white-space1">
    Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet.
    Lorem ipsum dolore sit amet.
</p>
<p class="white-space2">
    Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet.
    Lorem ipsum dolore sit amet.
</p>
<p class="white-space3">
    Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet.
    Lorem ipsum dolore sit amet.
</p>

I-B-9. Césure forcée | word-wrap▲

word-wrap : permet de couper le texte si celui-ci déborde du conteneur.

Syntaxe : [ normal | break-word ]

Compatibilité : IE 5.5+, FF 3.5+, Chrome 1.0+, Safari 1.0+, Opera 10.5+

Version CSS : 3

Sélectionnez

word-wrap: normal;
word-wrap: break-word;

Lorem ipsum dolor sitsitsitsitsitsitsitsitsitsitsitsitsitsitsitsitsit amet, consectetur adipisicing elit

Lorem ipsum dolor sitsitsitsitsitsitsitsitsitsitsitsitsit amet, consectetur adipisicing elit

Voir la source

Cacher/Afficher le codeSélectionnez

<style type="text/css">
    .word-wrap1 {
        word-wrap: normal;
        width:150px;
        background-color: yellow;
        border: 2px solid #696969;
        margin-bottom: 10px;
    }
 
    .word-wrap2 {
        word-wrap: break-word;
        width: 150px;
        background-color: yellow;
        border: 2px solid #696969;
    }
</style>
<p class="word-wrap1">Lorem ipsum dolor sitsitsitsitsitsitsitsitsitsitsitsitsitsitsitsitsit amet, consectetur adipisicing elit</p>
<p class="word-wrap2">Lorem ipsum dolor sitsitsitsitsitsitsitsitsitsitsitsitsit amet, consectetur adipisicing elit</p>

I-B-10. Ombrage | text-shadow▲

text-shadow : permet d'ajouter une ombre sur un texte ou un élément de type bloc.

Syntaxe : none | [, ]* [ <couleur>? <longueur> <longueur> <longueur>? | <longueur> <longueur> <longueur>? <couleur>? ] | inherit (source: MDN)

Compatibilité : IE 10+, FF 3.5+, Chrome 4+, Safari 4+, Opera 9.5+, Opera Mobile 10+

Version CSS : 3

Sélectionnez

text-shadow: 2px 2px 4px red;

Lorem ipsum dolore sit amet, consectetur adipisicing elit

Voir la source

Sélectionnez

<style type="text/css">
    .shadow-red {
        text-shadow: 4px 4px 4px red;
    }
 
    .shadow-green {
        text-shadow: -4px -4px 4px green;
    }
 
    .shadow-black {
        text-shadow: 4px 4px 0px black;
    }
</style>
<p style="font-size: 1.2em;"><span class="shadow-red">Lorem ipsum</span> <span class="shadow-green">dolore sit amet</span>, <span class="shadow-black">consectetur adipisicing elit</span></p>

Explications des valeurs :

décalage en pixels à droite ;
décalage en pixels en bas ;
force du dégradé ;
couleur.

Le cas IE : comme (toujours ?) Internet Explorer fait bande à part, il faut utiliser la propriété filter. Voici un exemple :

Sélectionnez

filter: progid:DXImageTransform.Microsoft.Shadow(color='#ff0000', Direction=135, Strength=4);
zoom: 1;

I-C. Définition de la couleur de texte▲

I-C-1. Couleur de texte | color▲

color : nous disposons de six types de valeur pour indiquer la couleur du texte d'un élément :

Syntaxe : <color> | inherit

Compatibilité : IE 5+, FF 1+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1 (CSS 3 pour rgba, hsl et hsla)

la couleur en anglais : red, black, white, blue, green, etc. ;
la couleur en hexadécimal : #C0C0C0 ;
la couleur en Red Green Blue (RGB ou RVB en français) : rgb(0, 255, 0) ;
la couleur en RGB avec transparence : rgba(0, 255, 0, 0.5) ;
la couleur en Hue Saturation Luminosity (HSL ou teinte, saturation, luminosité) : hsl(250, 100%, 50%) ;
la couleur en HSL avec transparence : hsla(250, 100%, 50%, 0.5).

Complément d'information : Les couleurs en CSS 3.

Lorem ipsum dolore sit amet

Voir la source

Cacher/Afficher le codeSélectionnez

<p style="color: red;">Lorem ipsum dolore sit amet</p>
<p style="color: #C0C0C0;">Lorem ipsum dolore sit amet</p>
<p style="color: rgb(0, 255, 0);">Lorem ipsum dolore sit amet</p>
<p style="color: rgba(0, 255, 0, 0.6);">Lorem ipsum dolore sit amet</p>
<p style="color: hsl(250, 100%, 50%);">Lorem ipsum dolore sit amet</p>
<p style="color: hsla(250, 100%, 50%, 0.6);">Lorem ipsum dolore sit amet</p>

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Torgar. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.