Formation CSS3

Le CSS est le langage qui donne leur apparence aux pages web : couleurs, textes, mises en page, animations. Cette formation vous apprend à l'utiliser avec les techniques actuelles pour concevoir des pages soignées, qui s'adaptent automatiquement aux ordinateurs, tablettes et mobiles, et dont le code reste simple à faire évoluer. Programme personnalisable selon vos besoins.

Famille Web / Digital
Programme en PDF Télécharger

Informations pratiques

Programme de formation
Personnalisation:
Le programme peut être modifié en fonction de vos besoins et de vos objectifs sur le contenu, la durée, les modalités, les moyens pédagogiques et techniques.

Les fondamentaux du CSS aujourd'hui Jour 1 - matin
- Le rôle du CSS et son évolution : de CSS2 aux modules de CSS3 actuels
- La compatibilité des navigateurs : MDN et Can I use
- Où placer son code : feuille de style externe, balise style, style intégré
- Écrire une règle : sélecteur, propriété, valeur, commentaires
- L'environnement de travail : Visual Studio Code et outils de développement du navigateur (inspecteur)
Les sélecteurs, la cascade et la spécificité Jour 1 - matin
- Les sélecteurs de base : balise, classe, identifiant, universel
- Les sélecteurs d'attribut et les combinateurs : descendant, enfant, frères
- Les pseudo-classes : :hover, :focus-visible, :nth-child, :not, :is, :has
- Les pseudo-éléments : ::before, ::after, ::marker
- L'héritage, la cascade et le calcul de la spécificité
- Gérer les conflits de règles avec les couches de cascade (@layer)
Organiser et factoriser son CSS Jour 1 - matin
- Les variables CSS (propriétés personnalisées) : couleurs, espacements, polices
- L'imbrication native des règles (CSS nesting)
- Une feuille de style de base (reset) et la convention de nommage BEM
- Structurer ses fichiers CSS
- Atelier : définir la charte graphique d'une page avec des variables
Le modèle de boîte, les unités et la typographie Jour 1 - après-midi
- Le modèle de boîte
  - Contenu, padding, bordure et marge
  - box-sizing, fusion des marges, débordements (overflow)
  - Les types d'affichage : block, inline, inline-block
- Les unités
  - Absolues et relatives : px, em, rem, %, vh, vw, dvh
  - Dimensionnement fluide avec min(), max() et clamp()
- Le texte
  - Police, taille, graisse, interlignage, alignement, décoration
  - Les polices personnalisées : @font-face, polices variables, font-display
Couleurs, arrière-plans et effets visuels Jour 1 - après-midi
- Les couleurs : hexadécimal, RGB, HSL et transparence
- Les arrière-plans : images, taille, positionnement, arrière-plans multiples
- Les dégradés linéaires, radiaux et coniques
- Bordures, coins arrondis et ombres (box-shadow, text-shadow)
- Les filtres et l'opacité
- Atelier : habiller des cartes avec dégradés, coins arrondis et ombres
Le positionnement et la superposition Jour 1 - après-midi
- Le flux normal des éléments
- Les positions relative, absolue, fixe et sticky
- La superposition avec z-index
- Atelier : en-tête collant et bouton flottant
Flexbox : la mise en page en ligne ou en colonne Jour 2 - matin
- Principe : conteneur, éléments et axes
- Direction, retour à la ligne et espacement (gap)
- Alignement : justify-content, align-items, align-self
- Dimensionnement des éléments : flex-grow, flex-shrink, flex-basis
- Cas pratiques : barre de navigation, cartes alignées, centrage parfait
CSS Grid : la mise en page en grille Jour 2 - matin
- Définir des colonnes et des lignes : grid-template, fr, repeat, minmax
- Placer les éléments : lignes de grille et zones nommées (grid-template-areas)
- Grilles adaptatives avec auto-fit et auto-fill, grilles imbriquées (subgrid)
- Choisir entre Flexbox et Grid
- Les colonnes de texte et l'ancienne méthode float : les reconnaître dans un code existant
- Atelier : mise en page complète d'une page avec Grid et Flexbox
Le responsive web design Jour 2 - après-midi
- L'approche mobile first et la balise viewport
- Les media queries : largeur, orientation, préférences de l'utilisateur (mode sombre, animations réduites)
- Les container queries : adapter un composant à la taille de son conteneur
- Images et typographie adaptatives
- Un menu de navigation adaptatif
- Panorama des frameworks CSS (Bootstrap, Tailwind CSS) : quand les utiliser
Transformations, transitions et animations Jour 2 - après-midi
- Les transformations 2D et 3D : translate, rotate, scale, perspective
- Les transitions : durée, courbe d'accélération, effets au survol
- Les animations : @keyframes et propriétés d'animation
- Animations liées au défilement de la page (scroll-driven animations) : panorama
- Animer avec performance et respecter la préférence d'animation réduite
Projet de synthèse et bonnes pratiques Jour 2 - après-midi
- Réalisation guidée d'une page complète, adaptative et soignée
- Déboguer avec les outils de développement du navigateur
- Valider son code (validateur W3C) et auditer sa page (Lighthouse)
- Vérifier la compatibilité et prévoir des solutions de repli (@supports)
- Questions / réponses et synthèse de la formation
Formation ajoutée le 24/06/2014, mise à jour le 19/10/2026
Pour qui ?

