Comment appliquer du CSS à une page ?

Pré-requis

Création d'une page

Le corps de page doit être préalablement créé, afin que le CSS de page y soit rattaché.

Dans ce tutoriel, nous allons nous appuyer sur le corps de page my-first-page.body.php qui a déjà été créé dans le tutoriel Comment créer une page.

Appliquer du CSS à la page

Cette feuille de style ne sera appliquée qu'à la page my-first-page uniquement (la vue ./application/view/page/my-first-page.body.php). Pour appliquer le CSS à cette dernière :

aller dans le dossier racine des CSS : ./application/view/css/ ;
copier le fichier modèle _sample.css.php, puis le renommer en my-first-page.css.php. Le nom de ce fichier doit être le même que celui de la page sur laquelle la feuille de style sera appliquée (my-first-page.body.php) ;

éditer ce nouveau fichier, puis modifier son contenu en saisissant uniquement du code CSS sans balise HTML. Par exemple, nous allons changer la couleur du titre de la seconde section selon le jour de la semaine :

<?php 
/**
 * It is really cool to use PHP in a CSS file.
 * No need SASS, LESS or another pseudo-language to generate CSS code!
 */
$colors = [
	1 => 'yellow',
	2 => 'blue',
	3 => 'purple',
	4 => 'pink',
	5 => 'red',
	6 => 'brown',
	7 => 'grey'
];
?>

#body > section:nth-child(2) > h2 {
	color: <?= $colors[date('N')]?>
}

sauvegarder, puis actualiser la page. La couleur 1 correspond à lundi. Ici, le titre est en rouge, cela signifie que la page a été actualisée un vendredi :

Créer une page Ajouter du JS de page