CSS plus en détail...

⇢ Taille texte ; contrôler le texte. Ici
Les pixels c'est très pratique pour être précis, mais ce n'est pas très "recommandé" car il se peut qu'une taille trop petite (ou trop grosse) gêne certaines personnes.
En ce qui me concerne, la méthode des "em" (ou des %) est la plus pratique : elle a l'avantage de s'adapter automatiquement aux préférences du visiteur et d'être facile à utiliser.

|En pixels ; c'est une façon très précise d'indiquer la taille du texte. C'est à vous de dire combien de pixels exactement doit faire le texte.
Pour avoir un texte de 16 pixels de hauteur, vous devez écrire :

Code:

<font-size:16px;></font>

(ailleurs sur FA)
SUR FA : Éternel [size]


|En taille relative ; c'est-à-dire en écrivant carrément "gros", "très gros", "petit", "minuscule". Mais bien sûr, comme tout c'est en anglais :p. Voici la liste des différentes valeurs que vous pouvez mettre ainsi que leur signification.
# xx-small : minuscule
# x-small : très petit
# small : petit
# medium : moyen
# large : grand
# x-large : très grand
# xx-large : euh... gigantesque
SUR FA :

Code:

<div style= "font-size:xx-small;"> Hello xx-small</div><div style= "font-size:medium;"> Hello medium</div><div style= "font-size:x-large;"> Hello x-large</div>

Spoiler:

|En em ; On doit indiquer la taille du texte par rapport à la taille normale de la police. Je m'explique : "1em" signifie "Taille normale". Si vous mettez un nombre supérieur (généralement un nombre décimal) comme "1.3em", le texte aura une taille 1,3 fois plus grande. De même pour réduire : "0.8em" et votre texte aura une taille 0,8 fois plus petite. (Il faut mettre un point et non une virgule.)
SUR FA :

Code:

<div style= "font-size:0.8em;"> Hello 0.8em</div><div style= "font-size:1.4em;"> Hello 1.4em</div>

Spoiler:

|En pourcentage : Si vous indiquez "100%", le texte aura une taille "normale". Si vous mettez "130%", le texte aura une taille correspondant à 130% de la taille normale. Ca ressemble énormément aux "em" (en fait c'est plus ou moins pareil).
SUR FA :

Code:

<div style= "font-size:80%;"> Hello 80%</div><div style= "font-size:130%;"> Hello 130%</div>

⇢ Effets de style sur texte ; différents effets sur les textes.

|Base ; Normal, italique, gras, etc. [font-style]
SUR FA : Normal, Italic, Bold.

Code:

<div style= "font-style:italic;">Texte italic !</div>

|Majuscules ; Jouer avec les majuscules ~ [none pour rien]
. Lettre en petite majuscule. [font-variant]
SUR FA :

Code:

<div style= "font-variant:small-caps;">Texte small-caps</div>

. Texte en majuscule. [text-transform]
SUR FA :

Code:

<div style= "text-transform:uppercase;">Texte uppercase</div>

. Texte en minuscule. [text-transform]
SUR FA :

Code:

<div style= "text-transform:lowercase;">Texte lowercase</div>

. Capitalize, met la première lettre de chaque mot en majuscule. [text-transform]
SUR FA :

Code:

<div style= "text-transform:capitalize;">Texte capitalize</div>

|Décoration ; des petits plus. [none pour rien]
. Souligner le texte.[text-decoration]
SUR FA :

Code:

<div style= "text-decoration:underline;">Texte underline</div>

. Barrer le texte.[text-decoration]
SUR FA :

Code:

<div style= "text-decoration:line-through;">Texte line-through</div>

. Line au dessus du texte.[text-decoration]
SUR FA :

Code:

<div style= "text-decoration:overline;">Texte overline</div>

. Faire clignoter le texte.[text-decoration]
SUR FA :

Code:

<div style= "text-decoration:blink;">Texte blink</div>

⇢ Fond ; Contrairement à ce qu'on pourrait croire, le fond ne désigne pas forcément le fond de toute une page web. On peut aussi appliquer un fond uniquement aux titres, ou aux paragraphes, ou encore à certains mots d'un paragraphe.

|Fond couleur ; on utilise la propriété CSS "background-color". Elle s'utilise de la même manière que la propriété "color", c'est-à-dire que vous pouvez taper le nom d'une couleur, l'écrire en notation hexadécimale ou encore utiliser la méthode RGB.
SUR FA :

Code:

<div style= "background-color:#FFFFFF; width: 90px;">Couleur fond ~</div>

|Fond image ; La propriété permettant d'indiquer une image de fond est background-image. Comme valeur, on doit lui mettre url("nom_de_l_image.png"). Bien entendu, votre fond n'est pas forcément en PNG, il peut aussi être en JPEG ou en GIF. Par exemple :

Code:

background-image:url("fond.png");

SUR FA :

Code:

<div style= "background-image: url( 'http://i30.tinypic.com/30csn7n.jpg' ); background-attachment: fixed; width:100px, height:100px">Image en fond !</div>
OU en plus simple et réunis...
<div style= "background: url( 'http://i30.tinypic.com/30csn7n.jpg' ); fixed; width:100px; height:100px">Image en fond !</div>

Attachement du fond ! [background-attachment]
Fixer l'image : fixed (Elle restera comme en fond du forum et changera lors du scroll)
Faire défiler l'image avec le texte : scroll (Elle restera en fond du texte et ne bougera pas)

Répéter le fond ! [background-repeat] (NE FONCTIONNE PAS TOUJOURS SUR FA)
Ne pas répéter le fond: no-repeat
Répéter sur la première ligne horizontale : repeat-x
Répéter sur la première ligne verticale : repeat-y
Répéter tout simplement : repeat

Positionner le fond ! [background-position]
top, bottom, left, center, right. (Ils peuvent être mis ensemble. ex - top right)


⇢ Espace ; contrôler l'espace (du texte, de la marge, etc). Ici

|Marge ; Pour affecter des marges aux différents éléments d'une page web, les propriétés CSS à utiliser sont margin, pour les marges extérieures, et padding pour les marges intérieures.
Élément extérieur : margin | Élément intérieur : padding

Les tailles de ces marges peuvent se déclarer en pixels (px), en em, en %, etc. Tout dépend si l'on veut qu'elles soient fixes ou proportionnelles.
On peut détailler les tailles des marges à l'aide des suffixes -top (haut), -right (droite), -bottom (bas), -left (gauche). Si on ne met que deux valeurs, la 1ère s'appliquera au haut et au bas, la seconde à droite et à gauche. On peut aussi synthétiser les quatre d'un seul coup (la première valeur étant celle du haut, puis on tourne dans le sens des aiguilles d'une montre).

Code:

margin:2px 5px 2em 0;


|Box model ; lorsqu'on attribue une taille à un élément de type block (à l'aide d'un width ou d'un height), les marges viennent s'ajouter à cette taille.
Notez aussi le très pratique margin:auto qui permet, dans le cas d'un bloc muni d'une largeur, de centrer horizontalement un élément.
SUR FA :

Code:

<div style= "background-color:#FFFFFF; width:200px; padding:40px; margin:auto;">Box model !~</div>