Prérequis
Connaissances de base du langage HTML (balises courantes, structure d'une page) et de l'environnement Windows, Mac ou Linux.

Public
Webmasters, graphistes, responsables communication, développeurs front-end débutants, passionnés du web et autodidactes souhaitant maîtriser le langage CSS.
Objectifs, moyens, modalités, sanction, adaptation PSH
Objectifs :

Être capable de mettre en forme des pages web avec CSS3 (sélecteurs, boîtes, typographie, couleurs), de réaliser des mises en page modernes avec Flexbox et Grid, de les adapter à tous les écrans (responsive), d'ajouter des transitions et animations sobres, et d'organiser un code CSS clair et facile à maintenir.

Moyens pédagogiques :

Un PC par personne, le formateur diffuse son écran sur un vidéo-projecteur ou télévision grand écran
Un groupe de maximum 5 personnes en inter-entreprise.
En distanciel : Utilisation de Zoom ou Teams avec partage d'écran, chat, audio et vidéo en temps réel.
Exposé théorique, suivi d'une mise en pratique.

Moyens pour suivre l’exécution de l’action :
- La présence du stagiaire est vérifiée par le formateur à l'aide d'une feuille de présence signée par demi-journées
Moyens pour en apprécier les résultats :
- A la fin de la formation, le stagiaire complète une évaluation à chaud (Permettant d'évaluer la qualité de la prestation)
- Puis, il complète avec le formateur une évaluation des acquis (Permettant de déterminer les points acquis, non acquis ou en cours d'acquisition)
- Quelques mois après la formation, le donneur d'ordre complète une évaluation à froid (Permettant de s'assurer que la formation a pu être mise en pratique)
Sanction de la formation :
- A la fin de la formation le stagiaire reçoit une attestation de formation reprenant l’intitulé de la formation, les dates et le nombre d’heures réalisées.
Délai d'accès :

En intra-entreprise : En fonction de vos disponibilités et celles de nos formateurs.
En inter-entreprise : En fonction des sessions que nous avons programmé, consultable en cliquant ici

Profil formateur :
Formateurs passionnés et expérimentés intervenant en milieu professionnel en tant qu'intégrateur et développeur.

Adaptation aux personnes en situation de handicap :
Nous nous engageons à favoriser l’accessibilité du public en situation de handicap, en fonction de leurs besoins et/ou difficultés, en adaptant :
- La durée de la formation
- Le programme et son déroulement
- Les moyens pédagogiques et techniques
- Les supports pédagogiques

Ces formations adaptées sont proposées en individuel ou collectif (Pour public à besoins similaires).
Afin de trouver la meilleure solution, nous nous appuyons de partenaires, évoluant dans le domaine du handicap.
Personne à contacter / personne en charge de l'accueil et de l'accès des personnes en situation de handicap :

Lambert Christophe
03 59 25 10 15
[email protected]
Evaluation, avis ...

Evaluation : Aucune note pour cette formation entre 2024 et 2026 .
Comment financer ma formation ?

Vous ne savez pas comment financer votre formation ?. Vous êtes salarié, travailleur non salarié (TNS), commerçant, artisan, profession libérale. Suivez le guide...

Trouver mon financement

A partir de 750 €

Obtenir un devis

Tarif 2026

INTER-ENTREPRISE:
> Prochaines dates

750€ HT

INTRA-ENTREPRISE:
+ 200€ HT par pers supplémentaire.

800€ HT

Formation CSS3

Informations pratiques

Tarif 2026

Certification qualité

Recrutement de formateurs