Sommaire

Appliquer des styles CSS

1. Appliquer des styles en ligne

Dans cet exemple, nous allons appliquer des styles CSS à un élément ciblé. Les styles appliqués seront placés dans la balise d’ouverture de l’élément, dans l’attribut style.

Voici la page HTML, avec l’élément <h2> ciblé qui ne possède pas de style :

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Ma page</title> 
    </head> 
    <body> 
        <h2 id="titre2">Bibendum Vestibulum Parturient</h2> 
    </body> 
</html>

Voici l’affichage initial :

images/C05-011.png

Voici le code JavaScript utilisé :

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Ma page</title> 
    </head> 
    <body> 
        <h2 id="titre2">Bibendum Vestibulum Parturient</h2> 
        <script> 
            var monTitre2 = document.getElementById("titre2") ; 
            monTitre2.style.color = "#FF0000" ; 
       ...