1/ Intro.Le CSS est très pratique pour la mise en forme du texte, des images, des titres, des liens tableaux, formulaires... surtout pour les sites ayant un bon nombre de pages.
Le but est de créer une feuille de style CSS qui sera apliquée sur toutes les pages du site à l'aide de balises HTML.
2/ Le commencementPour commencer, ouvrez votre
bloc-note ou
Notepad++ et enregistrer votre fichier dans le dossier de votre site sous ce nom :
"style.css"Puis copiez/collez ce code entre les balises <head> dans toutes les pages de votre site.
- Code:
-
<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">
3/ La baseCopiez/collez ce code :
- Code:
-
body{
color:#000000;
font-size:10pt;
font-family:arial;
line-height: 15px;
margin-top: 10px;
}
select
{background:#D9D5D2; font-family:arial narrow; color:#464646; font-size:10pt}
textarea, input{
font-family:arial narrow;
font-size:10pt;
color:#464646;
background:#DFDAC7;
border-style:1px solid;
border-color:#000000;
}
Explications :
color:#000000;
Couleur du texte
font-size:10pt;
Taille du texte
font-family:arial;
Nom de la police d'écriture
line-height: 15px;
Hauteur des lignes (en pixels)
margin-top: 10px;
Marge à partir du haut de la page
background-color:#FFFFFF;
Couleur du fond de page.
background-image: url(http://URL_DE_VOTRE_IMAGE.jpg);
Si vous souhaitez mettre une image en fond plutôt qu'une couleur (remplacez l'URL entre parenthèses).
4/ Modification de la scrollbar (Barre pour monter et descendre dans la page située à droite de l'écran) Code: - Code:
-
body {
background-color:transparent;
background-attachment : fixed;
scrollbar-face-color:#D9D5D2;
scrollbar-arrow-color:#000000;
scrollbar-track-color:#D9D5D2;
scrollbar-shadow-color:#000000;
scrollbar-darkshadow-color:#D9D5D2;
scrollbar-highlight-color:#D9D5D2;
scrollbar-3dlight-color:#D9D5D2;
}
Voici un schéma trouvé [url=\"http://www.le-webmaster.com\"]ici[/url] pour vous aider à remplir ce code à votre guise :
5/ Mise en forme des liens.Code: - Code:
-
a:link {
color: #C29D42;
text-decoration: none;
}
a:visited {
color: #C29D42;
text-decoration: none;
}
a:hover {
color: #DDB470;
border-bottom: #000000 1px dotted;
}
a:active {
color: #C29D42;
text-decoration: none;
}
a:link
Lien normal
a:visited
Lien visité
a:hover
Quand on passe la souris sur le lien
a:active
Lien quand on clique dessus
Il vous reste à changer les couleurs et à ajouter des effets.
Exemples d'effets :
Surlignement :background-color:#777777;
Soulignement :border-bottom: #000000 1px;
Texte barré :text-decoration:line-through;
Encadrement :
border:#000000 1px;
Je complèterai ce cours plus tard.