Explorer les concepts CSS

  • 4 minutes

Structure CSS

Si vous souhaitez que votre page HTML affiche en orange tout le texte entre les balises h1, vous pouvez utiliser le code CSS qui suit.

h1 {
    color: orange;
}

Le code CSS ci-dessus commence par (h1), qui sélectionne le code HTML auquel vous souhaitez appliquer un style. Le h1 dans l’exemple est appelé sélecteur.

Notez que le code à l’intérieur des accolades, color: orange;, déclare le style de la balise h1 sélectionnée. Par exemple, le code CSS dans les accolades { }, comme color: orange;, est appelé une déclaration.

Votre exemple de déclaration contient une propriété, colorqui est séparée d’une valeur, orangeavec un signe deux-points (:) et la fin du paramètre est marquée par un point-virgule (;).

Notes

Il n’est pas nécessaire de mémoriser toutes les propriétés et valeurs disponibles dans CSS. Il existe de nombreux sites Web que vous pouvez référencer. En outre, des outils tels que vscode.dev ou Visual Studio Code offrent des options de saisie semi-automatique qui peuvent vous guider lorsque vous créez un CSS.

Incorporer un fichier CSS

Un moyen rapide d’ajouter des informations de style consiste à les placer dans les balises head de votre page HTML à l’aide d’un attribut style. Cette méthode n’est pas considérée comme la meilleure pratique, mais elle peut être utilisée à des fins d’apprentissage et de test.

L’exemple suivant ajoute la balise <style> avec des informations de style qui spécifient d’afficher en gris n’importe quel h1. Étant donné qu’il s’agit du seul style appliqué, le reste du code HTML s’affiche avec le style par défaut du navigateur.

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

Lorsqu’il est affiché dans un navigateur, le texte « Welcome » dans la balise <h1> s’affiche en gris.

Capture d’écran de la page H T M L affichée affiche l’en-tête 1 en gris.

Appliquer des styles à du code HTML à l’aide de CSS

Lorsque vous ajoutez des styles à du code HTML (Hypertext Markup Language), il est préférable d’appliquer votre style dans un fichier CSS distinct. Lorsque plusieurs fichiers HTML utilisent le même CSS, ils ont une apparence cohérente. Par ailleurs, il est plus facile de mettre à jour un fichier CSS que d’avoir à mettre à jour chaque fichier HTML individuel.

Pour référencer le fichier CSS, vous utilisez l’élément link.

link a deux attributs, rel et href. rel est utilisé pour identifier le type de ressource que vous référencez, feuille de style pour les feuilles de style. href sert à identifier le chemin du fichier CSS. Si votre fichier CSS se trouvait dans le même dossier que votre fichier HTML et que le nom style.css, vous pouvez utiliser ce qui suit pour le référencer à partir de votre page :

<link rel="stylesheet" href="style.css">

Vous avez maintenant au moins deux fichiers, un .html fichier et un .css fichier. L’exemple précédent contiendrait un fichier HTML lié au fichier CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>