Mettre première lettre ou ligne en capitale, en couleur
first-line, first-letter : gestion du texte en CSS facilement

Pseudo Elements en CSS

La syntaxe du CSS

La syntaxe des pseudo éléments est un peu différente du CSS simple, mais sans grand changement. selecteur:pseudo-element
Les pseudos-éléments font rélérence à des parties de texte qui ne sont pas forcément délimités par des balises HTML.

Par exemple le pseudo-élément :First-Letter désigne la première lettre d’un paragraphe. Le nom des pseudo-éléments est précédé de deux-points ( : ).

Mettre la première ligne en rouge: p: first-line { color: red;} (on pourrait gérer la taille en ajoutant font-size: medium;)

First Line

• first-line

Désigne la première lettre de tous les blocs de texte (titres H1 et autres, paragraphes…)

Au lieu de :

p{ font-size: small; }

On va mettre :

p: first-line { font-size: medium; color: #ff0000; }

Valeurs possibles :

• background
• clear
• color
• font
• letter-spacing
• line-height
• text-decoration
• text-transform
• vertical-align
• word-spacing

Comme vous pouvez le voir dans l’exemple en cliquant sur « Voir un exemple », les paragraphes sont exposées à une petite taille de police, mais le p: premiére ligne est définie comme une taille moyenne et une couleur rouge.

Voir un exemple :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce fermentum neque eget nisl. Quisque tincidunt. Proin dictum laoreet dui. Nulla justo. Quisque tortor sapien, gravida nec, sollicitudin non, placerat eu, lectus. Morbi placerat. Quisque ipsum turpis, placerat eu, pretium vitae, mattis vitae, nunc. Maecenas at turpis a magna hendrerit luctus.

Voir le code CSS :

p.special:first-line {font-size: medium; color: #ff0000;} 

Voir le code dans l’élément

<p class="special">the content</p>

First Letter

• first-letter

La pseudo-classe :first-letter sert à définir des lettres ou caractères en capitale ouvrant un paragraphe.

Un grand avantage, c’est que ce style permet de ne pas toucher au code html et uniquement agir et modifier le texte via la feuille de style.

Voir un exemple pour mettre la :

This is a special sentence I wrote to demonstrate the use and look of the first-letter pseudo element. As you can see the first letter of this paragraph is styled differently than the rest of the characters within it. All of this was done by simply adding class="special_letter" to the opening <p> tag for this paragraph.

Voir le code CSS :

p.special_letter:first-letter {font-size: x-large; font-weight: bold; color: #ff0000;}

Voir le code dans l’élément

<p class="special_letter">the content</p>

Les propriétés suivantes peuvent être affectés à la première lettre pseudo- élément:

• background (changer le fond)
• border (changer les bordures)
• clear (Permet de spécifier l’affichage de l’élément flottant par rapport à l’élément précédent)
• color (changer la couleur)
• float (Permet de spécifier la position de l’élément flottant par rapport à l’élément précédent)
• font (Gestion du type de couleur)
• line-height (Permet de spécifier la hauteur d’une ligne d’un bloc de texte)
• margin (Gestion de marges)
• padding (Gestion du padding)
• text-decoration (Permet de souligner ou pas le texte)
• text-transform (Permet de mettre en majuscule ou pas le texte)
• word-spacing (Espacement entre les mots)

On obtient ainsi des effets qui sont agréables mais dont il ne faut pas abuser du point de vue design de votre page.

Voici un exemple de code pour mettre le bloc de texte en capitale (capitalize), majuscule (uppercase), minuscule (lowercase) ou rien : none.
p#no{ text-transform: none; } p#cap{ text-transform: capitalize; }
p#up{ text-transform: uppercase; } p#low{ text-transform: lowercase; }

Attention : Notez un  » tous les navigateurs ne supportent pas encore ce style. On l’appelle aussi « pseudo-style » ou « pseudo-élément ».