Qu’est-ce que le CSS ? Dé­fi­ni­tion et ap­pli­ca­tion

Cascading Style Sheets (CSS) est un langage de pro­gram­ma­tion qui vous permet de dé­ter­mi­ner la design des documents élec­tro­niques. À l’aide de simples ins­truc­tions, pré­sen­tées dans des codes sources clairs, les éléments de la page Web comme la mise en page, la couleur et la police peuvent ainsi être modulés à souhait. Grâce aux feuilles de style en cascade, la structure sé­man­tique et le contenu du document restent to­ta­le­ment intacts. CSS a été lancé au milieu des années 90 et est à présent considéré comme le langage de feuilles de style standard sur le World Wide Web.

Tout comme le HTML, le CSS est l’un des langages de base du World Wide Web. Alors que vous utilisez le langage HTML pour remplir une page Web de texte et le formater de manière sé­man­tique, vous utilisez le langage CSS pour définir le design de ce contenu. Même si les deux langages sont utilisés en parallèle, les ins­truc­tions de con­cep­tion CSS et les éléments HTML existent sé­pa­ré­ment. Cela signifie qu’une machine peut lire un document élec­tro­nique sans CSS. Le CSS est utilisé pour préparer vi­suel­le­ment le contenu qui s’ouvre dans le na­vi­ga­teur pour une pré­sen­ta­tion at­trayante.

CSS est un « living standard » (standard vivant) et est con­ti­nuel­le­ment développé par le World Wide Web Con­sor­tium. Il existe donc toujours de nouvelles fonctions et ap­pli­ca­tions pratiques à découvrir. Très répandu, le langage de feuille de style a été créé dans les années 1990. À l’époque déjà, l’idée d’utiliser des feuilles de style pour afficher du contenu Web n’était plus tout à fait nouvelle. Mais le CSS différait des autres outils de pré­sen­ta­tion qui exis­taient déjà dans le langage HTML sur un point important : il per­met­tait aux uti­li­sa­teurs de définir des règles de con­cep­tion pour des groupes d’éléments dans plusieurs documents et dans une seule feuille de style.

Un bon site Web ne repose pas seulement sur son contenu, mais aussi sur son design. S’il n’est pas agréable ou attrayant, les uti­li­sa­teurs se dé­sin­té­res­sent ra­pi­de­ment. Dans ce contexte, les CSS offrent un certain nombre d’options de con­cep­tion qui ne sont pas dis­po­nibles en HTML pur.

Par exemple, le CSS vous permet de contrôler certaines spé­ci­fi­ci­tés de manière cen­tra­li­sée. Cela signifie que des éléments si­mi­laires (comme les hy­per­liens ou les images) au sein d’un même document sont reconnus et formatés par une seule commande. Les ins­truc­tions de formatage ne doivent pas né­ces­sai­re­ment exister sous la forme d’une feuille de style interne dans le document HTML lui-même. Si vous en­re­gis­trez les ins­truc­tions CSS dans une feuille de style externe, c’est-à-dire dans un fichier séparé, vous pourrez également les utiliser pour d’autres documents.

Au-delà des ins­truc­tions élé­men­taires d’affichage qui affectent les couleurs, les formes et la police des éléments HTML, il existe désormais des modules CSS plus so­phis­ti­qués. Grâce à elles, vous pouvez, par exemple, définir des ani­ma­tions ou des re­pré­sen­ta­tions dif­fé­rentes en fonction du média de sortie. De cette façon, le même document HTML peut être préparé de manière identique pour tous les médias possibles. Comme le contenu et le design sont séparés dans ce document, le code du site Web est plus clair. Le langage de feuille de style SASS offre encore plus de pos­si­bi­li­tés, mais il ne remplace toutefois pas com­plè­te­ment le CSS.

Comme mentionné pré­cé­dem­ment, il est possible d’in­cor­po­rer le CSS dans un document élec­tro­nique par le biais de feuilles de style internes et externes. En outre, il existe également un style en ligne, où les pro­prié­tés sou­hai­tées sont placées di­rec­te­ment dans le code source HTML d’un élément. Voici un aperçu des trois méthodes possibles pour intégrer du CSS dans un document HTML.

Ici, les dé­cla­ra­tions CSS sont définies dans des fichiers externes ayant l’extension « .css » et intégrées dans le fichier HTML à l’aide d’une balise « link ». Il s’agit de la méthode la plus répandue, car le contenu et la con­cep­tion sont nettement séparés et il est plus facile de faire des mo­di­fi­ca­tions. Le lien est établi dans la zone « head » du document HTML comme suit :

Vous placez ici toutes les dé­cla­ra­tions CSS dans le fichier HTML lui-même. N’oubliez pas qu’elles ne s’ap­pli­que­ront alors qu’au document en question. Pour les feuilles de style internes, insérez l’élément « style » dans la zone « head » du document HTML comme suit :

Tout comme dans la feuille de style interne, les dé­cla­ra­tions CSS se trouvent ici dans le fichier HTML lui-même. Toutefois, il existe une dif­fé­rence im­por­tante : les attributs cor­res­pon­dants sont situés di­rec­te­ment dans la balise de début des éléments et ne s’ap­pli­quent à aucun autre élément. Cette méthode est par­ti­cu­liè­re­ment utile si vous ne souhaitez pas faire de dé­cla­ra­tions de con­cep­tion globales.

En précisant la taille, la forme et la couleur, ces « boîtes » sont ensuite mises en forme en con­sé­quence. En com­plé­ment de ces attributs simples, il existe toutefois des ins­truc­tions CSS plus so­phis­ti­quées pour ajouter des ombres au texte, des fonctions de filtrage aux images et la mise en évidence des champs de for­mu­laire et d’autres éléments