Accueil Cours Aprés BTS Livre d'or Contact
Atelier N° 1 : Présentation de l’information Style CSS


Travail à faire :
on va créer une image avec son texte en utilisant la balise DIV et ses propriétés : ID, Class ... avec 3 façons différentes.










Façon 1 :
On va utiliser la déclaration des styles directement dans la balise DIV en utilisant la propriété Style.


<html>
<head><title> exemple 1 <title></head>
<body>
<div style="background-color:#FF9966; position:absolute; left:10px; top:10px; width:70px; height:100px;"> ici mon image </div>
<div style="background-color:#FF99FF; position:absolute; left:85px; top:10px;width:170px; height:100px;"> ici mon texte </div>
</body>
</html>

ici un div pour mon image
ici un div pour mon texte

Façon 2 :
on va déclarer une classe qui contient tous les syles et on va l'appeller dans la balise DIV en utilisant la propriété Class


<html>
<head><title> Exemple 2 </title>
<style type="text/css">
.class_img ----------> un point avant le nom de la classe : .nom_class
{
background-color:#FF9966;
position:absolute;
left:10px;
top:10px;
width:70px;
height:100px;
}
.class_text
{
background-color:#FF99FF;
position:absolute;
left:85px;
top:10px;
width:170px;
height:100px;
}
</style>
</head>
<body>
<div class="class_img">ici mon image </div>
<div class="class_text">ici mon texte </div>
</body>
</html>

Façon 3 :
on va déclarer un ID qui contient tous les syles et on va l'appeller dans la balise DIV en utilisant la propriété Id


<html>
<head><title> Exemple 2 </title>
<style type="text/css">
#id_img ----------> un # avant le nom de l' ID : #nom_id
{
background-color:#FF9966;
position:absolute;
left:10px;
top:10px;
width:70px;
height:100px;
}
#id_text
{
background-color:#FF99FF;
position:absolute;
left:85px;
top:10px;
width:170px;
height:100px;
}
</style>
</head>
<body>
<div id="id_img">ici mon image </div>
<div id="id_text">ici mon texte </div>
</body>
</html>

Si on a une classe ou un ID qui se répetent dans plusieur pages par exemple style des titres et des sous titres c'est mieux d'utiliser un fichier séparé et l'appeler style.css qui va contenir tous ces styles.
Le fichier 'style.css' est inclu comme suit dans notre fichier HTML (entre les balises <head> et </head> :
<link rel="stylesheet" type="text/css" href="styles.css">

.