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

CSS c’est quoi ? Développé par le W3C (World Wide Web Consortium) en 1996, il répond à une limite du HTML, qui n’était pas conçu pour styliser directement les pages web, mais uniquement pour structurer leur contenu.

Des balises comme <font> ont été introduites dans la version 3.2 de HTML, et cela a causé beaucoup de problèmes pour les développeurs web. En raison du fait que les pages web ont différentes polices, des arrière-plans colorés et de multiples styles, c’était un processus long, pénible et coûteux de réécrire le code. Ainsi, le CSS a été créé par le W3C pour résoudre ce problème.

Le CSS n’est pas techniquement une nécessité, mais vous ne voudriez probablement pas regarder une page web qui ne présente que des éléments HTML car elle paraîtrait complètement rudimentaire.

Le CSS c’est quoi ?

CSS signifie Cascading Style Sheets (feuilles de style en cascade) et est utilisé pour styliser les éléments écrits dans un langage de balisage comme HTML. Il sépare le contenu de la représentation visuelle du site. La relation entre HTML et CSS est étroitement liée puisque HTML est le fondement même d’un site, et CSS constitue toute l’esthétique.

Avantages du CSS sur les pages web

La différence entre une page web qui implémente le CSS et une qui ne le fait pas est énorme et très évidente.

Vous avez peut-être vu un site web qui ne se charge pas complètement et qui a un fond blanc avec la plupart du texte en bleu et noir. Cela signifie que la partie CSS de la page web ne s’est pas chargée correctement ou qu’elle n’existe pas du tout.

C’est à quoi ressemblent les pages web avec seulement du HTML, et je pense que vous conviendrez que ce n’est pas très attrayant.
Avant d’utiliser le CSS, toute la stylisation devait être incluse dans le balisage HTML. Cela signifie que les développeurs web devaient décrire séparément la couleur d’arrière-plan, la taille de police, les alignements, etc.

Le CSS vous permet de styliser tout sur un fichier différent, créant ainsi le design là-bas et intégrant plus tard les fichiers CSS par-dessus le balisage HTML. Cela rend le balisage HTML réel beaucoup plus propre et plus facile à maintenir.

En gros, avec les fonctionnalités CSS, vous n’avez pas besoin de décrire à plusieurs reprises l’apparence des éléments individuels. Cela fait gagner du temps, raccourcit le code et le rend moins sujet aux erreurs.

Le CSS vous permet d’avoir plusieurs styles sur une page HTML, rendant ainsi les possibilités de personnalisation presque infinies. De nos jours, cela devient plus une nécessité qu’un luxe.

Comment fonctionne le CSS ?

Le CSS utilise une syntaxe simple basée sur l’anglais avec un ensemble de règles qui le régissent. Comme nous l’avons mentionné précédemment, HTML n’a jamais été destiné à utiliser des éléments de style, seulement le balisage de la page. Il a été créé pour simplement décrire le contenu. Par exemple : <p>Ceci est un paragraphe.</p>.

Mais comment styliser le paragraphe ? La structure de syntaxe CSS est assez simple. Elle a un sélecteur et un bloc de déclaration. Vous sélectionnez un élément, puis déclarez ce que vous voulez en faire. 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.

Regardons un exemple :

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

<style>
p {
 color: blue;
 text-weight: bold;
}
<style>

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

<style>
p {
   text-align: center;
   font-size: 16px;
   color: pink;
  
}
</style>

Consultez notre aide-mémoire CSS pour plus d’exemples.

Parlons maintenant des différents styles de CSS. Il s’agit du style en ligne (Inline), externe (External) et interne (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, un lien sera disponible sous l’aperçu.

Commençons par parler du style interne. Les styles CSS réalisés de cette façon sont chargés chaque fois qu’un site web entier 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. Avoir tout sur une seule page facilite le partage du modèle pour un aperçu.

La méthode externe pourrait être la plus pratique. Tout est fait de manière externe sur un fichier .css. Cela signifie que vous pouvez faire toute la stylisation sur un fichier séparé et appliquer le CSS à n’importe quelle page que vous souhaitez. Le style externe peut également améliorer les temps de chargement.

Enfin, nous parlerons du style en ligne 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 pourrait ne pas être la meilleure ou la plus rapide façon de gérer le CSS. Mais cela peut s’avérer utile. Par exemple, si vous souhaitez modifier un seul élément, prévisualiser rapidement les modifications, ou peut-être que vous n’avez pas accès aux fichiers CSS.

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

Conclusion

Résumons ce que nous avons appris ici sur le CSS et comment il aide à 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 s’accorder à plusieurs pages à la fois.
• Vous n’irez pas loin sans voir une sorte d’implémentation CSS de nos jours, car c’est autant une exigence que le langage de balisage lui-même.

Dans l’ensemble, nous espérons que vous avez trouvé cet article utile, et si vous avez des questions, veuillez les laisser dans la section des commentaires ci-dessous.

FAQ sur le CSS