[Découvrir CSS]

Exercice

Soit le fichier HTML suivant.

<!DOCTYPE html>
<html lang="fr">
    <head>
      <title>PeerTube</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1>PeerTube</h1>
      <p>PeerTube est un logiciel libre d'hébergement de vidéo décentralisé créé en 2015 et soutenu par Framasoft. Il fonctionne sur le principe d'une fédération d'instances hébergées par des entités autonomes. Son objectif est de fournir une solution alternative aux plateformes centralisées telles que YouTube ou Dailymotion.</p>
      <h2>Fonctionnement</h2>
      <p>Concrètement, une instance PeerTube se présente comme un site web.</p>
      <p>Chaque instance est souvent indépendante des autres pour ce qui est de l'aspect du site, la gestion des comptes, abonnements... Elles peuvent toutefois partager les mêmes vidéos entre elles en s'accordant sur leurs conditions de diffusions, formant ainsi des fédérations.</p>
      <h2>Historique</h2>
      <p>En 2015, ne trouvant pas de plate-forme de remplacement à YouTube, Chocobozzz, alors étudiant, a développé un premier prototype de plateforme décentralisée. En 2017, il a été contacté par Framasoft qui, dans le cadre de sa feuille de route Contributopia, cherchait à développer une autre possibilité que les plateformes centralisées et l'a donc embauché.</p>
      <h2>Crédits</h2>
      <ul>
        <li>Source : <a href="https://fr.wikipedia.org/wiki/PeerTube">fr.wikipedia.org/wiki/PeerTube</a></li>
        <li>Licence : CC BY-SA</li>
      </ul>
    </body>
</html>

<!DOCTYPE html>
<html lang="fr">
    <head>
      <title>PeerTube</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1>PeerTube</h1>
      <p>PeerTube est un logiciel libre d'hébergement de vidéo décentralisé créé en 2015 et soutenu par Framasoft. Il fonctionne sur le principe d'une fédération d'instances hébergées par des entités autonomes. Son objectif est de fournir une solution alternative aux plateformes centralisées telles que YouTube ou Dailymotion.</p>
      <h2>Fonctionnement</h2>
      <p>Concrètement, une instance PeerTube se présente comme un site web.</p>
      <p>Chaque instance est souvent indépendante des autres pour ce qui est de l'aspect du site, la gestion des comptes, abonnements... Elles peuvent toutefois partager les mêmes vidéos entre elles en s'accordant sur leurs conditions de diffusions, formant ainsi des fédérations.</p>
      <h2>Historique</h2>
      <p>En 2015, ne trouvant pas de plate-forme de remplacement à YouTube, Chocobozzz, alors étudiant, a développé un premier prototype de plateforme décentralisée. En 2017, il a été contacté par Framasoft qui, dans le cadre de sa feuille de route Contributopia, cherchait à développer une autre possibilité que les plateformes centralisées et l'a donc embauché.</p>
      <h2>Crédits</h2>
      <ul>
        <li>Source : <a href="https://fr.wikipedia.org/wiki/PeerTube">fr.wikipedia.org/wiki/PeerTube</a></li>
        <li>Licence : CC BY-SA</li>
      </ul>
    </body>
</html>

Question

Associez une CSS afin de définir :

une police par défaut de type Monospace et une couleur par défaut de valeur 3b374f
pour les titres de niveau h1 et h2 une police de type Arial et la couleur 0f0058
pour les titres h1, définir une taille de 200% de la valeur standard d'un paragraphe
pour les titres h2, une taille de 150% de la valeur standard
pour les liens une couleur 5745af.

Indice

color: #3b374f

Indice

font-size: 200%

Solution

body {
  font-family: Monospace;
  color: #3b374f
}
h1, h2 {
  font-family: Arial;
  color: #0f0058;
}
h1 {
  font-size: 200%;
}
h2 {
  font-size: 150%;
}
a {
  color: #5745af;
}

body {
  font-family: Monospace;
  color: #3b374f
}

h1, h2 {
  font-family: Arial;
  color: #0f0058;
}

h1 {
  font-size: 200%;
}
h2 {
  font-size: 150%;
}

a {
  color: #5745af;
}