Effet de style mettre un texte en gras et|ou en italique

Effet de style gras, italique, majiscule ou miniscule

Mettre en italique

Pour mettre en italique en CSS on utilise font-style, qui peut prendre 3 valeurs :
☆ italic : le texte sera mis en italique.
☆ oblique : le texte sera mis en italique, "italic" et "oblique" reviennent au même. Choisissez donc l'un des deux
☆ normal : le texte sera normal (par défaut). Si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez écrire :
Code CSS :

Exemple :     📋 Copier le code

em
{
font-style: normal; 
}

Sur l'exemple suivant, je me sers par exemple de font-style pour mettre en italique tous mes titres <h2> :
Code : CSS

Exemple :     📋 Copier le code

h1
{
text-align: center; 
font-family: Arial, "Times New Roman", Verdana, serif; 
}
h2
{
font-style: italic; /* Les titres h2 seront en italique ! */
text-indent: 30px; /* On décale un peu les sous-titres */
font-family: Arial, "Times New Roman", "Arial Black", Verdana, serif; 
}

Mettre en gras

En CSS pour mettre en gras on utilise la propriété: font-weight,
elle prend les valeurs suivantes :
☆ bold : le texte sera en gras.
☆ normal : le texte sera écrit normalement (par défaut).
Exemple:Code CSS :

Exemple :     📋 Copier le code

p
{
font-weight: bold; 
}

Les majuscules en CSS

Le CSS permet d'appliquer des effets très intéressants sur du texte,
pour modifiant automatiquement les majuscules.
Il y a 2 propriétés qui travaillent sur les majuscules.
1. la propriété font-variant, elle prend 2 valeurs différentes :
☆ small-caps : le texte sera écrit en petites capitales.
☆ normal : le texte sera écrit normalement (par défaut).
Code CSS :

Exemple :     📋 Copier le code

p
{
font-variant: small-caps; 
}

2. La propriété text-transform. Elle peut prendre 4 valeurs :
☆ uppercase : tout le texte sera écrit en majuscules.
☆ lowercase : tout le texte sera en minuscules.

☆ capitalize : la première lettre de chaque mot sera en majuscule.
☆ none : pas de transformation (par défaut).
Je me sers des class .

Code : HTML

Exemple :     📋 Copier le code

<h1>Racisme</h1>
<p>...Ton christ est juif, ta pizza est italienne, <br />
ton café est brésilien, ta voiture est japonaise, <br />
<span class="crier">ton écriture est latine,<br />
tes vacances sont turques, tes chiffres sont arabes et...<br />
</span></p>
<p class="ne_dites_rien">
TU REPROCHE A TON VOISIN D'êTRE éTRANGER<br />
CE PARAGRAPHE  EST éCRIT EN MAJUSCULES
</p>

Code CSS :

Exemple :     📋 Copier le code

h1
{
text-align: center; 
font-family: Arial, "Times New Roman", Verdana, serif; 
text-transform: capitalize; 
}
.crier
{
text-transform: uppercase; 
}
.ne_dites_rien
{
text-transform: lowercase; 
font-style: italic; 
}

Cette propriété text-transform est pratique pour changer l'apparence de tout le texte!

Décoration

Cette propriété CSS : text-decoration porte bien son nom
Elle permet, entre autres, de souligner le texte. Voici les valeurs qu'elle peut prendre :
☆ underline : souligné.
☆ line-through : barré.
☆ overline : ligne au-dessus.
☆ blink : clignotant. Attention, cette propriété ne marche pas sous Internet Explorer. Elle fonctionne en revanche bien sur tous les autres navigateurs.
☆ none : normal (par défaut).
Ce CSS va vous permettre de tester les effets de text-decoration :
Code : CSS

Exemple :     📋 Copier le code

h1
{
text-align: center; 
font-family: "Arial Black", Arial, "Times New Roman", serif; 
text-decoration: blink; /* Le titre sera clignotant ! (ne fonctionne pas sous Internet Explorer) */
}
.souligne
{
text-decoration: underline; 
}
.barre
{
text-decoration: line-through; 
}
.ligne_dessus
{
text-decoration: overline; 
}

Le XHTML qui va avec :
Code : HTML

Exemple :     📋 Copier le code

<h1>A ne pas manquer !</h1> 
<p>La propriété CSS <em>text-decoration</em> permet de décorer son texte 
<br />
<span class="souligne">et le souligne</span>...<br />
<span class="barre">et le barre</span>...<br />
et même  <span class="ligne_dessus"> mettre une ligne au-dessus</span>
</p>

On peut créer des class combinant des styles, comme par exemple qui souligne le texte, le met en gras, et l'écrit en plus gros

chapitre précédent    chapitre suivant