Changer la couleur avec des sélecteurs CSS
- Fiche de cours
- Quiz
- Profs en ligne
- Videos
- Application mobile
- Savoir changer la couleur d’un texte dans une page HTML.
- Savoir changer la couleur de fond d’une page HTML.
À l’aide de sélecteurs appropriés, il est possible de modifier la couleur du texte et du fond de la page web et de visualiser ces modifications à l’aide d’un navigateur.
- Introduction au CSS
- Connaitre le langage HTML
- Savoir utiliser un navigateur pour visualiser une page web
Pour changer la couleur d’un titre, il faut suivre les étapes suivantes :
-
Délimiter la partie CSS :
ajouter les balises <style> et </style> dans la partie HEAD du code HTML. -
Définir la partie de la page à mettre
en forme :
ajouter une règle de style composée d’un sélecteur (syntaxe particulière du langage CSS) qui indique la zone concernée. -
Déclarer les propriétés et les
valeurs qui permettent de définir le style
voulu :
insérer le code correspondant au sélecteur CSS entre accolades {}.
On souhaite changer la couleur du titre « Codons en HTML » en vert dans la page web suivante.
- Ajouter les balises <style> et
</style>
dans la partie HEAD du code HTML.
<html>
<head>
<title>Découvrons les bases de CSS</title>
…
<style>
</style>
…
</head>
<body> - Ajouter une règle de style composée
d’un sélecteur.
« Codons en HTML » se trouve entre les balises <h2> et </h2>, on applique donc la règle de style à ces balises :
<h2>Codons en HTML</h2> - Insérer le code correspondant au
sélecteur CSS entre
accolades { et }.
On veut changer la couleur du titre « Codons en HTML » : il faut donc ajouter la propriété color, qui contient les paramètres et les valeurs du style recherché, de la manière suivante :
… {
color: rgb(1, 230, 18);
}
La couleur verte du titre « Codons en HTML » est due au code rgb(1, 230, 18), qui s’applique bien à tout ce qui est compris entre les balises <h2> et </h2>.
Pour changer la couleur du fond d’une page web, il faut changer de sélecteur CSS en prenant la propriété suivante :
background-color: rgb(xx, xx, xx)
Ce sélecteur est placé à la suite de l’autre sélecteur CSS, à savoir rgb. Il s’appliquera à l’ensemble du BODY.
On a modifié le fond de la page web en bleu ciel.
La couleur bleu ciel de la page web est due au code rgb(97, 250, 255).
Comment as-tu trouvé ce cours ?
Évalue ce cours !
Vous avez obtenu75%de bonnes réponses !
Recevez l'intégralité des bonnes réponses ainsi que les rappels de cours associés :
Fiches de cours les plus recherchées
SNT
L'URL
SNT
La requête HTTP
SNT
Le modèle client/serveur
SNT
Télécharger une page web sur un serveur
SNT
L'usage des réseaux sociaux
SNT
Violence et protection sur les réseaux sociaux
SNT
Principe et économie des réseaux sociaux
SNT
La modélisation des réseaux sociaux
SNT
Les caractéristiques des données structurées
SNT
Principaux formats et stockage des données structurées
Fermer
Accédez gratuitement à
