Design web et CSS

Une feuilles de style CSS, pour Cascading Style Sheets, est un langage informatique de plus en plus utilisé dans la création de site internet et principalement dans leur présentation graphique et leur maintien.

Le design en CSS décrit la présentation des documents HTML, XHTML et XML suivant les standards publiés par le World Wide Web Consortium (W3C).

L'utilisation du CSS est indispensable pour le développement graphique des interfaces publiques de site web, appelées également « front end » afin de proposer un affichage de site esthétique et confortable à l’utilisation.

Création de site avec feuilles de style CSS

La feuille de style CSS envoie des signaux interprétés par le navigateur web (Chrome, Firefox, Safari, ou encore Microsoft Edge, qui transforme ce contenu brut en HTML en une page web. Si le site internet est développé en responsive Design ou en Adaptive Web Design, les signaux seront envoyés afin de rejoindre le type d’écran depuis lequel la feuille de style est appelée.

En effet, le web designer et le développeur multimédia (ou l’agence web) auront pour cela développé le site internet accompagné de plusieurs feuilles de style : pour les différents types d’écran, pour envoyer vers une imprimante, pour un lecteur Braille ...

L’avantage des feuilles de style dans la création d’un site web au design professionnel est la possibilité de mettre les feuilles de style en « cascade », entendez donner une priorité à chaque feuille de style afin que les couches suivantes interprètent ou surchargent la premier afin d’en modifier l’affichage ou le comportement.

Ainsi, les propriétés attribuées à une image, un lien, un titre ou plus largement à tout élément présent dans une page web seront transmises en tout ou partie aux éléments sous-jacents.

Autre avantage, et pas des moindres, est qu’il est possible de créer une feuille de style globale dans laquelle seront insérées toutes les règles générales telles que les couleurs du texte ou du fond d’écran, des boutons, des liens avant survol, au survol ou lorsqu’ils ont été cliqués et bien d’autres encore. Cette feuille de style globale est alors associée à chaque page web développée afin qu’elle ne soit chargée qu’une seule et unique fois, rendant le site bien plus rapide.

Si certains éléments ou fonctionnalités nécessitent une présentation spécifique, une feuille de style CSS dédiée peut être créée et appelée directement après les feuille de style principale.

Les feuilles de style CSS, à l’instar d’un fichier html, est un fichier rédigé en texte brut, entendez parfaitement lisible par la plupart des éditeurs de texte (Blocnote, Sublime Text, Notepad++, etc).

Il faut néanmoins maitriser les différents langages de programmation et les contraintes liées à chaque navigateur pour générer des feuilles de style compatibles avec la plupart.

En effet, malgré une grande compatibilité des feuilles de style CSS avec la plupart des navigateurs, certaines différences peuvent subsister suivant le navigateur, sa version ou encore le système d’exploitation sur lequel elles sont utilisées. Ainsi, Netscape ne réagit pas de la même manière qu’Internet Explorer, Chrome ou Firfeox, sous Windows ou sous Macintosh !

Choix de la feuille de style suivant le media

Comme vous l’aurez compris, la feuille de style CSS permet de définir le rendu graphique affiché au public d’une page ou d’un document suivant le media sur lequel il sera projeté mais aussi en rapport avec les capacités techniques de celui-ci, de celles du navigateur (texte ou graphique) ou encore suivant les préférences définies par l’utilisateur.

Les feuilles de styles CSS peuvent donc être différenciées suivant le média comme suit :

• all : la feuille de style CSS est interprétée de la même manière quel que soit le média ;
• screen : la feuille de style CSS est développée spécialement pour les écrans d'ordinateur de type « bureau » ;
• handheld : la feuille de style CSS est adaptée aux nombreux écrans de plus petite taille tels que les smartphones et tablettes;
• print : la feuille de style CSS est réalisée en vue d’une impression sur papier ;
• projection : la feuille de style CSS n’est interprétée que lorsque le document est projeté ;
• tv : feuille de style CSS utilisée spécifiquement pour les télévisions.