Langage CSS : syntaxe et placement

La volontĂ© du consortium est de sĂ©parer le fond de la forme, dans deux langages distincts. Ce n'Ă©tait pas le cas du HTML 3 qui mĂ©langeait tout et demeurait assez confus.
La bonne pratique des langages Web consiste donc Ă  insĂ©rer des Ă©lĂ©ments dans une page grĂące au HTML, puis Ă  les mettre en forme grĂące aux CSS : (Cascading Style Sheet : feuilles de style en cascade).

Syntaxe

SĂ©lecteur { propriĂ©tĂ©: valeur } 

Exemple :

p { text-align:center }

Remarque : Le sélecteur désigne ici la balise <p>. On appelle cela une redirection de balise.

Plusieurs propriétés de feuilles de style

p {
 text-align: center;
 color: black;
 font-family: arial
}

Le point-virgule sert Ă  cloisonner les couples « propriĂ©tĂ©s : valeurs Â». Dans cet exemple, mettre un point-virgule aprĂšs font-family:arial est donc facultatif.

Les mĂȘmes rĂ©glages CSS pour un groupe de balises

Dans cet exemple, tous les titres adopteront la couleur verte :

h1, h2, h3, h4, h5, h6 { color: green }

OĂč placer les feuilles de style ?

En ligne : à l'intérieur d'une balise

La feuille de style en ligne peut se positionner sur la plupart des balises HTML concernant l’affichage d’une page en utilisant l’attribut style.

<p style="text-align:center">coucou<p>

Il est possible de mettre plusieurs propriétés en les séparant par un point-virgule.

<p style="text-align:center;color:red">coucou<p>

En interne : dans la page HTML

La feuille de style interne se positionne Ă  l’intĂ©rieur d’une balise <style>. Cette balise <style> se positionne traditionnellement dans la zone d’en-tĂȘte <head> (elle peut se placer aussi dans <body>) et permet de fixer des rĂ©glages de mise en forme pour toute la page HTML.

<!doctype html>
<html> 
	<head> 
		<style> 
			body {
				background-image: url('images/fond.gif');
			}
			
			hr {
				color: sienna;
			}
			
			p {
				margin-left: 20px;
			}
		</style> 
	</head> 
	<body> 
		<p>Coucou</p>
		<hr>
		<p>Ça va ?</p>
	</body> 
</html>

En externe : dans un fichier CSS relié à la page HTML

La feuille de style externe se situe dans un fichier texte indĂ©pendant des pages HTML. Elle a pour extension .css. Chaque page d’un site qui veut adopter les mises en forme de la feuille de style externe sera reliĂ©e par une balise <link> situĂ©e dans la zone d’en-tĂȘte.

<!doctype html>
<html>
	<head>
		<link rel="stylesheet" href="monstyle.css">
	</head>
	<body>
		<h1>coucou</h1>
	</body>
</html>

Contenu du fichier monstyle.css :

h1 {
	color: sienna;
}

body {
	background-image: url("images/maison.gif");
}

La feuille de style externe est la plus intĂ©ressante et la plus courante car elle permet de dĂ©finir une charte graphique. Les mĂȘmes mises en forme s’appliqueront l’ensemble des pages de votre site. Si vous souhaitez qu’une page adopte une mise en forme diffĂ©rente du site, il sera possible d’ajouter un code CSS interne ou en ligne pour contredire le code CSS externe.

PrioritĂ© des CSS, quelle feuille de style aura le dernier mot ?

Si on utilise des CSS externes, internes et en ligne, qui appliquera les rĂ©glages ? La rĂ©ponse est toute simple, la prioritĂ© est donnĂ©e Ă  la CSS qui s’est exprimĂ©e en dernier. Ainsi, la CSS en ligne aura toujours la prioritĂ©. Concernant les CSS internes et externes, tout dĂ©pend de l’endroit oĂč elles se situent dans la code source HTML, sachant que le code source d’une page HTML est lu de haut en bas et de gauche Ă  droite.

Mais si vous voulez avoir le dernier mot, quel que soit l'endroit oĂč se situe votre rĂ©glage CSS, une astuce consiste Ă  y ajouter !important. Exemple :

p { color:red !important; }

Les sélecteurs

Un sĂ©lecteur dĂ©signe une balise ou un groupe de balises HTML sur lesquels on souhaite appliquer des mises en forme. Nous venons de voir qu'un sĂ©lecteur peut ĂȘtre le nom d'une balise HTML sans les symboles < et >, mais il en existe d'autres :

Les classes

Les classes permettent de dĂ©finir un rĂ©glage CSS ou un groupe de rĂ©glages personnalisĂ© sous la forme d’un mot inventĂ© par le codeur prĂ©cĂ©dĂ© d’un point. Ci-dessous, les rĂ©glages personnalisĂ©s sont droite, milieu et rouge :

p.droite { text-align: right } 
p.milieu { text-align: center } 
p.rouge { color:red }
p.bidule { text-align: right ; color: green ; font-family: arial }

Ensuite, on doit utiliser l'attribut class dans la page HTML :

<p class="droite">Ce paragraphe est aligné à droite</p>  
<p class="milieu">Ce paragraphe est aligné au milieu</p>
<p class="rouge">Ce paragraphe est rouge</p>
<p class="bidule">Ce paragraphe est aligné à droite, vert et avec la police arial</p>
<p class="milieu rouge">Ce paragraphe est aligné au milieu et coloré en rouge</p>

On peut enlever le nom de balise afin d'utiliser les feuilles de styles sur plusieurs balises :

.milieu { text-align: center }

Page HTML :

<h1 class="milieu">Gros titre centré</h1>
<p class="milieu">Paragraphe également centré</p>

L’attribut id

Contrairement Ă  la classe, l'id ne doit dĂ©signer qu'une seule balise dans la page. S’il y a plusieurs id identiques, c’est une erreur et seul le premier sera pris en compte. Du fait de son caractĂšre unique, le id servira traditionnellement Ă  dĂ©finir les mises en forme uniques, comme par exemple le positionnement d’un pied de page.

Comme pour les classes, on positionne un attribut id dans le code HTML et  # dans le code CSS. Par exemple, pour centrer une balise <h1> :

<button id="action">Ajouter</button>

Ensuite, on utilise # dans le code CSS :

#action { background-color: #aaa; }

La balise, son attribut et sa valeur

Il est possible d'identifier n'importe quelle balise avec son attribut et sa valeur. Une technique directe et efficace qui permet d'Ă©viter l'ajout de class et d'id dans le code HTML qui restera pur comme de l'eau de roche.

img[src="hamster.jpg"] {
 border-style:solid;
 border-color:orange;
}

Autres sélecteurs

Si vous voulez connaßtre d'autres sélecteurs, allez faire un tour sur les documentations complÚtes et officielles du W3.

Maintenant que vous comprenez la syntaxe, il est temps d'apprendre quelques feuilles de style incontournables.

Articles connexes