Appliquer des styles aux éléments HTML : trois approches possibles

Pour modifier l'apparence des éléments dans une page web, notamment la couleur ou la taille du texte, plusieurs techniques permettent d'appliquer des règles CSS. Voici les trois principales méthodes utilisées en développement web.

1. Inclusion externe via un fichier CSS séparé

Cette méthode consiste à créer un fichier dédié (par exemple styles.css) contenant toutes les règles de mise en forme, puis à le relier au document HTML à l’aide de la balise <link>.

Exemple de structure HTML :

<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Stylage avec CSS externe</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>Paragraphe mis en forme depuis un fichier externe.</p>
    <h1>Titre principal</h1>
</body>
</html>

Contenu du fichier styles.css :

p {
    color: red;
    font-size: 48px;
}

h1 {
    color: green;
}

Cette approche favorise la réutilisabilité et la maintenance du code, en séparant clairement le contenu (HTML) de la présentation (CSS).

2. Style interne avec la balise <style>

Il est possible d’écrire directement les règles CSS à l’intérieur de l’en-tête (<head>) du document HTML, grâce à l’élément <style>.

<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Feuille de style interne</title>
    <style>
        p {
            color: red;
        }
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <p>Texte rouge appliqué par style interne.</p>
    <h1>Titre en vert</h1>
</body>
</html>

Utilisable pour des pages isolées, cette technique devient moins pratiqeu sur un site composé de multiples pages.

3. Style en ligne (inline) directement dans la balise

La méthode la plus simple, mais aussi la moins recommandée pour des projets importants, consiste à intégrer les propriétés CSS directement dans l’atttribut style d’un élément.

<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Style en ligne</title>
</head>
<body>
    <p style="color: blue;">Ce paragraphe est bleu grâce au style inline.</p>
</body>
</html>

Bien que rapide à mettre en œuvre, cette méthode mélange structure et présentation, ce qui nuit à la lisibilité et à la gestion future du code.

Sélecteurs CSS fondamentaux

Sélecteur d’élément (balise)

Permet d’appliquer un style à tous les éléments correspondant à une balise donnée.

p {
    color: red;
    font-size: 48px;
}

h1 {
    color: green;
}

Sélecteur d’identifiant (ID)

Un identifiant est unique dans une page. Il permet de cibler précisément un seul élément via l’attribut id et le préfixe # en CSS.

#titre-special {
    color: purple;
    text-decoration: underline;
}

Dans le HTML :

<h1 id="titre-special">Ce titre est spécial</h1>

Le sélecteur par ID offre une grande précision, mais doit être utilisé avec parcimonie afin de maintenir une architecture CSS propre.