Il faut maintenant définir le style de nos balises. Pour celà il faut ajouter des propriétés à nos différents styles. Cela se rédigera ainsi :

Attention à ne pas oublier le ";" à la fin de chaque ligne.

 

Maintenant voyons un peu quelles sont les différentes propriétés :

Mise en forme de texte

• color : permet de modifier la couleur du texte (la valeur sera soit le nom de la couleur en anglais, soit une valeur en rgb) ;
• float : permet de faire flotter une image (les valeurs seront left ou right) ;
• font-size : permet de définir la taille de la police du text ;
• font-family : permet de définir la police a utiliser ; 
• font-style : permet de définir le type de l'écriture (le mettre en italic par exemple) ;
• font-weight : permet de mettre le texte en gras ;
• text-decoration : permet de rajouter des décorations (sous-lignement par exemple) ;
• text-align : permet d'aligner le texte sur la gauche ou la droite ;
• text-shadow : permet de mettre de l'ombre sur votre texte.

Modifier le fond

• background-color : permet de mettre une couleur en fond ;
• background-image : url(monurl.png) : permet d'insérer une image en fond (ici l'image monurl.png) ;
• background-attachment : permet de fixer le fond ;
• background-repeat : permet d'activer ou désactiver la répétition du fond ;
• background-position : permet de définir la position du fond.

Appliquer des styles aux zones

• border :
• border-top :
• border-left :
• ...

Elles se définissent toutes de la même façon :

border : largeur couleur type;

Il existe plusieurs types :

• dashed : tirets ;
• dotted : pointillés ;
• double : bordure double ;
• groove : en relief ;
• inset : effet 3D enfoncé ;
• none : pas de bordure ;
• outset : effet 3D surélevé ;
• ridge : en relief ; 
• solid : trait ;

 

Il est aussi possible d'arrondir les bordures. Pour cela il faut utiliser la propriété "border-radius".

border-radius : [haut-gauche]px [hautdroite]px [bas-droite]px [bas-gauche]px;

 

Il est possible d'ajouter des ombres, pour cela, on utilise "box-shadow".

Elle se définisse de cette façon :

box-shadow décalage_horizontal décalage_vertical adoucissement_dégradé couleur_ombre;