02-Où écrire les CSS ?

2.Où écrire les CSS ?

Les règles CSS peuvent se trouver dans les emplacements suivants :

01- Les feuilles de style CSS externes regroupent des règles CSS enregistrées dans un fichier .css externe distinct (pas dans un fichier HTML). Le fichier .css est lié à une ou plusieurs pages d’un site Web à l’aide d’un lien situé dans le « head » d’un document HTML. Quand vous créez des styles dans une feuille de style externe, vous pouvez contrôler l’aspect des pages Web multiples à partir d’un même emplacement au lieu d’avoir à définir des styles pour chacune des pages. C’est la meilleure façon.

02- Les feuilles de style CSS internes (ou incorporées dans un fichier html) regroupent les règles CSS incluses dans une balise style dans le < head > (donc dans l’en-tête de votre fichier html).

03-Les styles en ligne sont définis avec des instances spécifiques de balises dans un document html. Par exemple, <strong style= »font-size:18px »> affichera <strong style= »font-size:18px »>.

2.1 Comment lier le fichier html et le fichier CSS

Il il faut d’abord ajouter une ligne de code dans votre fichier html, en incluant la balise <link /> dans l’entête du document entre les balises <head> et </head>. Dans l’exemple suivant, voici ce que nous ajoutons pour lier le fichier html et CSS :

<link rel= »stylesheet » href= « style_test1.css » />

 

Voici le code xhtml de base pour une nouvelle page :

<!DOCTYPE html>

<head>
<meta charset= »utf-8″ />
<link rel= »stylesheet » href= « style_test1.css » />
<title>titre de la page </title>
</head>

<body>
</body>

</html>

 


2.2 Explication des attributs utilisés pour la balise <link />

  • rel= »stylesheet » indique le nom de la relation à établir.
  • href= »style_web1.css » indique l’adresse relatie ou absolue du fichier css.

2.3 Création du fichier CSS

  1. Ouvrir notePad ++
  2. Dans le menu langage, sélectionner css
  3. Sauvegarder le fichier avec le nom suivant : test01_style.css
  4. Aller dans la section exercices du cours et poursuivre…

 

2.4 Voici quelques propriétés CSS

  1. background-color (couleur d’arrière-plan)
  2. font-family (famille de polices de caractères)
  3. font-style (italique)
  4. font-weight (épaisseur de la police)
  5. color (couleur de la police)
  6. letter-spacing (interlettrage)
  7. text-align (alignement du texte)
  8. line-height (interlignage)
  9. font-size (taille de la police)
  10. padding (marges internes de la boîte)
  11. width (largeur)