LA FEUILLE DE STYLE


La feuille de style vous permet de définir sur une seule page, la mise en forme de votre site. D'une part, vos pages sont allégées et d'autre part, ce système vous permet de changer votre décor en un rien de temps puisque vous n'aurez qu'à remplacer vos images et changer les données de cette feuille de style.

Ouvrez une page vierge sur votre bloc notes.

Recopiez ce code et collez-le sur votre page :

body { color:#d72b45; margin:15px; scrollbar-base-color:#eef1d9; font-size:8pt; font-family:Verdana; }
a { color:#849640; text-decoration:none; }
a:hover { color:#eef1d9; text-decoration:none; }
td { font-size:8pt; font-family:Verdana; }
h1 { font-family:verdana; font-size:8pt; font-weight:bold; color:#849640; }
p { font-family:verdana; font-size:8pt; color:#d72b45; margin-left:0px; margin-right:0px; }

• 1ère ligne :

body indique que les données concernent le corps des pages de votre site. Nous ouvrons une accolade pour y mettre nos données, celles-ci sont séparées par des ";" et nous refermons l'accolade pour passer à la suite.

color:#d72b45 correspond à la couleur du texte
margin:15px laisse une marge de 15 pixels
scrollbar-base-color:#eef1d9 indique la couleur de base de la barre de défilement
font-size:8pt correspond à la taille du texte
font-family:Verdana correspond à la police choisie

• 2ème ligne :

a indique que les données concernent les liens qui figurent sur votre site. Même démarche pour la ponctuation.

color:#849640 indique la couleur des liens
text-decoration:none empêche le soulignement des liens

• 3ème ligne :

a:hover indique que les données concernent les liens au passage de la souris. Même démarche pour la ponctuation.

color:#eef1d9 indique la couleur des liens au passage de la souris
text-decoration:none empêche le soulignement des liens

• 4ème ligne :

td indique que les données concernent ce qui se trouve à l'intérieur des tableaux (plus précisément, dans les cellules). Même démarche pour la ponctuation.

font-size:8pt indique la taille du texte
font-family:Verdana indique le police choisie

• 5ème ligne :

h1 vous permet de définir un style pour des titres. Je m'en suis servie par exemple ici pour écrire les 1ère ligne, 2ème ligne etc... Ils apparaissent en vert et en gras. Même démarche pour la ponctuation.

font-family:Verdana indique la police choisie
font-size:8pt indique la taille du texte
font-weight:bold permet de mettre le texte en gras
color:#849640 indique la couleur du texte

• 6ème ligne :

p indique que les données concernent le contenu des paragraphes. Même démarche pour la ponctuation.

font-family:Verdana indique la police choisie
font-size:8pt indique la taille du texte
color:#d72b45 correspond à la couleur du texte
margin-left:0px ne laisse aucune marge à gauche
margin-right:0px ne laisse aucune marge à droite

• Enregistrement :

Une fois que vous avez remplacé les données par celles que vous avez choisies, enregistrez la feuille de style en procédant comme ceci :

Fichier
Enregistrer sous...
Positionnez-vous à la racine de votre site
Indiquez le nom (j'ai choisi "_menu.css")
Enregistrez

Pourquoi "_menu.css" ?

"_menu" parce que de cette manière, ma feuille de style sera vite repérable puisqu'elle se situera au début de mes pages dans le classement alphabétique.
".css" parce que c'est le format de la feuille de style, c'est très important !!!

Vous vous doutez bien que cette feuille de style est simplifiée... vous pouvez ajouter énormément de détails mais je pense que pour un début c'est amplement suffisant ;)