Exercices CSS

Vous trouverez ci-après des exercices sur le langage CSS. Les exercices balaient de nombreuses notions. La lecture de l'ensemble des chapitres vous permettra de résoudre les exercices les plus complexes. Ils ne sont pas triés par ordre de difficulté. Que la force soit avec vous !

display:

Exercice 1

Faire disparaître l'élément #hidden.

<body>
   <p>Le <strong>Moscow mule</strong> est un cocktail à base de vodka, de bière de gingembre épicée et de jus de citron vert.</p>
   <p id="hidden">Un <strong>French Connection</strong> est un cocktail composé de parts égales de cognac et d'amaretto.</p>
   <p>Le <strong>Long Island Iced Tea</strong> est un cocktail à base de tequila, de gin, de vodka, de rhum et de liqueur d'oranges.</p>
</body>

#hidden {
   display: none;
}

width: et height:

Exercice 2

Limiter la largeur du <h1> à 50 % et augmenter la hauteur à 150px.

<body>
   <h1>Préparer un cocktail</h1>
   <p>Il existe différentes façons de réaliser un cocktail : au verre à mélange, au shaker ou directement au verre.</p>
</body>
h1 {
   background: yellow;
}

h1 {
   width: 50%;
   height: 150px;
   background: yellow;
}

margin:

Exercice 3

Définir une marge externe gauche de 30px pour le h1.

<body>
   <h1>Basil Smash</h1>
   <p>Le Basil Smash est un cocktail rafraîchissant de gin, de citron, de sirop de sucre et de basilic frais.</p>
</body>
h1 {
   background: lightblue;
}

h1 {
   background: lightblue;
   margin-left: 30px;
}

Exercice 4

Utiliser le raccourci le plus minimaliste possible pour définir les marges externes de #super haut et bas à 50px et celles des côtés droit et gauche à 25px.

<body>
   <h1 id="super">B-52</h1>
   <p>Le B-52 est un cocktail composé en proportions égales de Kahlua, de Baileys et de Cointreau.</p>
</body>
#super {
   background: powderblue;
}

#super {
   background: powderblue;
   margin: 50px 25px;
}

padding:

Exercice 5

Définir une marge interne en bas de l'élément h1 de 30px.

<body>
   <h1>Basil Smash</h1>
   <p>Le Basil Smash est un cocktail rafraîchissant de gin, de citron, de sirop de sucre et de basilic frais.</p>
</body>
h1 {
   background: lightblue;
}

h1 {
   background: lightblue;
   padding-bottom: 30px;
}

Exercice 6

Déterminer une marge interne pour tous les côtés de 5px pour l'élément .mega.

<body>
   <h1 class="mega">Angel Face</h1>
   <p>L'Angel Face est un cocktail à base de gin, de calvados et de liqueur d'abricot.</p>
</body>
.mega {
   background: powderblue;
}

.mega {
   background: powderblue;
   padding: 5px;
}

border:

Exercice 7

Définir une bordure solide rouge de 5px tout autour de l'élément h1.

<body>
   <h1>Basil Smash</h1>
   <p>Le Basil Smash est un cocktail rafraîchissant de gin, de citron, de sirop de sucre et de basilic frais.</p>
</body>
h1 {
   font-size: 26px;
}

h1 {
   font-size: 26px;
   border: 5px red solid;
}

background:

Exercice 8

Définir une couleur d'arrière-plan pour l'élément <body>.

<body>
   <h1 class="mega">Angel Face</h1>
   <p>L'Angel Face est un cocktail à base de gin, de calvados et de liqueur d'abricot.</p>
</body>
body {
   font-size: 14px;
}

body {
   font-size: 14px;
   background: green;
}

color:

Exercice 9

Définir une couleur différente avec le nom de votre choix pour les deux paragraphes.

<body>
   <p class="b-52">Le B-52 est un cocktail composé en proportions égales de Kahlua, de Baileys et de Cointreau.</p>
   <p class="basil-smash">Le Basil Smash est un cocktail rafraîchissant de gin, de citron, de sirop de sucre et de basilic frais.</p>
</body>
body {
   font-size: 14px;
}

body {
   font-size: 14px;
}
p.b-52 {
   color: tomato;
}
p.basil-smash {
   color: slateblue;
}

Exercice 10

Définir une couleur différente avec un code hexadécimal pour les éléments <span> et <h1>.

<body>
   <h1>Tequila sunrise</h1>
   <p>Le <span>Tequila sunrise</span> est un cocktail à base de tequila, de jus d'orange, et de grenadine.</p>
</body>
body {
   font-size: 14px;
}

body {
   font-size: 14px;
}
h1 {
   color: #DC143C;
}
span {
   color: #0000FF;
}

text-align:

Exercice 11

Centrer horizontalement les paragraphes à l'intérieur du premier élément <div>.

<body>
   <div class="super1">
      <p>Le Moscow mule est un cocktail à base de vodka, de bière de gingembre épicée et de jus de citron vert, accompagné d'une rondelle de citron.</p>
      <p>Le Long Island Iced Tea est un cocktail à base de tequila, de gin, de vodka, de rhum et de liqueur d'oranges.</p>
   </div>
   <div class="super2">
      <p>Un French Connection est un cocktail composé de parts égales de cognac et d'amaretto.</p>
      <p>Le Tequila sunrise est un cocktail à base de tequila, de jus d'orange, et de grenadine.</p>
   </div>
</body>
body {
   font-size: 14px;
}

body {
   font-size: 14px;
}
.super1 p {
   text-align: center;
}

text-transform:

Exercice 12

Transformer les titres en majuscules.

<body>
   <h1>Titre 1</h1>
   <h2>Titre 2</h2>
   <h3>Titre 3</h3>
</body>
body {
   font-size: 14px;
}

body {
   font-size: 14px;
}
h1, h2, h3 {
   text-transform: uppercase;
}

text-decoration:

Exercice 13

Supprimer le souligné des liens et barrer les éléments <span>.

<body>
   <p>Le <a href="https://fr.wikipedia.org/wiki/Mule_de_Moscou">Moscow mule</a> est un cocktail à base de <span>vodka</span>, de <span>bière</span> de gingembre épicée et de jus de citron vert, accompagné d'une rondelle de citron.</p>
   <p>Le <a href="https://fr.wikipedia.org/wiki/Long_Island_Iced_Tea">Long Island Iced Tea</a> est un cocktail à base de <span>tequila</span>, de <span>gin</span>, de <span>vodka</span>, de <span>rhum</span> et de <span>liqueur d'oranges</span>.</p>
</body>
body {
   font-size: 14px;
}

body {
   font-size: 14px;
}
a {
   text-decoration: none;
}
span {
   text-decoration: line-through;
}