Utilisation du CSS
Il existe 3 façons d'ajouter des styles CSS au document HTML.
- Style en ligne - en attribuant un attribut
styleaux éléments HTML - Style interne - en utilisant l'élément
<style>dans la section<head> - Style externe - en créant un fichier CSS externe
Style en ligne
Pour définir des règles de style, vous pouvez utiliser l'attribut style de n'importe quel élément HTML. Vous ne pouvez appliquer ces règles qu'à cet élément. L'attribut style peut contenir n'importe quelle propriété CSS.
Exemple de création d'un style en ligne pour un document HTML :
Exemple de style en ligne CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 style="color:#1c87c9">Some heading</h2>
<p style="color:#8ebf42; font-size:15px">Some paragraph</p>
</body>
</html>Résultat
Expliquons maintenant l'exemple ci-dessus où nous avons utilisé le style en ligne. À l'intérieur de la balise <h2>, nous avons écrit style="color: #1c87c9", ce qui signifie que notre titre (en-tête) doit être de couleur #1c87c9.
Nous avons fait de même avec la balise <p>. Nous avons écrit color: #8ebf42; font-size: 15px à l'intérieur de notre balise, ce qui signifie que les informations entre la balise ouverte <p> et la balise fermée </p> seront de couleur #8ebf42, et la taille du texte sera de 15px.
Style interne
Avec le style interne, chaque fichier HTML contient le code CSS nécessaire pour styliser une page. Vous placez simplement le code CSS entre les balises <head> et </head> de chaque fichier HTML que vous souhaitez styliser. L'exemple ci-dessous illustre cela.
Les modifications que vous apportez n'affecteront qu'une seule page. Si vous devez styliser plusieurs pages, vous devrez les modifier une par une.
L'exemple ci-dessous montre que le paragraphe sera en blanc, et la page sera de couleur #1c87c9.
Exemple de création d'un style interne pour un document HTML :
Exemple de style interne CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
p {
color: white;
}
</style>
</head>
<body>
<p>Some information</p>
</body>
</html>Style externe
Le style externe est largement utilisé pour appliquer des styles généraux à l'ensemble du site web. Il consiste à créer un fichier CSS externe qui contient toutes les informations de style. Vous pouvez créer ce type de fichier avec n'importe quel éditeur de texte ou éditeur HTML tel que "Bloc-notes" ou "Sublime Text".
Un fichier CSS ne contient que du CSS, et vous le sauvegardez simplement avec l'extension de fichier .css. Pour lier une feuille de style externe à une page web, vous devez utiliser la balise <link> à l'intérieur de la section <head> du document HTML. Chaque page web doit être liée à la feuille de style.
Lors de l'utilisation d'une feuille de style externe, tous les fichiers HTML sont liés à un seul fichier CSS, ce qui garantit une apparence et une expérience cohérentes. Si vous souhaitez modifier le style des pages web, vous n'avez besoin de faire les modifications correspondantes que dans un seul fichier .css.
Exemple de création d'un style externe pour un document HTML :
Exemple de style externe CSS
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>Pratique
Quelles sont les façons d'inclure du CSS dans HTML ?