Tutoriel CSS - sommaire

Tutoriel CSS - introduction

HTML & CSS sont incontournables en matière de programmation web.
Même si vous développez avec des langages "côté serveur" comme PHP ou Python, les templates seront encodés en HTML et votre site web aura forcément une ou plusieurs feuilles de style codées en CSS.

Le présent tutoriel porte sur le CSS (Cascading Style Sheets) et plus précisément sur sa version 3.
C'est grâce à des règles écrites avec la syntaxe CSS que les pages d'un site sont mises en forme. En effet et à l'exception de quelques balises (B,S,I,U), le HTML ne gère plus la forme mais se contente de gérer le fond (sémantique et structure).
Le CSS ne cesse de s'enrichir de nouvelles fonctionnalités. Désormais on peut réaliser de véritables animations uniquement avec le couple HTML & CSS.
Le champ d'application du CSS est de plus en plus étendu ; vous pouvez animer des objets SVG via le CSS. Je précise que le SVG est un langage XML, pas assez connu, qui permet de dessiner dans des pages web. Vous trouverez dans ce même site un tutoriel sur SVG : dessinez avec SVG
Cependant CSS a ses limites ; certaines modifications du DOM ne peuvent pas être réalisées en CSS. Par exemple, si vous voulez manipuler les attributs des éléments ou rajouter/supprimer des éléments, il faut recourir au JavaScript.
Vous trouverez dans mon site, un tuto sur JavaScript (et son framework jQuery) : Tutoriel JavaScript

Nouvelles fonctionnalités de la version 3

Les possibilités offertes par CSS3 sont "bluffantes". Citons ci-dessous quelques outils introduits par cette version :
• grâce aux media queries un site devient "responsive" : les pages s'affichent de façon optimale sur n'importe quel écran
• le positionnement des boites dans la page était en CSS 2 un vrai casse-tête ;
  CSS 3 introduit deux nouveaux outils : grid-layout & flexbox.
• CSS 3 c'est aussi de nouvelles pseudo-classes utiles pour les tableaux, les formulaires et la numérotation des titres
• beaucoup de nouveautés aussi pour les boites avec les propriétés border-radius, box-shadow, clip-path, box-sizing, border-image, ...
• la propriété background est très enrichie
• le multicolonnage
• possibilité d'utiliser des "propriétés personnalisées" (variables)
• codage HSL des couleurs
• nouveaux effets pour le texte dont césure intelligente, sens de lecture, gestion des blancs, etc.
• dégradés radiaux et linéaires pour les éléments de type "bloc"
• filtres sur les images
• découpage d'images et de zones de texte
• transformations 2D et 3D
• transitions et animations
• etc.

Dessiner avec CSS

Les possibilités graphiques de CSS sont toujours plus étendues. Citons quelques exemples :
• les boites ne sont pas forcément des rectangles mais peuvent prendre des formes diverses
• l'arrière-plan d'un boite peut être un superbe dégradé
• les images peuvent être découpées de façon originale
• les images et boites peuvent être ombrées

Une superbe toile impressionniste

La page web ci-dessus (contenue dans un Iframe) ne comprend pratiquement que du code CSS.
Il a suffi d'utiliser les propriétés : background, border-image, box-shadow,etc.
Je vous communique le code ci-dessous. ... <style> #cadre { border-image-source:url("border2.png"); border-image-width:50px; border-image-repeat:stretch; border-image-slice:100; } #cadre {height : 500px ; width : 60%; margin : 10px auto ; box-shadow : -20px -20px 20px gray; } ... <div id ="cadre" style ="background-image : radial-gradient(farthest-corner circle at center, yellow 0%, aqua 25%, skyblue 50%);"> </div>

Vous ne comprenez rien à ce code, alors parcourez le tuto !

Animer avec CSS

Compte tenu de la puissance de CSS3, il est possible désormais de dessiner et d'animer uniquement avec le couple HTML & CSS.
Ci-dessous deux animations HTML & CSS (sans aucun script).

Première animation

Ci-dessous une animation en 3D.

Un avion survole la piste d'atterisage en rase-motte. Et à la fin il "crève" l'écran.
Le code de cette animation 3D

