Les feuilles de style en cascade (Cascadind Style Sheets) abréviativement appelées CSS, permettent de gérer l’apparence des éléments de votre page html, par un fichier externe que nous nommerons style.css (style externe). Ce lien sera réalisé par l’insertion dans l’en-tête votre page html de la balise :

<link rel= "stylesheet" href= "url/style.css" type= "text/css" />.

Cette méthode que nous emploierons très souvent, n’est pas la seule possible. Vous pouvez aussi inscrire le style directement comme attribut d’une balise (style en ligne) ou encore dans l’en-tête de votre page html entre les balises <style type="text/css"> et </style> (style interne).

Il existe une quatrième méthode (style incorporé) qui permet l’usage d’une feuille de style externe. Il s’agit de la propriéte @import que l’on utilisera dans la page html avec la syntaxe

<style type="text/css">@import url(style.css) ;</style>

mais aussi et surtout au début d’une autre feuille de style externe avec la syntaxe :

@import url(style.css) ;

Remarque sur l’effet cascade :

Lorsque vous faites cohabiter ces différentes méthodes de déclaration de style, il faut éviter les risques de conflit quant à la façon de définir le style d’un même élément. On utilise alors la règle de priorités suivante : on applique d’abord le style en ligne, puis le style interne et enfin le style externe ou incorporé.

Si vous voulez déroger à cette règle, et forcer une valeur de style a être appliquée à la place d’une autre qui lui est prioritaire, il suffit d’ajouter  !important en fin de votre directive de style.

Les styles externes et incorporés ont la même priorité ; l’ordre dans lequel vous les déclarerez dans l’en-tête précisera le style utilisé (le deuxième écrasera le premier). 

Remarque sur Internet explorer :

Il est parfois nécessaire de donner des valeurs de style particulière pour ce navigateur. Pour ce faire, vous ajouterez  !ie en fin de votre directive de style ou vous préfixerez la propriété avec un underscore. 

Ces deux méthodes sont très pratiques lors de la conception de votre feuille de style, mais elles ne vous permettront pas d’obtenir la validation CSS du W3C. Pour ce faire, il faudra placer toutes les règles de style spécifiques à Internet Explorer dans un fichier dont l’appel sera effectué après celui celui du style à commun à tous les navigateurs. Vous utiliserez alors la syntaxe suivante :

< !—[if IE ]>
<link rel= "stylesheet" href= "url/style.css" type= "text/css" />
< ![endif]—>

Pour lier à votre page une feuille de style spéciale lorsque le navigateur est Internet Explorer avec une version inférieure ou égale à 6 (la gestion des images transparentes de type png par exemple), vous écrirez :

< !—[if lte IE 6]>
<link rel= "stylesheet" href= "url/style.css" type= "text/css" />
< ![endif]—>

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.