Sélecteur universel

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 15 sur 76.

Le sélecteur universel est un sélecteur puissant en CSS qui cible chaque élément HTML d’une page. Il est représenté par un astérisque (*).

Lorsqu’il est utilisé, le sélecteur universel applique les styles spécifiés à tous les éléments, quels que soient leur type, leur classe ou leur ID. Les navigateurs appliquent leurs propres styles par défaut avant les vôtres (par exemple, les marges autour des titres et des paragraphes, et le remplissage des listes). Le sélecteur universel est donc utile pour définir des styles globaux ou réinitialiser ces styles par défaut du navigateur dans l’ensemble du document.

Voici la syntaxe de base pour utiliser le sélecteur universel :

* {
    property: value;
}

Par exemple, disons que vous souhaitez définir la couleur du texte et la taille de police par défaut pour tous les éléments d’une page. Vous pouvez utiliser le sélecteur universel comme ceci :

* {
    color: black;
    font-size: 14px;
}

Défi

Facile

Un document HTML contenant divers éléments vous est fourni, notamment des titres (<h1>, <h2>), des paragraphes (<p>) et une division (<div>). Votre tâche consiste à utiliser le sélecteur universel pour styliser ces éléments. Suivez les étapes ci-dessous :

Écrivez une règle CSS utilisant le sélecteur universel qui définit la couleur du texte de tous les éléments sur darkgray et la taille de police à 16 pixels.

Essayez vous-même

<html>
<head>
    <title>Universal Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>