Comment utiliser un fichier CSS dans HTML

Informatique et électronique

HTML et CSS sont les briques fondamentales pour la création de tout site web moderne. HTML (Hypertext Markup Language) est le langage de balisage utilisé pour définir la structure et le contenu du site web, tandis que CSS (Cascading Style Sheets) est utilisé pour définir l'apparence visuelle du site web.

Dans cet article, nous vous montrerons comment utiliser un fichier CSS en HTML pour personnaliser l'apparence de votre site web. Vous apprendrez à lier le fichier CSS à votre document HTML, à définir les règles de style dans le fichier CSS et à appliquer ces règles à vos éléments HTML.

Avant de commencer, assurez-vous d'avoir une connaissance de base d'HTML et de CSS. Si vous êtes nouveau dans ces langages, nous vous recommandons de consulter nos guides d'introduction sur HTML et CSS.

Créer un fichier CSS

Pour créer un fichier CSS, vous devez utiliser un éditeur de texte comme Notepad ou Sublime Text. Suivez ces étapes:

Ouvrez votre éditeur de texte préféré.
Créez un nouveau document vide.
Sauvegardez le document avec l'extension .css (par exemple, style.css).

Syntaxe du fichier CSS

Le fichier CSS est composé d'une série de règles qui définissent le style des éléments HTML. Chaque règle se compose de deux parties : le sélecteur et la déclaration.

Sélecteur: indique l'élément HTML auquel le style s'applique.
Déclaration: indique le style à appliquer à l'élément sélectionné. Par exemple, pour sélectionner tous les paragraphes et définir leur couleur de texte en rouge, la règle sera écrite comme suit:

p {
  color: red;
}

Dans ce cas, "p" est le sélecteur qui indique tous les paragraphes de l'HTML tandis que "color: red;" est la déclaration qui définit la couleur du texte en rouge.

Lier le fichier CSS à l'HTML

Après avoir créé le fichier CSS, vous devez le lier à votre document HTML. Il existe deux façons de le faire :

Inclusion directe: Insérez la ligne de code suivante dans la balise head de l'HTML:

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

Inclusion interne: Insérez le code CSS à l'intérieur de la balise style de l'HTML:

  <head> <style> /* insérer ici le code CSS */ </style>
  </head>

N'oubliez pas de sauvegarder à la fois le fichier HTML et le fichier CSS dans le même dossier pour vous assurer que la liaison fonctionne correctement.

Lier le fichier CSS à l'HTML

Une fois que vous avez créé votre fichier CSS, vous devez le lier à votre fichier HTML pour que le style soit appliqué au contenu de la page web.

Méthode 1 : Lien externe

La méthode la plus courante pour lier La traduction en français est la suivante tout en conservant les balises HTML :

Une façon d'ajouter un fichier CSS à votre code HTML est d'utiliser une liaison externe. Pour ce faire, insérez le code suivant dans la section <head> de votre code HTML :

<link rel="stylesheet" type="text/css" href="style.css">

Où "style.css" est le nom de votre fichier CSS. Assurez-vous de fournir le bon chemin pour votre fichier CSS s'il se trouve dans un dossier différent de celui du HTML.

Méthode 2 : Style interne

Vous pouvez également inclure le style directement dans la section <head> de votre document HTML en utilisant la balise <style>. Voici comment :

<head>
    <style type="text/css">
        /* Insérez ici vos règles CSS */
    </style>
</head>

Assurez-vous d'inclure le type de média "text/css" dans la balise <style>.

Les deux méthodes fonctionnent bien, mais l'utilisation de la liaison externe est généralement préférée car elle permet de séparer le style du contenu et facilite la gestion des fichiers.

Rédaction du code CSS

Après avoir créé le fichier CSS, vous pouvez commencer à rédiger le code. Le code CSS est composé de règles qui définissent comment les éléments HTML doivent être affichés à l'écran.

Syntaxe du code CSS

La syntaxe de base pour une règle CSS est la suivante :

Sélecteur : identifie l'élément HTML auquel la règle s'applique.
{} : délimite le bloc de déclarations de la règle.
Propriété : définit l'apparence de l'élément sélectionné.
Valeur : spécifie la valeur de la propriété.