Deuxième animation HTML5 & CCS3

Il s'agit d'une animation 2D.

Vous connaissez tous les "boules de neige" que l'on trouve dans les boutiques de souvenirs.

Je tiens à préciser d'emblée que je suis l'auteur de la prmière animation mais pas de la seconde.
Concernant cette seconde, je me suis contenté de recopier le code sur un site très intéressant (lien ci-dessous).
Le code est un peu lourd mais c'est assez logique ; il faut dessiner la maison avec moultes détails, les arbres, les flocons, animer les flocons.
Et oui on peut dessiner avec CSS 3. L'élément DIV crée par défaut un rectangle mais avec certaines propriétés on peut transformer ledit rectangle en cercle (border-radius), en parallélogramme, losange (transformations). On peut superposer les éléments avec z-index, les ombrer, les colorier avec un dégradé, etc.
Suivez le lien : 24 animations CSS

Objet du tuto "CSS"

Les nouveautés apportées par la version 3 de CSS sont époustouflantes. Mais et c'est le revers de la médaille, le CSS est de plus en plus complexe.
Il faut noter en parallèle la formidable évolution de HTML (avec la norme HTML 5).
Désormais les choses sont claires : le HTML ne s'occupe que du contenu et le CSS gère la mise en forme et entre autres l'affichage sur les petits écrans.

L'implémentation de HTML 5 & CSS 3 par les navigateurs est progressive.
L’usage de nouveaux éléments/attributs HTML OU de nouvelles propriétés CSS non reconnus par votre navigateur ne bloquera pas l'affichage de la page. Ce dernier ignora les nouvelles propriétés CSS et adoptera un mode dégradé pour le HTML inconnu.

Conseils

Si vos connaissances en CSS sont sommaires, lisez d'abord les pages de la partie "révisions CSS2".
Si vous êtes grand débutant, vous vous êtes trompé de tuto. Visitez d'abord (dans le même site) : Débuter en programmation web

CSS3 et les vieilles versions des navigateurs

Même sur les versions récentes des navigateurs toutes les nouveautés postérieures à la version 2.1 ne sont pas encore implémentées.
Il est facile de tester dans une feuille de style si le navigateur sait (ou ne sait pas) interpréter une nouvelle propriété CSS en écrivant du "CSS conditionnel" :
Exemple de style conditionnel : .coupure {word-break : break-all ;} @supports (hyphens :auto) {.coupure {word-break:normal; hyphens : auto;}}

Il faut produire deux règles de style et la deuxième démarre avec @support(propriété) (règle de style conditionnelle).
Ici on définit une classe "coupure" puis on pose un test dans la deuxième règle qui peut s'énoncer ainsi :
pour la classe 'coupure', si hyphens implémentée alors propriété word-break désactivée et propriété hyphens réglée à "auto"

Les frameworks CSS

Un framework CSS propose des feuilles de style donc des styles par défaut pour les différents éléments HTML mais aussi des classes.
Un framework CSS permet donc de développer plus rapidement un site. Cependant l'utilisation d'un framework CSS suppose quand même une bonne connaissance du CSS et nécessite un apprentissage du framework.
Le framework CSS le plus célèbre est Boostrap qui est développé par Twitter.
Quelques mots sur Boostrap

Les préprocesseurs CSS

On peut reprocher au CSS actuel de ne pas être assez ergonomique. La maintenance d'une feuille de style peut s'avérer chronophage. Aussi des préprocesseurs CSS sont proposés aux développeurs web.
Un préprocesseur CSS est un programme qui permet de générer du CSS standard ; un préprocessur propose quelques fonctionnalités qui qui ne sont pas encore implémentées dans le CSS standard.
Le plus célèbre est SASS. Le développeur écrit un pseudo code CSS simplifié et structuré (règles de style imbriquées, variables, etc. ) puis procède à la compilation de ce fichier (extension .scss) pour obtenir la feuille de style interprétable par le navigateur (fichier css).

Dans un futur proche ces outils devraient nativement être disponibles dans le CSS. C'est déjà le cas du module "custom properties". qui permet d'utiliser des variables CSS et d'un autre module qui permet de factoriser le code.
Améliorations récentes du CSS