Le Style de la page
Première étape : Associer un fichier CSS
Nous allons maintenant créer un fichier de style.
Copier le fichier « style.css » dans « mes documents » de votre « espace personnel ».
Ouvrir la page que vous avez créer dans Chrome puis avec l’éditeur de texte.
Dans l’en-tête (entre les balises< head> et </head>), ajouter la ligne : <link rel="stylesheet" href="style.css"> Enregistrer et recharger la page dans Chrome. Que se passe-t-il?
Dans l’éditeur de texte, ouvrir le fichier « style.css » : son but est d’adapter l’aspect de la page, son style, à l’aide de « feuilles de style en cascade » (cascading style sheets ou CSS). Chaque balise HTML peut ainsi être paramétrée. Tester différents styles à l’aide des exemples du tableau ci-dessous. À chaque changement, enregistrer le fichier « style.css », puis recharger votre page dans Chrome.
|
Paramètre |
Valeurs possibles |
|
font-family |
sans-serif, serif, monospace, Arial, Helvetica, Times... |
|
font-style |
normal, italic |
|
font-weight |
normal, bbold |
|
font-size |
taille de référence : 1em, correspondant à 16 pixels |
|
text-align |
left, right, center, justify |
|
color |
Raccourcis: red, blue, yellow, green, white, black, silver ou codage RVB (exemple: #ff00ff) |
|
background-color |
Deuxième étape : Structurer la page avec <div> et les classes CCS
La balise <div> est particulière : elle permet de créer des zones différentes dans la page. Les< div> peuvent être imbriquées les unes dans les autres, et différenciées, de sorte que chacune ait un style CSS propre.
1. Ouvrir le fichier "orientation.html" dans Notepad++, et ajouter les balises <div class="page"> et </div> de sorte qu’elles englobent tout le contenu de la page (voir ci-dessous).
<body>
<div class="page">
<h2>Les fiches métiers</h2>
……..
……..
</div>
</body>
2. Dans le fichier « style.css », ajouter les lignes ci-dessous.
div.page {
width: 500px;
margin-left: auto;
margin-right: auto;
background-color: darkorange
}
Sauvegarder les deux fichiers, ouvrir « orientation.html » dans Chrome : quels changements ont eu lieu ?
3. Dans « orientation.html », créer la <div> suivante :
<div class="liens_externes"> contenant la partie « Ecoles préparant au BTS OL » avec tous ses liens
Créer alors les styles CSS correspondants dans « style.css ». Des aides sont disponibles ci-dessous.
|
Paramètre |
Exemples de valeurs possibles |
|
margin-top |
10px, 1em. . . |
|
margin-bottom |
|
|
margin-left |
10px, 0px, auto |
|
margin-right |
|
|
border-width |
1px, 2px, none |
|
border-color |
voir tableau précédent |
|
border-style |
solid, dotted, dashed, double, groove. . . |
Pour la prochaine séance
Reprendre votre fichier HTML et le fichier « style.css » que vous avez modifié.
Modifier le nom de celui-ci : il doit porter le même nom que le fichier HTML.
Exemple : « orientation.html » et « orientation.css ».
Dans votre fichier HTML, modifier la ligne <link> de l’en-tête en remplaçant style.css par le nom de votre fichier CSS.
Finaliser l’habillage CSS de votre page, et enregistrer les 2 fichiers sur une clé USB ainsi que les fichiers images dont vous pourriez avoir besoin.