tuto http://vogue.withme.us
Un ch'tit cours sur les feuilles de style CSS!
Au niveau du CSS, le minimum syndical, c'est de coder les couleurs et les formes pour: le texte, les liens, éventuellement les scrollbars. Le reste, après, c'est de l'optimisation pure et simple.
Le CSS peut être intégré à votre page html, mais je vous conseille plutôt d'en faire un fichier séparé que vous devrez appeler style.css
Pour "appeler" ce fichier dans votre page html, vous devrez dans le header de celle-ci indiquer ce code: link href="style.css" type="text/css" rel="stylesheet" (le tout entre < >, je le marque comme ça sinon ça s'affiche pas, pas d'espace entre < et le début du code)
Nous voilà donc avec deux fichier: votre page (fichier.html) et votre feuille de style (style.css). Maitenant, il va falloir remplir votre feuille de style.
Les basiques
Le texte
Vous devez écrire dans style.css ceci:
body {
background : #E5E5E5 ;
color : #000000;
font-size : 11px;
font-family : tahoma;
text-align : justify;
}
Bon, petit décodage!
background = la couleur de fond, exemple: blanc (#FFFFFF) [NOTE: couleurs en hexa, cependant certaines couleurs marchent si on les écrit en anglais, genre "white", "black"...]
color = couleur de texte, exemple: noir (#000000)
font-size = taille de la police, à vous de faire des essais, certaines polices sont plus grandes que d'autres [NOTE: Il faut utiliser des polices standards de Windows, ex: Arial, Tahoma, Times, Trebuchet... vous pouvez utiliser une autre police que vous avez installée vous-même mais si la personne qui visitera votre site n'a pas cette police ça sera moche)
font-family = le nom de la police choisie, ici Tahoma
text-align = pas obligatoire, ici j'ai mis justify (qui oblige le texte à s'aligner, à commencer bien à gauche et finir bien à droite), si vous ne voulez pas du justify enlevez cette ligne
Les liens
A:link , A:visited , A:active {
text-decoration : none;
color : #D32500;
}
a:hover {
color : #D4FF35;
cursor : default ;
background :#8F8F8F;
}
Bon, ici vous avez plusieurs types de liens:
- les liens de base (link)
- les liens déjà visités (visited)
- les liens qui ne sont pas des broken links [NOTE: broken link: lien vers une page qui n'existe pas ou plus] (active)
- les liens sur lesquels on passe la souris (hover)
J'ai regroupé link, visited et active, mais vous pouvez les séparer.
text-decoration = "décoration" du texte, ici c'est "none" donc pas de déco, mais vous pouvez mettre "underline" (un trait qui s'affiche en dessous)...
cursor = ici, par défaut (la petite main je crois) [NOTE: vous pouvez changer le curseur qui passe sur les liens, exemple: "help" (un ?), "hand" (une main), "ne-resize" (un curseur comme si on redimensionnait), etc etc...)
color = la couleur du lien
background = le fond sur lequel apparait le lien, exemple texte blanc sur fond noir
A tout ceci, vous pouvez rajouter d'autres attributs. La plupart des effets sont surtout intéressants dans la partie "hover". Exemples:
text-transform: uppercase (ou lowercase) pour mettre automatiquement en majuscules ou minuscules
font-weight: bold pour mettre les liens en gras
etc, etc...
Si vous ajoutez des attributs, n'oubliez pas:
- de mettre un point virgule à la fin
- de bien fermer les accolades quand vous avez fini
Exemple, ici, si on rajoute les deux cités ci-dessus dans hover:
A:link , A:visited , A:active {
text-decoration : none;
color : #D32500;
}
a:hover {
color : #D4FF35;
cursor : default ;
background :#8F8F8F;
text-transform : uppercase;
font-weight : bold;
}
Scrollbars
Uniquement sous Internet Explorer, je crois que quelqu'un d'autre ici a déjà fait un tutoriel alors je vous propose de le consulter.
Les améliorations
Maintenant que vous savez tout ça, vous pouvez rajouter des trucs sympas dans la feuille de style (toujours la même, à la suite du reste). Exemple: création d'un h1
Imaginez, vous voulez avoir un titre d'article avec une certaine couleur et forme, et un texte d'une autre couleur. Codez votre texte grâce au tutoriel plus haut, et on va coder le titre sous le nom "h1". En fait, le nom importe peu, par convention on met h1, h2 etc mais en fait on mettrait merde ce serait pareil. Donc, créons notre h1 dans style.css. Le principe est le même que pour ton texte principal!
.h1 {
background : #E5E5E5 ;
color : #000000;
font-size : 11px;
font-family : tahoma;
text-align : justify;
}
Bon, faut changer les couleurs, la police et tout, sinon ça n'a pas d'intêret de faire des h1! lol
On peut aussi rajouter des attributs selon le même principe que pour les liens. Voici quelques attributs sympas:
letter-spacing: 2px (espacement entre les lettres)
border-bottom : 1px solid #444444 (pour faire une bordure de 1 pixel en bas de couleur #444444, changer bottom par top pour une bordure en haut, par left pour la gauche et right pour la droite)
Mais maintenant, vous allez dire, comment ma page.html va-t-elle savoir quand il faut mettre un titre en style h1? Bon sang, mais c'est bien sûr! En utilisant les balises h1 (comme si on mettait en gras) autour du titre! < h1 > et < / h1 > (sans espaces)
Enfin, on peut aussi changer automatiquement la couleur de ce qu'on met en gras, italique et souligné!
.style1,
b {color: #f3486b}
i {color: #fcc4d0}
u {color: #FFFFFF}
Ici, je l'ai appelé style1, mais pareil, on peut l'appeler comme on veut.
Accueil 
