Comment insérer un fichier CSS dans HTML

Auteur: Eric Farmer
Date De Création: 3 Mars 2021
Date De Mise À Jour: 1 Juillet 2024
Anonim
Basic Inline Styling | CSS | Tutorial 2
Vidéo: Basic Inline Styling | CSS | Tutorial 2

Contenu

Hypertext Markup Language (HTML) détermine quels éléments sont présents sur une page Web. Le langage de programmation CSS (Cascading Style Sheets) décrit l'apparence de ces éléments.Le fichier CSS peut être ajouté au HTML en tant que feuille de style externe (CSS est ajouté en tant que fichier séparé) ou interne (CSS est inclus dans le fichier HTML). Apprenez à intégrer du CSS dans un fichier HTML pour repenser votre site.

Pas

Méthode 1 sur 2: Comment configurer une feuille de style externe

  1. 1 Créez un fichier CSS. Préparez et enregistrez un fichier CSS avec une extension ".css".
  2. 2 Téléchargez le fichier CSS sur votre site.
  3. 3 Copiez l'adresse (URL) du fichier CSS. L'adresse du site ressemblera à ceci : www.votresite.com/stylesheet.css.
    • Il est recommandé de supprimer le nom de domaine principal de l'URL. Sur cette base, l'adresse http://myisite.com/css/default.css sera raccourcie en "/css/default.css". N'oubliez pas d'inclure la barre oblique ("/"). C'est ce qu'on appelle un chemin relatif.
  4. 4 Insérez le lien dans le fichier. Recherchez la balise /head> dans votre fichier HTML et créez une ligne vide juste au-dessus. Collez dans cette ligne LINK rel = stylesheet type = "text / css" href = "www.your_site.com / stylesheet.css">, en remplaçant "www.your ..." par un lien dans le fichier CSS.
  5. 5 Enregistrez le fichier HTML et téléchargez-le sur le site.
  6. 6 Assurez-vous que tout sur le site ressemble à ce qu'il devrait. Sinon, rouvrez le fichier HTML, recherchez les erreurs et apportez des modifications.

Méthode 2 sur 2: Comment insérer une feuille de style interne

  1. 1 Créer un style d'étiquette>. Ouvrez le fichier HTML et recherchez la balise /head>. Ajoutez quelques lignes vides au-dessus et entrez ce qui suit :

STYLE type = "texte / css"> / STYLE>

  1. 1 Collez tous vos CSS entre ces deux étiquettes.
  2. 2 Enregistrez le fichier HTML (avec l'extension .html).
  3. 3 Assurez-vous que tout sur le site ressemble à ce qu'il devrait. Sinon, apportez les modifications souhaitées.

Conseils

  • Vérifiez toujours l'apparence du site dans différents navigateurs et sur différents systèmes d'exploitation. Certains navigateurs se connectent à CSS de manières légèrement différentes. Cela peut même se produire dans le même navigateur, mais sur des versions différentes de Mac et Windows. Si votre site semble différent dans un autre navigateur (par exemple, l'espacement entre certains objets, tels que les listes, est d'une taille différente), le problème vient des paramètres de ce navigateur. Recherchez la feuille de style principale et collez-la en haut du fichier CSS pour modifier les paramètres par défaut du navigateur. Ceci est fait pour que vos paramètres ne changent rien dans le navigateur lui-même.
  • Insérez une feuille de style externe si vous le pouvez. Cela vous permettra de changer l'apparence du site en modifiant le code dans le fichier source. De cette façon, vous n'avez pas à modifier le CSS sur chaque page de votre site.
  • Si votre site ne répond pas au CSS comme prévu, vérifiez l'encodage complet pour vous assurer qu'il est correctement orthographié. En particulier, portez une attention particulière aux points-virgules (";") et aux crochets fermants ("}"). Il est assez facile d'omettre l'un de ces caractères dans un fichier CSS.
  • Enregistrez le fichier HTML sur votre ordinateur afin de pouvoir l'ouvrir ultérieurement dans divers navigateurs Web et vérifiez son apparence avant de le télécharger davantage. Mais pour le charger, le fichier CSS doit être inséré dans le HTML en tant que feuille de style externe.
  • Si la feuille de style se contredit - par exemple, elle dit d'abord que le texte sera bleu puis qu'il sera rouge - la dernière condition sera toujours remplie. Si une commande est une feuille de style externe et l'autre est une feuille de style interne, la feuille de style interne sera active.

Avertissements

  • N'utilisez pas de CSS intermédiaire "ouvert", c'est-à-dire le CSS inclus dans la balise HTML. (Exemple : "align = 'center'" est un paramètre CSS ouvert). Il s'agit d'une option obsolète avec une mauvaise syntaxe. Si après un certain temps vous devez mettre à jour le site, ce paramètre sera difficile à modifier.