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.

Variables

Il est possible de déclarer des variables qui seront utilisées fréquemment dans le code. C'est très utile pour déclarer les codes couleurs en amont du code.

Déclaration

Pour que les variables soient utilisables partout, déclarez-les en amont de votre code dans le sélecteur global :root :

:root {
  --bleu: #6495ed;
  --blanc: #faf0e6;
}

Usage

Ensuite, utilisez simplement ces variables avec la fonction var() :

body {
  background-color: var(--bleu);
}

h1 {
  color: var(--blanc);
}

Voilà qui est très utile pour les déclarer les codes couleur d'une charte graphique. Si l'on souhaite changer une couleur par la suite, il suffira de la modifier une seule fois en amont du code.