# 3 CSS pour un seul site

Trois feuilles de style distinctes sont combinées sur cette page Web. La feuille "simple-grid.css" est utilisée pour le positionnement des contenus et leur apparence visuelle, "luxbar.css" est utilisée pour styliser le menu de chaque page et "style.css" est utilisée pour personnaliser le tout.

## Combiner des feuilles de style : pourquoi ?

Combiner des feuilles de style permet de savoir clairement à quoi servent chacune d'elles. Combiner les feuilles de styles utilisées ici répond aussi, paradoxalement, à un objectif de simplicité. Ces feuilles de style ont été sélectionnées pour leur fonctionnalité sans code superflu.

On trouve des gabarits de pages Web sur divers sites de ressources (HTML5 UP, Pixelarity, etc). Souvent, les pages collectées sont visuellement intéressantes mais elles sont rarement simples à appréhender côté balisage HTML et codage CSS. Les concepteurs de ces templates utilisent de nombreuses classes CSS et beaucoup de code JavaScript !

Simple Grid et Luxbar font exception : pas de JavaScript dans le code ... et peu de classes CSS ! La combinaison de simple-grid.css et luxbar.css permet de réaliser des sites simples, responsives et d'allure plutôt sympatique. Le résultat ressemble un peu à ce que propose le site w3schools en utilisant la feuille de style w3css.

### En résumé

La disposition et une partie de la stylisation des contenus des pages de ce site repose sur les instructions CSS contenues dans la feuille de style intitulée `simple-grid.css`.

L'apparence du menu placé en tête des pages de ce site repose sur les instructions CSS contenues dans la feuille de style intitulée `luxbar.css`.

## Pourquoi une troisième feuille de style ?

Le choix d'une troisième feuille de style est motivé par le fait que simple-grid.css ne répond pas à tous les besoins. La feuille de style téléchargeable sur le site http://simplegrid.io/ prend bien en compte l'indispensable pour la mise en place des éléments sur la grille. Elle propose en bonus quelques éléments de stylisation pour les textes mais cela de suffit pas !

Aussi, pour finaliser ce site, il a été jugé nécessaire de créer une feuille de style complémentaire (nommée `"style.css"`). Cette dernière feuille de style paramètre notamment l'affichage du code au fil du texte, le rendu des liens et des boutons, le positionnement des images, etc.

Vous remarquerez aussi quelques instructions CSS internes, propres à chaque page du site (pour la couleur des titres h2, par exemple). Cela fait beaucoup de CSS... mais au moins les choses sont claires : on sait à quoi servent chaque feuille de style ! Et tout compte fait, cela demeure encore assez simple. 😊