← Retour aux formations

Développement Web & No-Code

CSS : mettre en forme et styliser ses pages web

Débutant
Développement Web & No-Code

À propos de cette formation

Le CSS s'est imposé comme le langage de référence pour la mise en forme des pages web. Cette formation de 2 jours permet d'élaborer des feuilles de style pour contrôler l'apparence et la disposition des éléments HTML, en couvrant les fondamentaux des CSS, les techniques de positionnement, la mise en forme du texte et des images, le design des formulaires et l'interaction avec JavaScript.

Objectifs de la formation

  • check_circleCréer le squelette d'une page web avec CSS
  • check_circleFormater les styles au niveau de l'habillage du texte
  • check_circleStyliser des effets visuels : ombres portées, reflets, dégradés…
  • check_circleGérer l'interactivité avec JavaScript
  • check_circleAméliorer l'interactivité des formulaires

Programme détaillé

Module 1 — Rappels et introduction au CSS

  • Architecture client/serveur et rôle des navigateurs
  • Les langages côté client : XML, (X)HTML, CSS, JavaScript
  • Web sémantique, accessibilité et encodage
  • Avantages des feuilles de style et versions CSS (CSS1, CSS2, CSS3)
  • La cascade CSS, stockage des feuilles et compatibilité navigateurs

Module 2 — Les bases du CSS

  • Types de sélecteurs : id, class et balises
  • Ordre de priorité et propriétés CSS
  • Unités de mesure : em, px, pt...
  • Les couleurs : valeurs RGB et de base
  • Travaux pratiques : création et gestion de styles, unités relatives, adaptation aux types de médias

Module 3 — Les boîtes et blocs

  • Balises de bloc versus balises inline
  • Le flux CSS et les marges (margin, padding)
  • Positionnements dans le flux (relatif, flottant) et hors flux (absolu, fixe)
  • Z-index, propriété box-sizing et contextes de formatage
  • Fonds et bordures : couleurs, transparence, coins arrondis, ombres portées
  • Gestion du défilement (scrolling) et cas particulier des tableaux
  • Travaux pratiques : construction d'un squelette de page par positionnement de divs

Module 4 — Les styles textuels

  • Modification des fontes : tailles, polices, couleurs
  • Alignement du texte
  • Les pseudo-classes CSS
  • Effets visuels : transparence, ombres portées...
  • Listes et menus horizontaux et verticaux
  • Travaux pratiques : mise en forme de menus et effets visuels

Module 5 — Les images

  • Images de contenu (<img>) versus images d'apparence (background)
  • Redimensionnement et effet rollover
  • Liens et images
  • Travaux pratiques : intégration et mise en forme d'images

Module 6 — Les formulaires

  • Design des champs de saisie, listes de sélection, zones de texte, cases à cocher
  • Mise en forme des labels, légendes et groupes de champs (fieldset)
  • Travaux pratiques : réalisation de formulaires stylisés

Module 7 — Modifications des CSS en JavaScript

  • Modifier les styles dynamiquement en JavaScript (interfaces style et className)
  • Effets interactifs : apparition, cliqué-glissé, menu déroulant
  • Travaux pratiques : menu glissant et effets dans les formulaires combinant CSS et JavaScript

Prérequis

Avoir des notions de base en HTML.