Tutoriel CSS3 - sommaire

Tutoriel CSS3 gratuit et en français - chapitre introductif

CSS est incontournable en matière de programmation web.
Même si vous développez avec des langages "côté serveur" comme PHP ou Python, vous avez besoin de solides notions en CSS (et en HTML) ; un site écrit en PHP ou Python utilise des feuilles de style écrites en CSS.
Les propriétés CSS d'un élément HTML peuvent être manipulées via le JavaScript.

Par ailleurs le CSS ne s'applique pas qu'aux éléments HTML mais aussi aux objets SVG ; le SVG est un langage du web qui permet de réaliser de superbes dessins vectoriels pour le web.
Mon tuto sur le langage SVG

Le couple HTML & CSS

En utilisant uniquement les langages HTML & CSS vous pouvez déjà réaliser un superbe site (et avec des effets visuels : animations, carrousels, etc.)
Seul bémol : ce site ne sera pas interactif ; l'aspect d'une page web sera identique quelque soit le visiteur ; il est en effet impossible de manipuler une base de données avec HTML.
Ci-dessous deux exemples d'effets visuels réalisés uniquement en combinant HTML5 & CSS3.

Une animation 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

Un carrousel

Utilisez les boutons radio pour changer de "slide".
Pour tout savoir sur les animations via CSS

Démarrer en programmation web

Pour les grands débutants en HTML & CSS, je leur conseille de visiter d'abord mon tuto : débuter en programmation web (HTML & CSS & PHP)

Pour ceux qui souhaitent approfondir leurs connaissances dans le couple HTML & CSS je leur conseille de lire en parallèle avec le tuto CSS3 : didacticiel sur HTML5

Quid de JavaScript ?

Le CSS ne cesse de s'enrichir de nouvelles fonctionnalités. Désormais pour de nombreux effets graphiques le JavaScript devient inutile ; les nouvelles propriétés CSS gèrent les transitions et animations.
Cependant CSS a ses limites ; certaines modifications du DOM ne peuvent toujours pas être réalisées via CSS. Ainsi si vous voulez modifier les attributs de balises existantes OU rajouter ou supprimer des éléments au DOM ; il faut encore recourir à JavaScript.
À consulter également : mon tuto sur JavaScript

Les super pouvoirs de CSS

Les nouveautés introduites par la version 3 de CSS sont assez époustouflantes. Citons entre autres :
• de nouvelles unités de mesure très intéressantes : rem, vh, vw,fr
• le positionnement des boites dans la page était en CSS2 un vrai casse-tête ; CSS3 introduit deux nouveaux outils : grid-layout & flexbox.
• la norme CSS3 c'est aussi de nouvelles pseudo-classes très utiles
• beaucoup d'innovations aussi pour les boites et images avec de nouvelles propriétés pour découper, ombrer ces éléments
• le raccourci background est très enrichi
• le multicolonnage d'un texte se réalise désormais sans "prise de tête"
• possibilité d'utiliser des "propriétés personnalisées" ; des variables, si vous préférez
• imbrication possible des sélecteurs afin de réduire sensiblement le nombre de règles de style
• codage HSL des couleurs
• nouveaux effets pour le texte dont césure intelligente, sens de lecture, gestion des blancs, etc.
• les dégradés linéaires et radiaux
• filtres sur les images, boites
• 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, floutées,etc.

Exemple : une superbe toile impressionniste

Vous pensez que j'affiche une image (un fichier JPEG) et bien pas du tout.
Cette image est obtenue uniquement avec une unique instruction HTML et des règles de style CSS.
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>

Si vous ne comprenez rien à ce code, le parcours de ce tuto est nécessaire.

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.

L'implémentation de HTML 5 & CSS 3 par les navigateurs est progressive.
L’usage de nouvelles propriétés CSS non reconnues 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é.

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 en programmation web, 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"

Frameworks et préprocesseurs CSS

Les frameworks

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 temps d'apprentissage de l'outil.
Le framework CSS le plus célèbre est 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 outils 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é puis procède à la compilation de ce fichier (extension .scss) pour obtenir la feuille de style interprétable par le navigateur (fichier css).

Certaines fonctionnalités des préprocesseurs CSS sont en cours de transposition dans le CSS standard.
Ainsi tous les navigateurs récents comprennent désormais les "propriétés personnalisées" et l'imbrication des sélecteurs. Par contre les "mixins" et les fonctions ne sont pas encore implémentées.
CSS standard : propriétés personnalisées & imbrication des sélecteurs