Le CSS c’est quoi, et comment ça marche ?

Les feuilles de style en cascade (CSS) sont un langage de programmation basé sur des règles développé par le World Wide Web Consortium (W3C) en 1996 pour une raison simple. Le langage HTML (HyperText Markup Language) utilisé pour formater et relier le contenu des pages web n’était pas conçu pour permettre des fonctionnalités avancées de mise en forme ou de mise en page.

Par exemple, l’introduction de la balise <font> dans la version 3.2 du HTML était une tentative pour permettre la mise en forme du texte, mais les concepteurs Web amateurs en ont abusé et il n’existait aucune option de secours comme celles qui sont désormais disponibles dans le CSS. La meilleure pratique actuelle consiste donc à séparer le formatage (HTML) et la mise en forme (CSS).

Le CSS n’est pas techniquement nécessaire, mais une page web qui ne comporte que des éléments HTML aurait un aspect très simple et dépassé. Poursuivez votre lecture pour en savoir plus sur le CSS.

Le CSS c’est quoi ?

CSS signifie Cascading Style Sheets (feuilles de style en cascade) et sert à styliser des éléments écrits dans un langage de balisage tel que HTML. Il sépare le contenu de la représentation visuelle du site. HTML est la base du contenu d’un site et CSS constitue l’ensemble de la conception visuelle et de l’esthétique.

Avantages du CSS sur les pages web

La différence entre une page web qui utilise le CSS et une autre qui ne l’utilise pas est énorme et très visible.

Vous avez peut-être déjà vu un site web qui ne s’affichait pas complètement, mais qui présentait un fond blanc avec du texte noir et des liens soulignés en bleu. Cela signifie que la partie CSS de la page web ne s’est pas chargée correctement ou qu’elle n’existe pas.

Avant l’utilisation du CSS, tous les styles devaient être inclus en ligne dans le balisage HTML. Cela signifie que les développeurs web devaient décrire la couleur, la taille de la police, l’alignement et tout le reste pour chaque bloc de texte de la page.

Le CSS vous permet de styliser une liste de règles de design dans un fichier séparé qui est référencé dans le balisage HTML. Cela rend le balisage HTML beaucoup plus propre et plus facile à maintenir.

En bref, le CSS évite d’avoir à décrire à plusieurs reprises l’apparence de chaque élément individuel. Cela permet de gagner du temps, de raccourcir le code et de le rendre moins sujet aux erreurs.

Le CSS vous permet également de hiérarchiser plusieurs styles sur chaque page HTML et même sur l’ensemble d’un site web, avec des exceptions pour différentes tailles d’écran, ce qui rend les possibilités de personnalisation presque infinies.

Comment fonctionne le CSS ?

Le CSS utilise une syntaxe simple et lisible, régie par un ensemble de règles. Comme nous l’avons déjà mentionné, le HTML n’a jamais été conçu pour utiliser des éléments de style, mais uniquement pour décrire la mise en forme du texte. Par exemple : <p>Ceci est un paragraphe.</p>.

Mais comment styliser le paragraphe ? La structure de syntaxe CSS est assez simple. Elle comprend un sélecteur et un bloc de déclaration. Vous sélectionnez un élément, puis vous déclarez ce que vous voulez faire avec. Assez simple, n’est-ce pas ?

Cependant, il y a des règles dont vous devez vous souvenir. Les règles de structure sont assez simples, alors ne vous inquiétez pas.

Le sélecteur pointe vers les éléments HTML que vous souhaitez styliser. Le bloc de déclaration contient une ou plusieurs déclarations séparées par des points-virgules.

Chaque déclaration comprend un nom de propriété CSS et une valeur, séparés par deux points. Une déclaration CSS se termine toujours par un point-virgule, et les blocs de déclaration sont entourés d’accolades.

Prenons un exemple :

Tous les éléments <p> seront colorés en bleu et mis en gras.

p {
 color: blue;
 text-weight: bold;
}

Dans un autre exemple, tous les éléments <p> seront alignés au centre, auront une largeur de 16 pixels et seront roses.

p {
   text-align: center;
   font-size: 16px;
   color: pink;
}

Passons maintenant aux différents styles CSS. Il existe les styles en ligne (inline), externes (external) et internes (internal).

Styles CSS internes, externes et en ligne

Nous allons passer brièvement en revue chaque style. Pour une explication approfondie de chaque méthode, vous trouverez un lien sous la présentation générale.

Commençons par le style interne. Les styles CSS créés de cette manière sont chargés à chaque fois que l’ensemble du site web est actualisé, ce qui peut augmenter le temps de chargement. De plus, vous ne pourrez pas utiliser le même style CSS sur plusieurs pages, car il est contenu dans une seule page. Cependant, cela présente également des avantages. Le fait que tout se trouve sur une seule page facilite le partage du modèle pour un aperçu.

La méthode externe est peut-être la plus pratique. Tout est fait en externe dans un fichier .css. Cela signifie que vous pouvez définir tous les styles dans un fichier séparé et appliquer le CSS à n’importe quelle page. Le style externe peut également améliorer les temps de chargement.

Enfin, nous aborderons le style en ligne ou inline du CSS. Le style en ligne fonctionne avec des éléments spécifiques qui ont la balise <style>. Chaque composant doit être stylisé, ce qui n’est peut-être pas la meilleure ni la plus rapide des méthodes pour gérer le CSS. En fait, cela ressemble beaucoup aux styles HTML en ligne que le CSS était censé remplacer. Mais cela peut s’avérer pratique. Par exemple, si vous souhaitez modifier un seul élément, prévisualiser rapidement les modifications ou si vous n’avez pas accès aux fichiers CSS.

Pour plus d’informations, consultez notre article détaillé sur les différents styles CSS.

Conclusion

Résumons ce que nous avons appris ici sur le CSS et comment il contribue à l’esthétique des pages web :

• Le CSS a été créé pour fonctionner en conjonction avec d’autres langages de balisage comme HTML. Il est utilisé pour styliser une page.
• Il existe trois styles d’implémentation CSS, et vous pouvez utiliser le style externe pour l’appliquer à toutes les pages d’un site.
• De nos jours, il est difficile de ne pas rencontrer une implémentation CSS, celle-ci étant presque aussi indispensable que le langage de balisage lui-même.

Nous espérons que cet article vous aura été utile. Si vous avez des questions, n’hésitez pas à les poser dans la section commentaires ci-dessous.

FAQ sur le CSS