Dans ce chapitre, vous trouverez les propriétés les plus couramment utilisées en CSS.

Pour découvrir d'autres propriétés CSS, je vous recommande le site suivant : cssreference

1) Modifier la taille du texte

Pour modifier la taille du texte, on utilise la propriétés font-size suivie d’une taille absolue ou relative.

Exemples :

h1
{
    font-size : 16px ;      /* Les lettres auront une taille absolue de 16 pixels */
}
 
P
{
    font-size : small ;         /* Les lettres auront une taille relative "small"  */
}

Autres tailles relatives :

• xx-small : minuscule ;
• x-small : très petit ;
• small : petit ;
• medium : moyen ;
• large : grand ;
• x-large : très grand ;
• xx-large : très très … grand.

Autre possibilité, indiquer la taille en « em ».

• 1 em, le texte à une taille normale ;
  
• 1.3 em, pour une valeur supérieure à 1, le texte est grossi ;
  
• 0.8 em, pour une valeur inférieure à 1, le texte est réduit.
  

Exemple :

P
{
    font-size : 1.2 em ;   /* Attention il faut utiliser le point et non la virgule pour écrire un nombre décimale */      
}

2) Modifier la police

La propriété CSS qui permet d’indiquer la police à utiliser est font-family.

P
{
    font-family : Arial , Verdana, Impact ; 	/*mettre la police en Arial ou si elle n’y est pas, Verdana sinon Impact */
}

3) Mettre le texte en italique

La propriété CSS qui permet de mette le texte en italique est font-style.

P
{
    font-style : italic ;      /*  le texte sera mis en italique  */
    font-style : normal ;      /*  le texte sera normal (par défaut)  */
}

4) Mettre le texte en gras

La propriété CSS qui permet de mette le texte en gras est font-weight.

P
{
    font-weight : bold ;      /*  le texte sera mis en gras  */
    font-weight : normal ;    /*  le texte sera normal (par défaut)  */
}

5) Souligner le texte

La propriété CSS qui permet de souligner le texte est text-decoration.

P
{
    text-decoration : underline ;    /*  le texte sera souligné  */
    text-decoration : none ;         /*  le texte sera normal (par défaut)  */
}

6) Alignement du texte

La propriété CSS qui permet l’alignement du texte est text-align.

P
{
    text-align : left ;      /*  le texte sera aligné à gauche  */
    text-align : right ;     /*  le texte sera aligné à droite  */
    text-align : center ;    /*  le texte sera aligné au centre  */
    text-align : justify ;   /*  le texte sera justifié  */
}

7) Modifier la couleur

La propriété CSS qui permet de modifier la coleur est color. Plusieurs méthodes sont possibles pour choisir la couleur, :

• Saisir son nom en anglais :

P
{
    color : purple ;
}

• Saisir un nom de code hexadécimal :

P
{
    color : #800080 ;
}

• Saisir le code RVB (Rouge, Vert, Bleu) de la couleur :

P
{
    color : rgb(107, 1, 118) ;    /*  RGB = Red, Green, Blue en anglais  */
}

1) Modifier la couleur de fond

Pour modifier la couleur de fond de n’importe quel élément (titre, paragraphe, mot…), il faut utiliser la propriété CSS background-color :

body
{
    background-color : yellow ;    /* le fond de la page sera jaune */        
}
 
p
{
    background-color : red ;       /* le fond du paragraphe sera rouge */        
}

2) Mettre une image de fond

La propriété permettant d’indiquer une image de fond est background-image :

body
{
	background-image : url("lotus.jpg") ;       /* Affiche "lotus.jpg" en image de fond */        
}

La propriété background-image peut être compléter par plusieurs autres propriétés qui permettent de changer le comportement de l’image de fond.

• Propriété background-attachement : fixer le fond.

body
{
    background-image : url("lotus.jpg") ;       
    background-attachment : fixed ;    /* le fond restera fixe  */
    background-attachment : scroll ;   /* l’image de fond défile avec le texte */
}

• Propriété background-repeat : répétition du fond.

body
{
    background-image : url("lotus.jpg") ;       
    background-repeat : no-repeat ;  /* le fond ne sera pas répété. L'image sera donc unique sur la page */
    background-repeat : repeat-x ;   /* le fond sera répété uniquement sur la première ligne, horizontalement */
    background-repeat : repeat-y ;   /* le fond sera répété uniquement sur la première colonne, verticalement */
    background-repeat : repeat ;     /* le fond sera répété en mosaïque (par défaut) */
}

• Propriété background-position : position du fond.
  On peut indiquer la position de l’image de fond avec la propriété background-position. Il faut indiquer la position du fond par rapport au coin supérieur gauche de la page (ou du paragraphe, si vous appliquez le fond à un paragraphe).

body
{
    background-image : url("lotus.jpg") ;       
    background-repeat : no-repeat ;   
    background-position : 30px 60px ;   /* le fond sera placé à 30 pixels de la gauche et 60 pixels du haut */
}

⇒ Il est aussi possible d’utiliser ces valeurs en anglais :

• top : en haut ;
  
• bottom : en bas ;
  
• left : à gauche ;
  
• right : à droite ;
  
• center : centré ;
  

⇒ Il est possible de combiner ces mots. Par exemple, pour aligner une image en haut à droite, vous taperez :

body
{
    background-image : url("lotus.jpg") ;
    background-attachment : fixed ;
    background-repeat : no-repeat ;
    background-position : top right ;
}

3) Une super propriété background

Il est possible de combiner toutes les propriétés précédentes en une seule :

body
{
    background : url("lotus.jpg") fixed no-repeat top right ;
}

4) Mettre plusieurs images en fond

Pour ajouter plusieurs images de fond à un élément, il suffit de séparer les déclarations par une virgule :

body
{
    background : url("lotus.jpg") fixed no-repeat top right , url("iris.jpg") fixed ;       
}

1) Les bordures

La propriété permettant d'obtenir une bordure en CSS est tout simplement border.
Cette propriété peut être complétée par plusieurs autres propriétés qui permettent de modifier l’épaisseur de bordure border-width, le style border-style et la couleur border-color.

p
{
    border-width : 2px ;    /* largeur de bordure de 2 pixels */		
    border-color : red ;    /* bordure de couleur rouge */
    border-style : solid ;  /* bordure constituée d'un trait simple */
}

Valeurs disponibles pour le style :

• none : aucune bordure ;
• dotted : bordure en pointillé ;
• dashed : bordure en tirets ;
• solid : bordure continue ;
• double : bordure en double trait ;
• groove : bordure rainurée;
• ridge : bordure en relief ;
• inset : bordure en relief intérieur ;
• outset : bordure en relief extérieur;

On peut combiner toutes ces propriétés :

p
{
    border : 2px red  solid ;
}

2) Les bordures arrondies

Pour créer une bordure arrondie, il faut utiliser la propriété border-radius et indiquer la taille de l’arrondi en pixels :

p
{
    border-radius : 10px ;
}

On peut aussi préciser la forme de l’arrondi pour chaque coin :

p
{
    border-radius : 10px 5px 10px 5px ;
}

A faire vous-même 1	index4.html	style4.css
Reproduire le plus fidèlement possible, la page ci-dessous. Le texte et les images sont téléchargeables : page_a_reproduire.zip