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 :

Dans cette illustration, les titres de niveau 1 et leurs descendants 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'en-tête de la page ou dans un fichier externe.

Exercice

Ajoutez des styles CSS en ligne pour créer un tableau arc-en-ciel :

<table>
    <tr><td>Purple (#8F00FF)</td></tr>
    <tr><td>Blue (#0000FF)</td></tr>
    <tr><td>Green (#00FF00)</td></tr>
    <tr><td>Yellow (#FFFF00)</td></tr>
    <tr><td>Orange (#FF7F00)</td></tr>
    <tr><td>Red (#FF0000)</td></tr>
</table>

Voici le résultat escompté:

Quiz

<h1 style="color:red;">Titre</h1> est un style ...

---

Pourquoi les feuilles de style sont dites en cascade ?

---

À quoi sert l'attribut CSS background-color ?

---

En CSS, comment mettre un texte en gras ?

---

Voir aussi

• Cours développement web
• Cours 1.1. Histoire d'Internet
• Cours 1.2. Introduction au HTML
• Cours 1.3. Les caractères spéciaux en HTML
• Cours 1.4. Les commentaires en HTML
• Cours 1.5. Structure globale d'une page HTML
• Cours 1.6. Les liens hypertextes en HTML
• Cours 1.7. L'attribut id en HTML
• Cours 1.8. Les ancres en HTML
• Cours 1.9. Les images dans les pages HTML
• Cours 1.10. Les tableaux en HTML
• Cours 1.11. Les balises HTML les plus utilisées
• Cours 1.12. Quelques recommandations
• Cours 1.13. Ressources
• Cours 2.1. Introduction au CSS
• Cours 2.3. CSS dans l'en-tête de la page
• Cours 2.4. CSS dans un fichier externe
• Cours 2.5. Les sélecteurs en CSS
• Cours 2.6. Les couleurs en CSS
• Cours 2.7. Les marges en CSS
• Cours 2.8. Les unités en CSS
• Cours 2.9. Les propriétés CSS les plus utilisées
• Cours 3.1. Histoire du JavaScript
• Cours 3.2. Hello World en JavaScript
• Cours 3.3. Console.log
• Cours 3.4. Les commentaires en JavaScript
• Cours 3.5. Les variables en JavaScript
• Cours 3.6. Les événements en JavaScript
• Cours 3.7. Document Object Model (DOM)
• Cours 3.8. Modifier le HTML
• Cours 3.9. Les frameworks JavaScript
• Cours 4.1. Introduction au PHP
• Cours 4.2. Les balises PHP
• Cours 4.3. Les variables en PHP
• Cours 4.4. isset vs empty vs is_null
• Cours 4.5. Les opérateurs en PHP
• Cours 4.6. Les guillemets en PHP
• Cours 4.7. Les tests en PHP, l'instruction if...else
• Cours 4.8. Les tableaux en PHP
• Cours 4.9. Les boucles en PHP
• Cours 4.10. Les sessions en PHP
• Cours 5.1. Les formumlaires HTML
• Cours 5.2. Les formulaires : POST ou GET
• Cours 5.3. Le champ <input>
• Cours 5.4. Les différents champs des formulaires HTML
• Cours 6.1. Introduction à MySQL
• Cours 6.2. phpMyAdmin
• Cours 6.3. Requêtes SQL les plus utilisées
• Cours 6.4. Connexion MySQL en PHP
• Cours 6.5. Les requêtes MySQL en PHP
• Cours 6.6. Lire des données MySQL en PHP
• Cours 6.7. Récupérer le dernier identifiant MySQL

---