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
- Ouvrir notePad ++
- Dans le menu langage, sélectionner css
- Sauvegarder le fichier avec le nom suivant : test01_style.css
- Aller dans la section exercices du cours et poursuivre…
2.4 Voici quelques propriétés CSS
- background-color (couleur d’arrière-plan)
- font-family (famille de polices de caractères)
- font-style (italique)
- font-weight (épaisseur de la police)
- color (couleur de la police)
- letter-spacing (interlettrage)
- text-align (alignement du texte)
- line-height (interlignage)
- font-size (taille de la police)
- padding (marges internes de la boîte)
- width (largeur)
