Médiaforma

Des styles dans un fichier externe CSS

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la rubrique précédente, vous avez vu que les styles pouvaient être définis dans une feuille de styles, à l’intérieur du document HTML, entre les balises <style> et </style>. Dans cette rubrique, je vais vous montrer comment regrouper les styles dans un fichier annexe.

A titre d’exemple, nous allons redéfinir le style de titre H2. Pour cela, nous créons un nouveau fichier dans Notepad++. Pour modifier le style h2, nous écrivons h2, suivi d’une accolade ouvrante puis d’une accolade fermante. A l’intérieur des accolades, nous définissons les propriétés à modifier :

  • la couleur du texte sera rouge ;
  • la taille des caractères est fixée à 50 pixels ;
  • les caractères seront affichés en italique.

Cette feuille de styles est sauvegardée dans le fichier styles.css.

Pour faire référence à la feuille de styles que nous venons de définir, nous utiliserons la balise <link>, en précisant que :

  • le document référencé est une feuille de styles ;
  • la feuille de styles contient du texte ;
  • le fichier à utiliser est styles.css.

Cette simple balise suffit pour donner accès à tous les styles qui ont été redéfinis dans la feuille de styles.

Le document est affiché dans Internet Explorer avec la commande Launch in IE dans le menu Exécution. Le résultat est bien conforme à ce qui était attendu : les deux balises <h2> ont les caractéristiques définies dans la feuille de styles externe.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply