web.snt.nsi.xyz

10 énigmes à résoudre pour découvrir le web

Énigme 4

Trouver une propriété associé à une classe dans une feuille de style

Dans la feuille de style de ce site, il y a des classes CSS qui définissent des propriétés. Vous devez localiser la feuille de style, lire son contenu, trouver une classe CSS et une propriété CSS.

Sélecteurs CSS

Les sélecteurs CSS sont des motifs qui permettent d'identifier les éléments HTML auxquels vous souhaitez appliquer des styles. Par exemple, le sélecteur p cible tous les éléments de paragraphe (balise <p>) sur la page, tandis que le sélecteur h1 cible tous les titres de niveau 1 (balise <h1>). Les sélecteurs peuvent être basés sur les balises HTML, les identifiants, les classes, les attributs, etc.

Classes CSS

Une classe CSS est un moyen de définir un groupe d'éléments HTML qui partagent des styles similaires. Vous attribuez une classe à un élément en utilisant l'attribut class dans la balise HTML, par exemple : <div class="maClasse">. Ensuite, vous pouvez créer des règles de style CSS en utilisant le sélecteur de classe, qui commence par un point, par exemple .maClasse { propriété: valeur; }. Cela permet de styliser tous les éléments ayant la classe maClasse de la même manière.

Les propriétés CSS

.content {
    margin: 0 auto;
    padding: 0 2em;
    max-width: 800px;
    margin-bottom: 50px;
    line-height: 1.6em;
}

La classe css .content définie ci-dessus déclare 5 propriétés auxquelles elle attribue des valeurs selon le schéma suivant :
.content { propriété: valeur; }

Trouver une propriété associé à une classe dans une feuille de style

Dans la feuille de style de ce site, il y a des classes CSS qui définissent des propriétés. Vous devez localiser la feuille de style, lire son contenu, trouver la classe CSS .header et une propriété CSS qu'elle définit. Vous disposez bien évidemment, comme pour chaque énigme, d'un nombre de tentatives non limité. Si la propriété ne fonctionne pas, testez-en une autre. 😉