FriconiX
Des milliers de pictogrammes gratuits dessinés avec amour !

Cours 2.2. CSS en ligne

Syntaxe

Lorsqu'il s'agit de modifier le style d'une balise de façon ponctuelle, la syntaxe en ligne permet d'insérer le CSS directement dans l'attribut style="" de cette balise. Les propriétés de style CSS sont séparées par des points-virgules. Le schéma suivant illustre la syntaxe générale du style en ligne :

Syntaxe du style CSS en ligne

Dans cette illustration, les titres de niveau 1 et leurs déscendants seront bleus en italique.

Exemple

Le code ci-dessous présente quelques exemples de mise en forme du texte en ligne :

<span style="color:red">Un texte en rouge</span><br>
<span style="background-color:#add8e6">Un texte avec un fond bleu</span><br>
<span style="font-style: italic;">Un texte en italique</span><br>
<span style="font-weight: bold;">Un texte en gras</span><br>
<span style="font-size: 200%;">Un gros texte</span><br>
<span style="text-decoration: underline">Un texte souligné</span><br>
<span style="text-decoration: line-through;">Un texte barré</span><br>

Le code précédent affiche le rendu suivant dans le navigateur :

Style en cascade

Considérons l'exemple ci-dessous :

<div style="color:red; font-size: 200%;">
    Un gros texte rouge<br>
    <span>Encore un gros texte rouge</span>
</div>

Le code précédent affiche le rendu suivant dans le navigateur :

On constate que le style s'applique à balise dans laquelle il est défini, mais aussi à tous ses descendants. C'est de ce concept que découle la notion de feuilles de style en cascade.

Le CSS en ligne est pratique pour une modification ponctuelle, mais il alourdit fortement le contenu de la page. Il est préférable de rassembler tous les styles dans l'entête de la page ou dans un fichier externe.

Voir aussi


Dernière mise à jour : 06/11/2019