Exemple :

sélecteur {
  propriété: valeur;
}

Par exemple, si vous souhaitez changer la couleur du texte de tous les paragraphes dans un document HTML, vous pouvez utiliser le sélecteur "p" (qui sélectionne tous les tags <p>) et la propriété "color" avec une valeur spécifique :

p {
  color: blue;
}

Dans ce cas, tous les paragraphes dans le document auront un texte de couleur bleue.

Application des règles CSS aux éléments HTML

Pour appliquer les règles CSS aux éléments HTML, vous devez lier le fichier CSS au document HTML en utilisant la balise <link> dans la section <head> du document HTML.

Exemple :

<!DOCTYPE html>
<html>
  <head> <title>Titre du document</title> <link rel="stylesheet" href="style.css">
  </head>
  <body> ...
  </body>
</html>

Dans cet exemple, le fichier CSS "style.css" est lié au document HTML en utilisant l'attribut "href".

du tag <link>. Le navigateur lira le fichier CSS et appliquera les règles définies dans le fichier à tous les éléments HTML sélectionnés par les sélecteurs définis dans les règles.

Utiliser les règles CSS pour modifier le style de l'HTML

CSS (Cascading Style Sheets) est un langage de style utilisé pour définir l'apparence et la présentation d'un document HTML. En utilisant CSS, vous pouvez modifier la couleur du texte, le type de police, la taille du texte et de nombreuses autres propriétés de style.

Pour utiliser des règles CSS dans un fichier HTML, vous devez inclure le code CSS entre les balises <style></style>. Par exemple :

<head>
  <title>Mon site web</title>
  <style> p { color: blue; font-size: 18px; }
  </style>
</head>

<body>
  <p>Ceci est un exemple de l'utilisation des règles CSS.</p>
</body>

Dans cet exemple, nous avons défini une règle CSS pour les paragraphes (<p>) dans notre document HTML. La règle spécifie que la couleur du texte doit être bleue et que la taille de police doit être de 18 pixels.

Vous pouvez également utiliser des classes et des identifiants pour appliquer des règles CSS à des parties spécifiques de votre page web. Par exemple :

<head>
  <title>Mon site web</title>
  <style> .titre { font-size: 24px; font-weight: bold; } #sous-titre { font-size: 18px; color: gray; }
  </style>
</head>

<body>
  <h1 class="titre">Bienvenue sur mon site web !</h1>
  <h2 id="sous-titre">Découvrez nos offres spéciales.</h2>
</body>

Dans cet exemple, nous avons défini une classe CSS appelée "titre" pour notre titre principal et un identifiant CSS appelé "sous-titre" pour notre sous-titre. La classe "titre" définit la taille de police à 24 pixels et le style du texte en gras, tandis que l'identifiant "sous-titre" définit la taille de police à 18 pixels et la couleur du texte en gris.

Avec l'utilisation des règles CSS, vous pouvez personnaliser l'apparence de votre page HTML facilement et rapidement. N'oubliez pas d'utiliser les bonnes pratiques pour vous assurer que votre code est propre et bien organisé.

Conclusion

CSS est un outil puissant pour personnaliser l'apparence de votre page web. En utilisant les règles CSS, vous pouvez facilement modifier la couleur du texte, la taille de police et de nombreuses autres propriétés de style. N'oubliez pas d'utiliser des classes et des identifiants pour appliquer des règles CSS à des parties spécifiques de votre page web et de suivre les bonnes pratiques pour vous assurer que votre code est propre et bien organisé.

Ruggero Lecce - Consulente senior di personal branding in Italia

Michael Anderson - Ingénieur logiciel

Je m'appelle Michael Anderson et je travaille en tant qu'ingénieur informaticien à Midland, au Texas.

Ma passion est de partager mes connaissances dans différents domaines, et mon objectif est de rendre l'éducation accessible à tous. Je pense qu'il est essentiel d'expliquer les concepts complexes de manière simple et intéressante.

Avec GlobalHowTo, je vise à motiver et enrichir les esprits de ceux qui veulent apprendre.