Un style est associé à un élément à l’aide d’un selecteur et se déclare comme suit :
selecteur { règles de style terminées par des points-virgules }
Il existe trois types de selecteurs.
1. Le selecteur de balise
Si vous voulez, par exemple, que le texte de toutes les balises de paragraphe <p> soit centré et écrit en rouge avec la police Arial, il vous faudra écrire :
p{
font-family:Arial ;
text-align:center ;
color:red ;
}
Si vous voulez qu’il en soit de même pour vos liens et vos titres de niveau 1, vous écrirez :
p, a, h1{
font-family:Arial ;
text-align:center ;
color:red ;
}
2. Le selecteur de classe
Si vous voulez par exemple que tous les éléments (quelle que soit la balise) dont l’attribut class est "apparencecommune" aient une largeur de 50px, une hauteur de 75px que leurs fonds soient jaunes et leurs bordures bleues, vous écrirez :
.apparencecommune{
width:50px ;
height:75px ;
background-color:yellow ;
color:red ;
border:1px solid blue ;
}
Si vous voulez attribuer ces valeurs uniquement aux balises <div class="apparencecommune"> et non aux balises <p class="apparencecommune"> par exemple, il vous faudra écrire :
div.apparencecommune{
width:50px ;
height:75px ;
background-color:yellow ;
color:red ;
border:1px solid blue ;
}
Si vous voulez attribuer ces valeurs à tous les éléments contenus entre deux balises <div> et </div> et dont l’attribut class est "apparencecommune", il vous faudra écrire (attention à l’espace essentiel entre div et .apparencecommune :
div .apparencecommune{
width:50px ;
height:75px ;
background-color:yellow ;
color:red ;
border:1px solid blue ;
}
3. Le selecteur d’identifiant.
La méthode est identique à celle employée pour les classes, en remplaçant le point par un dièse.
Ainsi, si vous voulez attribuer les valeurs précédentes à tous les éléments paragraphes <p> contenus dans l’unique élément dont l’attribut id est "apparencecommune", il vous faudra écrire :
#apparencecommune p{
width:50px ;
height:75px ;
background-color:yellow ;
color:red ;
border:1px solid blue ;
}
Remarque concernant l’héritage
Un élément hérite du style des éléments qui le contiennent.
Remarque sur les classes multiples
Si vous voulez qu’un élément possède les styles de plusieurs classes, il suffira de donner à son attribut class la valeur correspondant à ces classes aboutées et séparées par des espaces.
Par exemple, si vous avez défini les règles de styles :
.premier{
color:red ;
}
.deuxieme{
background-color:yellow ;
}
.troisieme{
border:1px solid blue ;
}
alors un élément dont l’attribut class aura la valeur "premier deuxieme troisieme" aura son texte écrit en rouge sur fond jaune avec une bordure bleue de largeur 1px.