CSS ? Ça vous dit forcément quelque chose si je vous dis HTML ? Nous avons déjà vu la définition de HTML et maintenant que vous avez compris, on peut poursuivre par le CSS. On essaye à nouveau de réfléchir au sens que l’on peut donner pour chaque lettre. On se creuse la tête pour en venir à la conclusion suivante : C pour Choice ? Le premier S pour Style et le deuxième pour Super ? Non, c’est incompréhensible ! CSS signifie Cascading Style Sheets, en français, feuille de style en cascade. Si vous voulez en savoir plus, poursuivez votre initiation au CSS.
- Signification de CSS
- Origine de CSS
- De quoi s’agit-il ?
- Les enjeux du CSS
- Les versions CSS
- Que faut-il pour créer du CSS ?
- Quelques propriétés CSS utiles
Signification de CSS
L’acronyme CSS signifie donc comme nous l’avons vu Cascading Style Sheets dans la langue de Shakespeare.
La transcription en français la plus proche est feuilles de style en cascade. Sauf qu’avec ça, vous n’êtes pas forcément plus avancé, n’est-ce pas ? Oui effectivement, ce n’est toujours pas clair. Voyons donc plus en détails de quoi il s’agit. Tout d’abord, le mot “Feuilles” équivaut aux fichiers ; ensuite, le mot “Style” implique la mise en forme d’éléments et enfin le mot Cascade”, signifie combinaison de différents styles appliqués pour le même document. Voilà, vous savez maintenant mot pour mot la définition de CSS, mais nous vous proposons, après avoir effectué un bref rappel de l’origine du CSS, d’entrer un peu plus dans le vif du sujet et de voir concrètement comment cela se présente et ce que vous pouvez faire grâce à ce langage informatique complémentaire de l’HTML.
Origine de CSS
Ce langage informatique est arrivé après le HTML. Le CSS est né en 1996 tandis que le HTML est né en 1991. Vous vous demandez donc comment les sites étaient mis en forme auparavant ? Tout simplement, en insérant des balises HTML adéquates (comme <font>) à la mise en valeur du site. Autrement dit, un méli-mélo de fond et de forme dans la même page ! Pas simple donc de s’y retrouver, même si, aussi bizarre que cela puisse paraître, les débuts du CSS n’ont pas eu un franc succès. En effet, les développeurs n’étant pas encore habitués à utiliser le CSS, ils n’ont pas tout de suite réussi à se séparer de leurs mauvaises manies pour adopter les bonnes méthodes permises par le CSS. Par ailleurs, on peut encore trouver de nombreux sites Web avec des balises désuètes.
De quoi s’agit-il ?
Le CSS est donc une feuille de style qui nous aide à mettre en forme le HTML. Il permet de sélectionner les éléments en HTML. En voici un exemple :
[pastacode lang=”css” manual=”body%20%7B%0A%20background-color%3A%20black%3B%20%0A%20font-family%3A%20Georgia%3B%20%0A%20font-size%3A%2030px%3B%0A%20%7D%0A%0Ah1%20%7B%0A%20font-size%3A%2060px%3B%20%0A%20color%3A%20blue%3B%20%0A%20text-align%3A%20center%3B%0A%20%7D%0A%0Ah2%20%7B%0A%20font-size%3A%2045px%3B%20%0A%20color%3A%20green%3B%20%0A%20padding-left%3A%2010px%3B%0A%20%7D” message=”” highlight=”” provider=”manual”/]Quand vous créez des lignes de code CSS, il faut bien faire attention à ne pas oublier les accolades et les points-virgules ! Même si certains éditeurs de texte vous indiquent quand il y a une erreur, il est néanmoins toujours judicieux de bien relire son code aussi bien en HTML qu’en CSS pour que l’écriture de code devienne un automatisme. À partir de là, créer un site Internet par vous-même ou en vous aidant d’une base offerte par l’intermédiaire d’un CMS open source deviendra un véritable jeu d’enfant !
Les enjeux du CSS
Le premier enjeu et le plus important dans la maîtrise du CSS est celui de pouvoir décomposer l’architecture d’un document de sa forme. On commence toujours par le fond avant la forme.
Le second enjeu est de définir le rendu stylistique d’un document en fonction du média et des préférences de l’utilisateur.
Le troisième et dernier enjeu est celui d’associer différentes sources de styles à un seul et même document, soit par origine des styles, soit par média soit selon la structure de l’ensemble du document.
Les versions CSS
À ce jour, le CSS a évolué quatre fois sans cesser de se renouveler avec les mises à jour :
- CSS 1 : ce premier niveau détaille une grammaire destinée à rendre possible l’ajout de nouvelles fonctionnalités, tout en acceptant l’interprétation des futures feuilles de styles par les exécutions d’origine.
- CCS 2 : de nouvelles propriétés permettent de faire intervenir les préférences de l’utilisateur dans la mise en forme d’un site.
- CSS 2.1 : c’est une version revisitée du CSS 2 pour corriger les problèmes rencontrés.
- CSS 3 : c’est la version actuelle. L’arrivée des “Médias Queries” facilite la transposition des sites Web sur tous les écrans. Une meilleure gestion des couleurs et la prise en compte de l’interface utilisateur sont les modules les plus avancés. Le responsive Web design (meilleure expérience utilisateur) n’a jamais été aussi simple grâce aux “Media Queries”.
Une version CSS 4 serait en cours de développement.
Que faut-il pour créer du CSS ?
Il faut un éditeur de texte (Sublime, Visual Studio Code, Atom…) et un navigateur internet comme Chrome, Explorer, Opera… (pour tester la page Web avec la mise en forme).
Il existe 3 solutions pour écrire du code en CSS :
- dans un fichier à part du HTML (que l’on peut nommer .css au niveau de l’extension et que l’on nomme souvent style au niveau du fichier (style.css est souvent le nom que vous retrouverez sur un site quand il n’y a qu’un seul fichier CSS)).
- dans l’en-tête <head></head> du fichier HTML.
- dans les balises <html></html> avec l’attribut style.
Il est fortement recommandé d’écrire la forme dans un fichier .css pour distinguer le HTML du CSS. Croyez-le ou non, vous vous perdrez moins en créant un fichier différent. Et surtout, outre le fait de moins se perdre (vos fichiers HTML n’en seront que plus lisibles du fait qu’ils ne comportent pas le CSS en leur sein), cela vous fera gagner un temps précieux quand vous devrez faire des modifications par la suite.
En effet, en regroupant les différentes mises en forme sur un fichier de style css, si vous voulez changer une couleur ou une taille de police, vous n’aurez qu’à modifier le fichier css pour que la modification soit opérée sur toutes les pages. Beaucoup plus rapide que si vous deviez aller modifier toutes les balises html de toutes vos pages pour y modifier la partie style qui s’y trouve.
Vous devez vous demander comment le fichier HTML lit le fichier CSS ? Et bien, il suffit d’écrire le code ci-dessous dans le fichier HTML. N’oubliez pas de renommer le fichier correspondant au nom que vous avez donné pour votre fichier CSS.
[pastacode lang=”markup” manual=”%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22…%20.css%22%20%2F%3E” message=”” highlight=”” provider=”manual”/]
Quelques propriétés CSS utiles
Changer la couleur de l’arrière-plan
[pastacode lang=”css” manual=”background-color%3A%20″ message=”” highlight=”” provider=”manual”/]Changer les bordures
[pastacode lang=”css” manual=”border%3A%20″ message=”” highlight=”” provider=”manual”/]Choisir la police de caractères (typographie)
[pastacode lang=”css” manual=”font-family%3A%20″ message=”” highlight=”” provider=”manual”/]Choisir la taille de la typographie
[pastacode lang=”css” manual=”font-size%3A” message=”” highlight=”” provider=”manual”/]Modifier la hauteur et la largeur d’un élément
[pastacode lang=”css” manual=”height%3A%0Awidth%3A” message=”” highlight=”” provider=”manual”/]Changer les caractéristiques d’une liste
[pastacode lang=”css” manual=”list-style%3A” message=”” highlight=”” provider=”manual”/]Déterminer l’alignement horizontal d’un texte
[pastacode lang=”css” manual=”text-align%3A%20″ message=”” highlight=”” provider=”manual”/]
Vous en savez davantage sur le CSS. Vous avez vu, ce n’est pas si compliqué que ça en a l’air. Il suffit de bien sélectionner les éléments et ensuite libre à vous d’aligner votre texte sur le côté droit ou encore de changer la couleur de fond de la page Web que vous voulez créer. Essayez de coder une page HTML liée à un fichier .css et voyez par vous-même ce que vous pouvez faire grâce aux propriétés citées plus haut. Maintenant que vous savez coder en HTML, vous pouvez vous amuser à mettre en forme votre page Web grâce au CSS.
En apprenant chaque balise html et chaque option pour mettre en forme que vous pouvez définir en CSS vous serez presque au point pour créer vous-même votre site Internet. Il s’agit là d’un excellent exercice à faire au moins une fois pour “se faire la main”, même si par la suite, autant par simplicité que parce qu’il n’est pas très utile de toujours chercher à réinventer la roue, vous pourrez vous appuyer sur des bases existantes que vous n’aurez plus qu’à customiser comme bon vous semble. C’est aussi parce que vous l’aurez déjà fait par vous-même que vous serez plus à l’aise et plus rapide pour le refaire sur une base existante.
