Modifier le style d'un texte en langage HTML

Attention : afin d'éviter une incompréhension de la part du navigateur à la lecture de ce billet, un astérisque * a été rajouté dans les exemples suivants. Il convient bien entendu, dans l'écriture de votre code, de le supprimer.

Appliquer un style « à la volée »

Pour modifier l'apparence d'une partie de texte (voir les attributs simples déjà énoncés dans un précédent billet concernant : gras, italique, police, corps de police, couleur), la balise SPAN peut être utile. Si votre paragraphe utilise une class (c'est-à-dire un style CSS), il est possible de modifier seulement une partie de texte sans perdre le formatage du style pour les autres parties du texte contenues dans le paragraphe.

Cette balise est d'ailleurs utilisée dans le paragraphe que vous êtes en train de lire ; des parties de texte apparaissent en police Courier et de couleur gris ardoise. Ainsi, le style du paragraphe garde son formatage sauf pour les parties comprises entre les balises <*SPAN> et <*/SPAN>.

• Un exemple d'une ligne de code pour mieux comprendre

<*P class="nomDuStyle">Paragraphe avec texte d'un <*span class="autreStyle">autre style<*span style="text-decoration: underline; text-transform: uppercase;">souligné et en majuscules<*/span><*/span><*/P>.

Dans la ligne de code, il est bien évident que « nomDuStyle » et « autreStyle » doivent être définis dans les feuilles de styles.

Par ailleurs, vous aurez remarqué que l'on peut imbriquer un SPAN à l'intérieur d'un autre SPAN.

 Imprimer cette page

Créer des styles CSS pour le texte

Attention : afin d'éviter une incompréhension de la part du navigateur à la lecture de ce billet, un astérisque * a été rajouté dans les exemples suivants. Il convient bien entendu, dans l'écriture de votre code, de le supprimer.

Exemple de style

*.titreTexte {
    font-family: arial;
        => nom de la police
    font-size: 18pt;
        => taille de la police en point ou pixel
    color: #8B0000;
        => couleur du texte rouge foncé
    text-align: center;
        => alignement du texte centré (ou left = gauche,
           right = droite, justify = justifié)
    font-weight: bold;
        => graisse du caractère en gras (ou normal)
    font-style: normal;
        => style de police normal (ou italic = italique)
    padding: 1px;
        => marges intérieures de 1 pixel
    border: 2px solid gray;
        => bordure de 2 pixels, trait continu
           (ou dashed = tirets, dotted = pointillé, ...), et bleu
    lign-height: 150%;
        => interligne de 150% du corps de la police
    font-variant: small-caps;
        => police en petites capitales
    background: #DCDCDC;
        => couleur de l'arrière-plan
    }

Il convient, pour votre code, de ne prendre que les codes en gris, les textes en bleu n'étant qu'explicatifs. Vous remarquerez que le nom du style est préfixé par un point. Ce point disparaît lors de l'appel de ce style dans la balise class.

Les codes du style sont à mettre dans la partie HEAD de la page HTML.

Application du style pour un paragraphe

<*P class="titreTexte">Titre du texte<*/P>

Le texte inclus dans cette ligne de code aura, dans la partie « Prévisualisation », l'aspect ci-dessous :

Titre du texte

Ce style s'appliquera à tout le texte compris dans les balises de paragraphe (p). Pour appliquer un style à un texte, le nom de la class dans la balise de paragraphe ne comporte que le nom du style sans le point.



• Il est également possible d'appliquer un style à un paragraphe manuellement. Il suffit de reprendre les attributs des styles que vous souhaitez changer et les préciser dans l'attribut du paragraphe (style="..."). Le code sera donc le suivant :

<*P align="center" style="font-family: arial; color: #8B0000; font-weight: bold; padding: 1px; background-color: #DCDCDC; font-variant: small-caps;">Texte ponctuel à styler<*/p>

• Il est également possible de modifier un aspect du style prédéfini en indiquant dans les balises de paragraphe sa class et de modifier dans le style l'élément à changer. Le code pourrait donc être le suivant :

<*P align="center" class="titreTexte" style="color: #333366; background-color: aliceblue;">Paragraphe ponctuel à styler<*/p>

Le texte inclus dans cette ligne de code aura, dans la partie « Prévisualisation », l'aspect ci-dessous. Son style est identique à celui du précédent exemple (*.texteTitre défini en haut de page) excepté la couleur du texte et la couleur de l'arrière-plan modifiées dans l'attribut style="color:#333366; background-color: aliceblue;".

Paragraphe pontuel à styler

 Imprimer cette page

Pré-requis pour créer une page Web

Quelques connaissances en langage HTML sont nécessaires. De plus, il est recommandé de posséder plusieurs navigateurs afin de tester sa page car il existe des différences d'affichage chez certains.

Un article sur OpenWeb en dit plus sur les navigateurs alternatifs.

Certains téméraires se lanceront dans l'écriture du code sur Bloc-notes de Windows ou TextEdit de Mac ! Il existe cependant un navigateur comprenant également un composeur gratuit utile pour débuter dans la création de pages Web. Il s'agit d'un composeur WYSIWYG (« What you see is what you get »). Il est possible de visualiser dans le navigateur et d'accéder au code HTML.

Cliquez sur le lien pour télécharger gratuitement les fichiers d'installation complète de la suite Mozilla en français pour Windows, Linux ou Mac OS X.

Configurer l'aspect des liens
dans les feuilles de styles CSS

Attention : afin d'éviter une incompréhension de la part du navigateur à la lecture de ce billet, un astérisque * a été rajouté dans les exemples suivants. Il convient bien entendu, dans l'écriture de votre code, de le supprimer.

Pour ajouter un lien dans une page :

<*a href="mapage.html" target="_blank">Ma page HTML<*/a>

La balise <*a ouvre la configuration du lien, l'attribut href="..." précise la page ou l'élément du lien, l'attribut target="_blank" signifie l'ouverture du lien dans une nouvelle page. Après le texte spécifiant le lien, il faut préciser au navigateur la fermeture par la balise <*/a>.

Les styles CSS permettent de formater l'apparence des liens non visités (:*link), visités (:*visited) et survolés (:*hover).

Exemples de styles CSS :

a:*link, a:*visited {
       color: #0E61B3;
       text-decoration: none;
       }

Ce style spécifie la couleur (color) des liens non encore visités (:*link) et visités (:*visited) et que le lien n'est pas souligné. Il est bien entendu possible de formater l'apparence des liens visités. Dans ce cas, il faut définir un style pour chacun d'eux (a:*link et a:*visited).

a:*hover {
       color: #2970F4;
       text-decoration: underline;
       }

Ce style spécifie la couleur (color) des liens et souligne (underline) le lien quand la souris pas dessus (:*hover).

Il est également possible de formater l'apparence des liens en ajoutant quelques attributs supplémentaires.

font-family: verdana;        <=  police de caractères
font-size: 12px;             <=  taille de la police
font-weight: bold;           <=  texte en caractères gras
font-variant: small-caps;    <=  texte en petites capitales
background-color: #FFFFFF;   <=  couleur d'arrière-plan

 Imprimer cette page