Qu’est-ce que le CSS ?

Le CSS (langage de description) permet d’attribuer un design spécifique à tout élément du HTML, lui modifiant ses caractéristiques par défaut. Grâce à lui, il est possible de :

• changer des couleurs de titre,
• encadrer un contenu,
• attribuer une taille spécifique à un bloc,
• et pléthore d’autres manipulations allant même jusqu’à l’animation de contenu.

Cependant, attention !

Le CSS ne permet pas à lui seul de créer une page internet. C’est le travail du HTML de rendre lisible et structuré un texte par un navigateur Internet.

En résumé, le CSS, bien que véritable magicien visuel de la page web, ne se suffit pas à lui-même et requiert systématiquement son fidèle compagnon, le HTML.

Comment appliquer du CSS à sa page web ?

Le CSS sera interprété par le navigateur Internet, tant qu’il est reconnaissable par ce dernier au sein de la feuille HTML.

Une solution – assez peu efficace dès lors que le site atteint une certaine complexité dans son design – consiste à déclarer du CSS directement dans une balise HTML à l’aide de l’attribut style.

Autre possibilité, toujours au sein-même du fichier HTML, en appliquant le CSS dans une balise <style> qui décrira l’ensemble des règles visuelles souhaitées pour la page.

Mais ces options s’avèrent peu viables et maintenables puisque le CSS ainsi renseigné ne concernera :

• au mieux que la page où il est appliqué,
• et au pire les seuls éléments où il est déclaré.

Dès lors, il sera impossible de modifier l’ensemble des pages d’un site internet autrement qu’en reprenant un par un chaque fichier HTML – voire chaque élément du code HTML ! – où du CSS aura précédemment été intégré.

Il sera de fait davantage conseillé d’appeler une feuille de style dans la section head du fichier HTML, par le biais d’une balise <link>. Le CSS s’écrira donc dans un fichier à part, portant l’extension .css.

Cette méthode est clairement préférable aux autres. Puisqu’il suffira de modifier un seul fichier CSS pour que se répercute instantanément le style sur toutes les pages d’un site reliées au fichier.

Structure du CSS

Capable de modifier visuellement le moindre petit bout de code HTML, le CSS s’applique sur des sélecteurs du code, dès lors qu’ils sont correctement nommés et intégrés dans la feuille de style.

Là où le HTML se repère avec ses balises commençant par « < » et se terminant par « > », le CSS est reconnaissable par ses sélecteurs, suivis d’accolades « { » et « } » entourant ce qui est appelé une déclaration CSS (ou un bloc de déclarations CSS), à savoir des propriétés auxquelles viennent s’ajouter des valeurs après un double-point « : ».

Les sélecteurs

Ils sont primordiaux en CSS puisque ce sont eux qui permettent d’associer une ou plusieurs cibles dans le code HTML à un style visuel indiqué dans la feuille de style.

Il peut tout aussi bien s’agir de sections, d’éléments, de classes ou d’IDs, qui se reconnaîtront dans le CSS par des indicateurs précis :

• « . » pour une classe,
• et « # » pour un ID par exemple.

Sachant que tous les sélecteurs n’ont pas le même niveau de spécificité.

En effet, le CSS est régi par des règles de cascade et de spécificité si des valeurs contradictoires venaient à cibler un même élément, sachant qu’une déclaration CSS directement faite dans une balise HTML sera a priori la plus spécifique de toutes.

Concernant la cascade, c’est la valeur déclarée en dernier dans la feuille de style qui l’emporte sur toutes les autres dans le cas où ladite valeur concerne des sélecteurs de même niveau de spécificité. Si tel n’est pas le cas, c’est la valeur associée à l’élément le plus spécifique qui prévaut sur toutes les autres.

En HTML, le sélecteur d’éléments est peu spécifique avec, pour exemple :

• l’élément <p>, utilisé pour l’intégralité des paragraphes,
• le sélecteur de classe, quant à lui, peut être utilisé pour appliquer des règles de styles à plusieurs éléments HTML ciblés, le rendant prioritaire sur le sélecteur d’éléments,
• enfin, le sélecteur d’ID prendra le dessus, puisqu’un ID ne peut être associé qu’à un unique élément.

via GIPHY

Media Queries et responsive design

Lorsque l’on sait que les habitudes en matière de navigation Internet changent*, comment proposer un site qui soit agréable à parcourir sur tous les supports ?

Les Media Queries ont révolutionné l’accessibilité et la lisibilité d’un site internet en permettant à la répartition des éléments sur la page, permise par le CSS, de se modifier en fonction de l’appareil utilisé par l’internaute. L’application de règles spécifiques au périphérique accédant à la page internet s’appelle le responsive design.

Le CSS n’est dès lors plus figé à une page-type. Puisque plusieurs styles seront définis en fonction de la taille et de l’orientation de l’écran par exemple, à l’aide des règles Media Queries. Ces règles sont contenues dans la condition @media suivie du type de périphérique ciblé et ses critères spécifiques, dans un fichier CSS externe ou directement dans le fichier HTML.

Il est désormais très simple – pour une utilisation mobile par exemple –  de décider de :

• la disparition d’une grande image décorative dans la bannière,
• du déplacement d’un bloc informatif sous le bloc principal,
• ou de l’ajustement de la taille d’une police d’écriture.

Tout cela dans l’optique de rendre la navigation plus pratique et fluide, en supprimant la nécessité d’utiliser des barres de défilement horizontales ou d’user et d’abuser d’un zoom contre-intuitif.

Que sont SASS, PostCSS, Stylus ou LESS ?

Ce sont des préprocesseurs CSS. Ceux-ci permettent l’ajout de fonctionnalités inexistantes en CSS dans l’optique d’en optimiser l’écriture et le maintien.

Les préprocesseurs CSS permettent l’utilisation :

• de variables,
• de mixin (code paramétrable et réutilisable partout dans votre fichier SASS),
• ou encore la pratique du nesting (imbrication).

Ceux-ci diminuent considérablement le code à écrire pour le rendre davantage lisible et maintenable. Le code ainsi rédigé sera ensuite interprété par le préprocesseur, qui générera un code CSS assimilable par le navigateur Internet.

Pour en savoir davantage, nous vous renvoyons vers cet article plus complet.

Pour conclure sur le CSS

Nous l’avons vu, sans le CSS toutes les pages internet se ressembleraient et seraient – il faut le reconnaître – terriblement austères.

Les possibilités sont folles pour quiconque se donne la peine d’approfondir ce sujet. Bien que restant un langage de description, il n’en est pas moins complexe à parfaitement maîtriser de bout en bout. Tant il y a à découvrir et à connaître.

L’investissement en vaut cependant largement la peine, afin de rendre son site :

• unique, agréable,
• et parfaitement lisible sur tous types d’appareils.

 

*Plus de 50 % des sites web sont visités via un appareil mobile