Exemples Exercices CSS Tic

Exemples et Exercices avec solutions en CSS
Dans les exercices 1- 4, vous allez comprendre comment sélectionner les

parties dans le document HTML à introduire un style, C’est ce qu’on appelle
les sélecteurs,
Il existe plusieurs types de sélecteurs (Voir les exemples)
Les exercices 5,6,7 et 8 concernent les différentes méthodes d’introduire les

feuilles de styles dans le document HTML,
EXERCICES CSS
1- Sélecteur d’élément, dans ce sélecteur: Le sélecteur d'élément sélectionne les éléments

HTML en fonction du nom de l'élément
Exemple
p{
text-align: center; Ici, tous les éléments <p> de la page seront alignés au
color: red; centre, avec une couleur de texte rouge:
}
Exemple: Sélecteur d’élément
EXERCICES CSS
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red; Every paragraph will be affected by the style.
} Me too!
</style> And me!
</head>
<body>
<p>Every paragraph will be affected by the

style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
EXERCICES CSS
2- Sélecteur id: Le « id » sélecteur identifie un seul élément, il faut mettre le caractère

« # » avant l’élément à identifier.
Exemple
Le CSS ci-dessous sera appliquée à l'élément HTML avec id = "para1":
#para1 {
text-align: center;
color: red;
}
Exemple: Sélecteur id EXERCICES CSS
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>
</body>
</html>
EXERCICES CSS
3- Sélecteur par classe: Le sélecteur de classe sélectionne les éléments HTML avec un
attribut de classe spécifique. Pour sélectionner des éléments avec une classe spécifique, il
faut mettre un point (.), Suivi du nom de la classe.
Exemple.
Dans cet exemple, tous les éléments HTML avec class = "center" seront rouges et alignés au centre:
.center {
text-align: center;
color: red;
}
EXERCICES CSS
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red; Red and center-aligned heading
} Red and center-aligned paragraph.
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
EXERCICES CSS
Exercice 1
Mettre la couleur de tous les éléments <p> en « rouge".
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
EXERCICES CSS
Exercice 2
Mettre la couleur de l’élément identifié par id="para1", en “rouge".

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<p id="para1">This is a paragraph.</p>
</body>
</html>
EXERCICES CSS
Exercice 3
Mettre la couleur de l’élément identifié par class "colortext", en “rouge".
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<p class="colortext">This is another paragraph.</p>
<p class="colortext">This is also a paragraph.</p>
</body>
</html>
Exercice 4 EXERCICES CSS
Mettre la couleur des éléments <p> et <h1> en rouge, grouper les sélecteurs pour
minimiser le code
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a smaller heading</h2>
</body>
</html>
SOLUTIONS EXERCICES CSS
Exercice 5
Ajouter une feuille de style externe en utilisant URL: "mystyle.css".
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Exercice 6
A l'aide d'une feuille de style interne, donnez la couleur à l’arrière-plan "background-
color: lin" pour la page
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Exercice 7
Définissez "background-color: lin" pour la page, en utilisant un style en ligne.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Exercice 8
Supprimez tous les styles, à l'exception de la feuille de style externe "mystyle.css".
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
p{
color: red;
}
</style>
</head>
<body style="background-color: lightcyan">
</body>
</html>
Solution Exercice 1
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
}
</style>
</head>
<body>
</body>
</html>
Solution Exercice 2
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
color: red;
}
</style>
</head>
<body>
<p id="para1">This is a paragraph.</p>
</body>
</html>
Solution Exercice 3
<!DOCTYPE html>
<html>
<head>
<style>
.colortext {
color: red;
}
</style>
</head>
<body>
<p class="colortext">This is another paragraph.</p>
<p class="colortext">This is also a paragraph.</p>
</body>
</html>
Solution Exercice 4
<!DOCTYPE html>
<html>
<head>
<style>
h1, p {
color: red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a smaller heading</h2>
</body>
</html>
Solution Exercice 5
Ajouter une feuille de style externe en utilisant URL: "mystyle.css".
!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
</body>
</html>
Solution Exercice 6
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
</style>
</head>
<body>
</body>
</html>
Solution Exercice 7
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color: linen">
</body>
</html>
Exercice 8
Supprimez tous les styles, à l'exception de la feuille de style externe "mystyle.css".
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
p{
color: red;
}
</style>
</head>
<body style="background-color: lightcyan">
</body>
</html>
Exercice 8 Solution
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
</body>
</html>

Exemples Exercices CSS Tic

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Exemples Exercices CSS Tic

Transféré par

Droits d'auteur :

Formats disponibles

Exemples et Exercices avec solutions en CSS

Dans les exercices 1- 4, vous allez comprendre comment sélectionner les

Les exercices 5,6,7 et 8 concernent les différentes méthodes d’introduire les

1- Sélecteur d’élément, dans ce sélecteur: Le sélecteur d'élément sélectionne les éléments

<p>Every paragraph will be affected by the

2- Sélecteur id: Le « id » sélecteur identifie un seul élément, il faut mettre le caractère

Le CSS ci-dessous sera appliquée à l'élément HTML avec id = "para1":

<p id="para1">Hello World!</p>

<h1 class="center">Red and center-aligned heading</h1>

Mettre la couleur de l’élément identifié par id="para1", en “rouge".

Définissez "background-color: lin" pour la page, en utilisant un style en ligne.

Vous aimerez peut-être aussi