CSS Externe (External CSS)

Introduction

Le CSS externe consiste à stocker les styles dans un fichier CSS séparé, puis à lier ce fichier à votre document HTML. Cette approche favorise la séparation des préoccupations et la réutilisation des styles sur plusieurs pages.

Création d'un Fichier CSS Externe

Créez un fichier nommé styles.css et ajoutez vos styles à l'intérieur :


            /* styles.css */

            body {
                font-family: Arial, sans-serif;
                margin: 20px;
            }

            h2 {
                color: #d73a49;
            }

            p {
                color: #555;
            }

            /* Ajoutez d'autres styles au besoin */

Liage du Fichier CSS Externe

Dans le fichier HTML, utilisez la balise <link> pour lier le fichier CSS externe :


            <head>
                <link rel="stylesheet" href="styles.css">
            </head>

Propriétés CSS Courantes

Voici quelques propriétés CSS couramment utilisées dans un fichier externe :

Font-family : Définit la famille de polices.
Color : Définit la couleur du texte.
Background-color : Définit la couleur de fond.
Margin : Définit la marge autour d'un élément.
Padding : Définit l'espace à l'intérieur d'un élément.
Border : Définit la bordure d'un élément.

Exemple d'Exercice

Exercice : Styliser une Section

Ajoutez une classe "section" à une section de votre choix et utilisez le fichier CSS externe pour lui appliquer un fond gris foncé et une marge intérieure de 15 pixels :

    
                <section class="section">
                    <p>Contenu de la section</p>
                </section>

Correction :

        
                    /* styles.css */

                    .section {
                        background-color: #333;
                        padding: 15px;
                    }

Avantages et Inconvénients

Avantages :

Promeut une meilleure organisation du code.
Facilite la réutilisation des styles sur plusieurs pages.
Permet la collaboration entre les développeurs front-end et les designers.

Inconvénients :

Peut entraîner un temps de chargement initial plus long pour la première visite d'une page.
Nécessite une connexion réseau pour charger le fichier CSS externe.

Conclusion

Utiliser un fichier CSS externe est une pratique recommandée pour des projets web de taille significative, favorisant la maintenance, la collaboration, et la cohérence dans le design de vos pages.

Proposition d'un Examen avec Correction

Quelle balise est utilisée pour lier un fichier CSS externe dans un document HTML?
- A. <style>
- B. <script>
- C. <link>
Correction : C

CSS Externe (External CSS)

Le CSS externe, également connu sous le nom de feuille de style externe, est un fichier CSS qui est séparé du code HTML. Il permet de centraliser le style de votre page Web et de faciliter la maintenance.

Syntaxe

Pour utiliser un CSS externe, vous devez créer un fichier CSS avec l'extension .css. Le contenu du fichier CSS est constitué de règles CSS qui définissent le style de votre page Web.

/* Fichier CSS externe */

body {
  background-color: #ffffff;
  font-family: sans-serif;
  font-size: 16px;
}

h1 {
  font-size: 24px;
  color: #000000;
}

p {
  margin-bottom: 16px;
}

Pour lier le fichier CSS externe à votre code HTML, vous devez utiliser l'attribut href de la balise link.

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Exemple de CSS externe</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Titre</h1>
  <p>Ce texte est stylé par le CSS externe.</p>
</body>
</html>

Exemple

Voici un exemple d'utilisation d'un CSS externe pour styliser une page Web :

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Exemple de CSS externe</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Titre</h1>
  <p>Ce texte est stylé par le CSS externe.</p>
</body>
</html>

/* Fichier CSS externe */

body {
  background-color: #ffffff;
  font-family: sans-serif;
  font-size: 16px;
}

h1 {
  font-size: 24px;
  color: #000000;
}

p {
  margin-bottom: 16px;
}

Dans cet exemple, le fichier CSS externe définit les styles suivants :

Le fond de la page est blanc.
La police par défaut est sans-serif.
La taille de la police par défaut est de 16 pixels.
Le titre est de taille 24 pixels et de couleur noire.
Les paragraphes ont un espacement de 16 pixels en bas.

Avantages de l'utilisation du CSS externe

L'utilisation du CSS externe présente plusieurs avantages :

Centralisation du style : le style de votre page Web est centralisé dans un seul fichier, ce qui facilite la maintenance.
Amélioration de la performance : le navigateur n'a pas à charger le style à chaque fois qu'il charge une page, ce qui peut améliorer les performances.
Contrôle plus granulaire : vous pouvez appliquer des styles différents à différentes parties de votre page Web en utilisant des sélecteurs CSS.

Remarques

Le fichier CSS externe doit être situé dans le même répertoire que le fichier HTML.
Vous pouvez utiliser plusieurs fichiers CSS externes.
Vous pouvez utiliser le CSS externe pour styliser des éléments HTML qui ne sont pas inclus dans le fichier HTML.