Lovely Web [dot] Starszz [dot] Com

CODAGE DE SITE CSS Qu'est ce que le CSS?

Eh bien d'abord il faut dire que c'est très pratique. Surtout pour les sites ayant beaucoup de pages. Cela permet de ne modifier qu'une seule page pour changer les couleurs (pour un nouveau design par exemple) au lieu de les modifier toutes une par une.

Pour cela, ouvrez votre bloc-note et collez dedans ce code :

BODY{ color:#464646; font-size:10pt; font-family:arial narrow; line-height: 15px; margin-top:0px; 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; } 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; } 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; }

On va maintenant modifier ce code pour qu'il soit assortit à votre design. Je vais le faire dans l'ordre dans lequel ça apparaît dans la feuille de style.

I Body

color:#464646; -> Code couleur du texte
font-size:10pt; -> Taille de la police d'écriture
font-family:arial narrow; -> Nom de la police d'écriture
line-height: 15px; -> Hauteur des lignes (en pixels)
margin-top:0px; -> Marge à partir du haut
background-color:#000000; -> Couleur du fond de page. Mettez transparent pour que celui-ci soit transparent.
background-attachment : fixed; --------> Pour que l'image de fond soit immobile

Vous souhaitez mettre une image en fond de page plutôt qu'une couleur unie?
Alors remplacez background-color:#000000; par :
background-image: url(http://votresite.com/img.jpg); et mettez l'adresse correspondant à votre image de fond de page entre les parenthèses.

Pour la barre de défilement, vous pouvez voir à quoi correspond chaque ligne grâce au graphique ci-contre.

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;

Il ne vous reste plus qu'à modifier les codes couleurs.

II Les liens
a:link { --------> Lien normal
color: #C29D42;
text-decoration: none;

}
a:visited { --------> Lien visité
color: #C29D42;
text-decoration: none;
}
a:hover { --------> Quand on passe la souris sur le lien
color: #DDB470;
text-decoration: none;

}
a:active { --------> Lien quand on clique dessus
color: #C29D42;
text-decoration: none;
}

Vous n'avez qu'à changer les codes couleurs présents par ceux que vous voulez.

Pour personnalisez plus vos liens, rendez-vous sur cette page-là!

III Formulaire
select
{background: ; font-family:arial narrow; color:black; font-size: 8pt} --------> Couleur, taille et nom de la police d'écriture

textarea, input{ --------> Correspond aux zones de textes tels que les formulaires.
font-family:arial narrow; --------> Nom de la police d'écriture
font-size: 8pt; --------> Taille de la police d'écriture
color: #35556D; --------> Couleur de la police d'écriture
background:transparent; --------> Couleur du fond de la zone. (ici c'est transparent mais vous pouvez remplacer par un code couleur)
border-style: dotted 1px; --------> Genre des bordures (solid pour des lignes pleines | dotted pour avoir des pointillés) | Epaisseur des bordures
border-color: #211911; --------> Couleur des bordures

IV Ajouter des catégories

Vous pouvez également ajouter d'autres catégories à votre feuille de style.
Par exemple en haut de chaque page (comme ici) une ligne a une couleur de fond particulière. Vous pouvez intégrer ce paramètre dans votre feuille de style.

Nous allons appeler cette ligne titre.
Imaginons que vous vouliez que le fond de cette ligne soit gris et le code est : #C0C0C0.
Imaginons encore que vous vouliez que le texte soit écrit en rouge avec le code : #FF0000.

Le code sera donc :
.titre{
background-color:#C0C0C0;
color:#FF0000;
}

Et pour voir ce que ça donne, on va ajouter une ligne en pointillés (dotted) au dessus de la ligne de couleur bleu : #0000FF.
Cela donnera :
.titre{
background-color:#C0C0C0;
color:#FF0000;
border-top:#0000FF 1px dotted;
}

Voici d'autres possibilités d'ajouter une ligne : (vous pouvez combiner plusieurs de ces possibilités)
- encadrer totalement la ligne : border:#0000FF;
- Mettre une ligne en haut : border-top:#0000FF;
- Mettre une ligne en bas : border-bottom:#0000FF;
- Mettre une ligne à gauche : border-left:#0000FF;
- Mettre une ligne à droite : border-right:#0000FF;

- Pour avoir une ligne en pointillé : border-right:#0000FF 1px dotted;
- Pour avoir une ligne pleine : border-right:#0000FF 1px solid;
- Pour avoir une ligne plus épaisse: border-right:#0000FF 6px solid;

V Personnaliser le texte en gras, italique et souligné

Les textes en gras, italique et souligné peuvent être changé de couleur c'est à dire être mis d'une autre couleur que la couleur du texte en général.

Pour cela, ajouté dans la feuille de style les éléments suivants :

b { --------> Texte en gras
color: #000000;
}

u { --------> Texte souligné
color: #000000;
border-bottom: 1px solid #FFFFFF;
}

i { --------> Texte en italique
color :#000000;
}

Pour le texte souligné ( u ), vous pouvez bien sûr mettre des pointillés (dotted) à la place de la ligne pleine (solid) et épaissir la ligne en remplaçant le 1 par un autre chiffre.

VI Installation

Enregistrez votre feuille sous le nom : style.css

Héberger la.

Puis enfin ajoutez le code ci-dessous dans les pages où vous voulez que la feuille de style s'applique, entre les balises <head>. N'oubliez pas de modifier l'URL pour qu'elle corresponde à l'endroit où vous avez hébergé votre feuille de style.

... retour. - | - Des questions sur ce tutorial?