Après avoir passé toute une première partie du cours à ne travailler que sur le HTML, nous allons maintenant découvrir le CSS qui se présente actuellement dans sa version 3.
Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit et met en forme la présentation des documents HTML. Les standards définissant CSS sont publiés par le World Wide Web Consortium ou W3C. Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web depuis les années 2000.
Au demeurant restons prudents car les navigateurs ne connaissent pas toutes les propriétés CSS qui existent et plus le navigateur est d'une ancienne version, moins il connaît de fonctionnalités CSS récentes. Au pire, si le navigateur ne connaît pas une propriété CSS, il l'ignore et ne met pas en forme. Cela ne compromet pas l'accès à votre page : celle-ci sera lisible mais différemment.
Le Web serait d'un ennui terrible si tous les sites ressemblaient à la première page, ci-dessous. Grâce aux CSS, vous pouvez contrôler exactement l'affichage de chaque élément HTML dans le navigateur et ainsi présenter vos documents avec la mise en forme de votre choix.
Avant : la page d'accueil du site Graphisme en HTML seul
Après : la page d'accueil du site Graphisme en HTML et CSS
Pour écrire le code CSS vous avez le choix de la destination car on peut l'écrire à trois endroits différents :
- Dans un fichier .css (méthode recommandée).
- Dans l'en-tête <head> du fichier HTML.
- Directement dans les balises du fichier HTML via un attribut style(méthode obsolète).
Nous allons découvrir ces trois méthodes, mais sachez d'ores et déjà que la première… est la plus professionnelle et adaptée aux besoins de la production d'un site comprenant de nombreuses pages HTML.
1a - Écrire le style dans un fichier .css
Comme je l'ai précisé dans le paragraphe précédent, on écrit le plus souvent le code CSS dans un fichier indépendant ayant l'extension .css. C'est la méthode la plus pratique et la plus souple.
Avec le CSS externe, vous liez vos pages Web à un fichier .css externe, qui peut être créé par n’importe quel éditeur de texte sur votre appareil (mais personnellemnt je recommande un éditeur plus performant : Visual Studio Code). Ce type de CSS est une méthode plus efficace, notamment pour styliser un grand site Web. En modifiant un seul fichier .css, vous pouvez ainsi changer tout votre site en une seule fois.
Commençons la pratique à partir du fichier HTML suivant :
<body>
<h1>Est nihil quo</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Eveniet perferendis <em>lautium</em> harum ipsam ratione, est nihil quo quod exercitationem magni.</p>
</body>
</html>
Repérez particulièrement le contenu de la ligne de code <link rel="stylesheet" href="style.css"> qui indique que ce fichier HTML est associé à un fichier externe appelé style.css chargé de la mise en forme du site.
Pour que cette méthode soit complètement opérante, vous devez impérativement créer avec votre éditeur de code un fichier de styles enregistré au format .css. qui sera nommé : style.css. Il peut, pour la démonstration, prendre l'aspect suivant (ici marqué en orange) :
p { font-size: 1em; text-align: justify; color: orange; }
1b - Écrire le style dans l'entête <head>
Il existe une autre méthode pour utiliser du CSS dans ses fichiers HTML : cela consiste à insérer le code CSS directement dans une balise <style> à l'intérieur de l'en-tête <head> de votre page HTML.
Cette méthode, nommée CSS interne ou intégré, est efficace pour styliser une seule page. Toutefois, l’utilisation de ce style pour plusieurs pages prend beaucoup de temps, car vous devez placer des règles CSS sur chaque page de votre site internet ce qui rend les corrections parfois ardues et chronophages.
Voici comment s'écrit un style interne (ici marqué en orange) dans le <head> de votre page HTML :
<body>
<h1>Est nihil quo</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Eveniet perferendis <em>lautium</em> harum ipsam ratione, est nihil quo quod exercitationem magni.</p>
</body>
</html>
1c - Écrire le style dans les balises du fichier HTML
Cette dernière méthode (obsolète de nos jours) nommée CSS inline ou imbriqué permet d'ajouter un attribut style à n'importe quelle balise dans le corps du HTML de votre <body>.
Attention, la gestion de votre site peut devenir très difficile si vous n’utilisez que ce style.
Voici comment insérer votre code CSS (ici marqué en orange) directement dans l'attribut style des balises <h1> et <p> :
<body>
<h1 style="font-size: 2em; font-weight: 700; color: blue;">Est nihil quo</h1>
<p style="font-size: 1em; text-align: justify; color: orange;">Lorem ipsum dolor sit amet.</p>
<p style="font-size: 1em; text-align: justify; color: orange;">Eveniet perferendis <em>lautium</em> harum ipsam ratione, est nihil quo quod exercitationem magni.</p>
</body>
</html>
2 - La syntaxe du CSS
CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page. Par exemple, « les paragraphes de ma page seront justifiés et de couleur rouge foncé. »
Dans le code suivant, une règle CSS concrétise cette mise en forme :
p { text-align: justify; color: darkred; }
le sélecteur, la propriété et la valeur
Dans l'exemple ci-dessus, la règle commence par un sélecteur : p, qui est l'élément HTML qui sera mis en forme et modifiera l'ensemble des paragraphes de mon corpus textuel.
Suivent une paire d'accolades { } à l'intérieur desquelles on trouve une ou plusieurs déclarations, sous la forme d'une paire propriété: valeur, ici : text-align: justify; et color: darkred;.
Chaque paire précise une propriété de l'élément sélectionné, suivie de la valeur choisie pour cette propriété ; la propriété et la valeur sont séparées par deux points.
Chaque déclaration se termine par un point-virgule. À chaque propriété définie par CSS correspondent différentes valeurs possibles. Dans l'exemple : - la propriété text-align peut prendre les valeurs left, center, right et justify et - la propriété color accepte différentes valeurs : green, yellow, cyan, etc.
3 - Appliquer un style : sélectionner une balise
Maintenant que vous savez où placer le code CSS, intéressons-nous de plus près à ce code développé au sein d'une feuille de style. Rappelons que dans un code CSS nous trouvons trois éléments intrinsèquement liés :
- le nom de la balise ou le sélecteur. Par exemple, si je veux modifier l'apparence de tous les paragraphes <p>, je dois écrire p ;
- la propriété CSS ou l'« effet de style » de la page est rangé dans une propriété. Il y a par exemple la propriété text-align qui règle l'alignement du texte, color qui agit sur la couleur du texte, etc. Il y a de nombreuses propriétés CSS et seul le temps de la pratique vous familiarisera davantage avec ces propriétés et ces valeurs.
- la valeur : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la propriété text-align, la valeur sera a choisir entre left, center, right et justify. Pour color, il faut indiquer le nom de la couleur (mot-clés, hexadécimale, rgb) : SpringGreen, #00ff7f, rgb(0,255,127).
le sélecteur, la propriété et la valeur
Schématiquement, une feuille de style CSS ressemble donc à cela :
Tout ce qui vient d'être montré a quand même un défaut : TOUS les paragraphes possèdent la même présentation (ici, ils seront donc de couleur darkgrey).
Comment faire pour que certains paragraphes soient, au moins, de couleurs différentes ?
Pour résoudre le problème, on peut convoquer des attributs spécifiques qui fonctionneront sur toutes les balises :
- l'attribut class, sélecteur de classe, (avec un point devant son nom) et
- l'attribut id, sélecteur d'identifiant, (avec un dièse devant son nom).
Attention les attributs class et id sont quasiment identiques. Néanmoins, il réside une légère différence dans leur usage : le premier, class, peut être convoqué x fois par les éléments HTML de votre page alors que id ne peut l'être qu'une seule fois !
Pour formaliser la démonstration, nous allons nous intéresser à l'attribut class. La syntaxe utilisée (sélecteur + propriété + valeur) sera la même pour l'id. Cet attribut peut être positionné sur n'importe quelle balise, aussi bien titre que paragraphe, image, etc.
Pour introduire l'attribut class vous devez écrire un nom qui sert à identifier la balise. Ce nom émane de votre manière de penser le projet et surtout… de vous y retrouver. Attention, le nom doit commencer par une lettre.
<body>
<h1>Est nihil quo</h1>
<p>Lorem ipsum dolor sit amet.</p> <p class="introduction">Eveniet perferendis <em>lautium</em> harum ipsam ratione, est nihil quo quod exercitationem magni.</p>
</body>
</html>
Avant de clore cette quatrième partie, faisons un détour vers les balises universelles qui nous permettent d'appliquer une class ou une id de façon très ponctuelle sur quelques mots, des exceptions du texte.
En effet, le problème de class ou d'id, c'est qu'il s'agit d'un attribut. Vous ne pouvez donc en mettre que sur une balise. Si, par exemple, je veux modifier uniquement « dnmade trois » dans le paragraphe suivant :
<p>La formation en dnmade trois est excellente mais éprouvante.</p>
Pour réaliser cette exception, nous pouvons convoquer deux balises dites universelles, qui n'ont aucune signification particulière :
- <span></span>, balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte pour sélectionner certains mots uniquement. Cette balise s'utilise donc au milieu d'un paragraphe et c'est celle dont nous allons nous servir pour colorer « dnmade trois » avec la couleur nommée DeepPink.
- <div></div>, balise de type block, qui entoure un bloc de texte : elle crée un nouveau « bloc » dans la page et provoque donc obligatoirement un retour à la ligne.
Pour le moment donc, nous allons utiliser plutôt la balise <span> . On la met autour de « dnmade trois », on lui ajoute une classe (du nom qu'on veut), on crée le CSS et c'est gagné !
<p>La formation en <span class="important">dnmade trois</span>est excellente mais éprouvante. Et c'est peu dire !</p>
côté HTML
.important { color: deeppink; }
côté CSS
5 - Appliquer un style : les sélecteurs avancés
En CSS, le plus difficile est de savoir cibler le texte dont on veut changer la forme. Pour cibler les éléments de la page à modifier, on utilise ce qu'on appelle des sélecteurs. Nous en avons déjà utilisé quelques uns et nous allons, rapidement, les énumérer : p, h1, em… Et enfin, nous avons vu comment sélectionner des balises précises à qui nous avons donné un nom, grâce aux attributs class et id.
Mais il existe bien d'autres façons de cibler des balises en CSS et voici déjà de quoi vous permettre d'être plus efficace en CSS : les sélecteurs avancés :
- * : le sélecteur universel qui embrasse toutes les balises sans exception.
* { … }
côté CSS
- X Y : une balise contenue dans une autre. Dans l'exemple, ci-dessous, on sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3> . Notez qu'il n'y a pas de virgule entre les deux noms de balises.
h3 em { … }
côté CSS
<h3>Titre avec <em>texte important</em></h3>
côté HTML
- X + Y : une balise qui en suit une autre. Dans l'exemple, ci-dessous, on sélectionne la première balise <p> située après un titre <h3>
