Comment ajouter un fichier CSS au HTML?
HyperText Markup Language (HTML) définit les différentes parties d'une page Web. Le langage de codage CSS (Cascading Style Sheets) décrit à quoi devraient ressembler ces éléments. Un fichier CSS peut être ajouté au HTML en tant que feuille de style externe, CSS inclus dans un fichier séparé du HTML, ou une feuille de style interne, CSS inclus dans le fichier HTML. Apprenez à ajouter un fichier CSS au HTML afin de personnaliser la conception de votre site Web.
Méthode 1 sur 2: ajouter une feuille de style externe au html
- 1Créez le fichier CSS. Préparez et enregistrez votre fichier CSS avec le type de fichier ".css".
- 2Téléchargez votre fichier CSS sur votre site Web.
- 3Copiez l'URL de votre fichier CSS. L'URL peut ressembler à www.votresite.com/stylesheet.css.
- Il est bon de supprimer le nom de domaine principal du lien (URL). Par conséquent, une URL de "http://mysite.com/css/default.css" serait raccourcie en "/css/default.css". Vous devez inclure cette barre oblique ("/"). C'est ce qu'on appelle un chemin relatif.
- 4Ajoutez un lien vers le fichier. Recherchez la balise </head> dans votre fichier HTML et créez une ligne vide juste au-dessus de la balise. Ajoutez <LINK rel=stylesheet type="text/css" href=".yoursite.com/stylesheet.css"> à cette ligne vide, en remplaçant "www.your..." par le lien vers votre fichier CSS.
- 5Enregistrez votre fichier HTML et téléchargez-le sur votre site Web.
- 6Vérifiez que tout sur votre site ressemble à ce qu'il est censé ressembler. Si ce n'est pas le cas, vous devrez peut-être revenir en arrière et rechercher les corrections ou les ajustements que vous devez apporter.
Méthode 2 sur 2: ajouter une feuille de style interne au html
- 1Créez la balise <style>. Dans votre fichier HTML, recherchez la balise </head>. Ajoutez quelques lignes supplémentaires au-dessus et tapez ce qui suit:
<STYLE type="text/css"> </STYLE>
- 1Ajoutez tout votre CSS entre ces deux balises que vous venez d'ajouter.
- 2Enregistrez votre fichier HTML (au format HTML).
- 3Vérifiez que votre page Web ressemble à ce qu'elle est censée ressembler. Apportez les modifications nécessaires si ce n'est pas le cas.
- Vérifiez toujours l'apparence de votre site Web dans différents navigateurs Web et sur différents systèmes informatiques. Certains navigateurs Internet CSS un peu différemment, même entre les éditions Mac et Windows du même navigateur. Si votre site Web semble différent dans différents navigateurs, en particulier dans la façon dont certains objets tels que les listes sont espacés, le problème réside dans les paramètres par défaut du navigateur. Trouvez une feuille de style principale à ajouter au début de votre CSS pour remplacer toutes les valeurs par défaut du navigateur, afin que vos paramètres n'ajoutent rien à ce que le navigateur a déjà configuré.
- Si vous en avez la possibilité, utilisez une feuille de style externe. Cela vous permettra d'ajuster l'apparence du site en modifiant le code dans le fichier nommé, plutôt que d'avoir à modifier le CSS sur chaque page de votre site.
- Si votre site Web ne répond pas à votre CSS comme prévu, vérifiez tout votre code pour vous assurer que vous n'avez pas oublié de détails. Faites particulièrement attention aux points-virgules (";") et aux crochets fléchés fermants ("}"). Il n'est pas rare d'en manquer un dans votre CSS.
- Si vous enregistrez le fichier HTML sur votre ordinateur, vous pouvez ouvrir ce fichier dans vos navigateurs Web pour vérifier l'apparence sur votre ordinateur avant de le télécharger, mais vous aurez probablement besoin d'avoir votre CSS comme feuille de style interne dans le fichier HTML pour le apparence à charger.
- Lorsqu'une feuille de style se contredit - par exemple, si elle dit d'abord que le texte sera bleu et plus tard qu'il sera rouge - la dernière condition s'appliquera toujours. Si une commande se trouve dans une feuille de style externe et l'autre dans une feuille de style interne, c'est la feuille de style interne qui s'appliquera.
- N'utilisez pas de CSS "inline", CSS qui est inclus dans la balise HTML. (Par exemple: "align='center'" est un CSS en ligne.) C'est obsolète, une mauvaise syntaxe et difficile à ajuster lorsque vous devez mettre à jour le site Web ultérieurement.
Lisez aussi: Comment afficher la source sur Chrome?
Questions et réponses
- Comment lier CSS et HTML sur mobile?Vous liez CSS de la même manière pour tous les systèmes d'exploitation (mobile, desktop, etc.).