[list]Bon. Pour vous aider, je vais parler par métaphore. Voyez la boîte que nous allons faire comme une maison. Quand on construit une maison, on ne s'intéresse pas directement à l'esthétisme, eh bien pour une boîte, c'est la même chose. Il faut commencer par faire les fondations. Aussi, on commence par mettre ceci dans notre message :

Code:

<div style=" "> </div>

TOUT le code que nous allons mettre devra être mis entre guillemets ! C'est capital ! Jusqu'ici vous devriez suivre, c'est assez simple.

Nous allons dresser les "murs" de la maison, et j'entends par là la bordure de la boîte. Dans les guillemets, on ajoute le code "border". Je vous montre un exemple de bordure :

Code:

<div style="border: 3px double ##d890ff">Test</div>

Ce qui donne :

3px : épaisseur de votre bordure
Double: Bordure en double. Il y a d'autres styles de bordures, que je vous laisse découvrir : il vous suffit de remplacer "dashed" par : solid ( trait uni), dashed ( petits traits ) ou dotted ( petits points ).
#d890ff : Le code couleur. ici, du rose foncé. Pour sélectionner rapidement vos codes couleurs, RDV ici

Maintenant, passons au fond de notre boîte. C'est toujours assez dur d'équilibrer la couleur du contour avec celle du fond, mais nous allons y arriver, vous verrez !
Pour ajouter un fond a notre boîte, nous avons deux choix. Soit avec une couleur, soit avec une image. Je vais faire ma boîte avec une couleur car c'est plus simple, mais voici le codage pour ceux qui veulent utiliser un fond avec motif : background: url('URL DE VOTRE IMAGE'). Pour le codage couleur, c'est simple, vous rajoutez : background-color: #CODE COULEUR. Ici aussi, le sélecteur de codes vous sera utile. Exemple :

Code:

<div style="border: 3px double #d890ff; background-color: #f5e0ff">Test</div>

Ah, avant que j'oublie. Vous remarquez le point-virgule entre les deux propriétés ? Il est impératif de le mettre, suivi d'un espace. ça permet de séparer les deux codes :)
Jusqu'ici vous suivez ? Alors continuons.

2 - Propriétés de Texte

Vous voyez, notre Div COMMENCE a ressembler a un truc sympa ! Mais il nous reste encore quelques petites choses a explorer. Par exemple, les propriétés de texte.
Pour que l'exemple soit plus flagrant, je vais remplacer mon petit "test" par un texte - il est en latin, z'étonnez pas si vous comprenez rien
Exemple :

Code:

<div style="border: 3px double #d890ff; background-color: #f5e0ff"; text-align: justify; text-shadow: 3px 3px 3px #000000; letter-spacing: 2px>
Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur.</div>

Text-align L'alignement de votre texte. Ici, justifié. Vous pouvez aussi mettre : left, right & center.
Text-shadow: L'ombre sous le texte. Le "3px 3px 3px" qui suit n'est pas a modifier si vous ne vous y connaissez pas trop. Quand au codage couleur, vous agissez a votre guise.
Letter-spacingOn ajoute de l'espace entre les lettres. Dans le genre, y'a aussi "word-spacing" ça ajoute de l'espace entre les mots.
Color couleur du texte. Ici, violet foncé.

On a presque fini, courage !


3 - Autres propriétés


Ouh làà ... ça commence a être mignon, mais y'a quelque chose qui me gène ... pas vous ? M'enfin, la div est complétement collée aux parois du forum ! On va arranger ça, avec une petite propriété appelée "padding". ça va ajouter de l'espace : voyez vous même.


Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur.




Code:

<div style="border: 3px double #d890ff; background-color: #f5e0ff; text-align: justify; text-shadow: 3px 3px 3px #ffa0fa; letter-spacing: 2px; color: #500050; padding: 5px">Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur.</div>


C'est presque fini ! Je rajoute juste un petit truc qui ne sera pas pour vous déplaire =) Le code -moz-border-radius: 20px ( sachant que le nombre peut varier ) arrondira le cadre de ma DIV.



Code:

<div style="border: 3px double #d890ff; background-color: #f5e0ff; text-align: justify; text-shadow: 3px 3px 3px #ffa0fa; letter-spacing: 2px; color: #500050; padding: 5px; -moz-border-radius: 20px">Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur.</div>



Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat. Sed, opere consummato, desiderabat artifex esse aliquem qui tanti operis rationem perpenderet, pulchritudinem amaret, magnitudinem admiraretur.



Et voilàààà =) J'ai hâte de voir vos résultats !
Il existe de nombreuses autres propriétés CSS mais c'est plus dur ... a voir dans le prochain cours :P


(c) MELOW
TUTORIEL EXCLUSIF POUR WOH
TOUTE REPRODUCTION INTERDITE