Logo du LYPSO

CSSCascading Style Sheets

Logo HTML5 et CSS3

La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des écrans utilisés pour du HTML.
On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Les requêtes média (media queries) permettent de modifier l'apparence d'un site en tenant compte de la taille de l’écran (et de la densité de pixel).

Manipuler des textes avec CSS

Mettre en majuscule un texte

Indenter un paragraphe

Créer une ombre sur un titre

Espacer un texte

Justifier, centrer, mettre à gauche ou droite un texte

Manipuler des images avec CSS

Créer une image ovale à partir d'une image rectangulaire

Créer une image ronde à partir d'une image carrée

Créer une image ronde à partir d'une image rectangulaire

Manipuler des boites avec CSS

Créer une ombre sur une boite

Changer le comportement d'une boite avec la propriété float

Changer le comportement d'une image avec la propriété float

Changer le comportement d'une boite avec les propriétés float et clear

Manipuler le contenu d'une boite avec la propriété overflow

Manipuler les types de positionnement en CSS

Le positionnement absolu

Le positionnement relatif

Les positionnements relatif et absolu

Le positionnement Z (au-dessus ou en dessous)

Le positionnement fixe

Le positionnement statique (comportement par défaut)

Les sélecteurs CSS avancés

Les sélecteurs de base

Les pseudo-classes enfant

Les sélecteurs avec les combinateurs espace + > ~

Le sélecteur de case à cocher avec la pseudo-classe :checked

Les sélecteurs d'attribut avec les combinateurs ~ $ * ^

Créer des formulaires avancés

Exemple 1 de formulaire sans CSS

Exemple de formulaire avec CSS

Exemple 2 de formulaire sans CSS

Exemple 2 de formulaire avec CSS

Créer des Médias Queries (site responsive)

Principe d'une requête media queries pour Desktop first

Créer un menu burger en HTML et CSS

Etape 1 - Mise en place des bases du menu

Etape 2 - Préparatif du menu burger

Etape 3 - Mise en place des media queries

Etape 4 - Afficher / Cacher le menu

Etape 5 - Mise en fonction du menu

Etape 6 - Finalisation du travail

Mettre en place des animations

Exemple 1

Exemple 2: ajouter des options

Réaliser un site complet

Mise en forme des balises structurantes HTML 5 - Desktop First

Mise en forme de la zone Nav

Mise en place des icônes du menu burger

Création du menu burger

Mise en forme de la zone Section

Mise en place de la zone Résumé

Arrondir des images rectangulaires

Mise en forme de la zone Résumé

Adaptation responsive

Mise en forme de la zone Footer

Mise en place des métas du fichier index

Création du fichier versailles

Mise en place de la zone Article

Mise en forme du titre de niveau 1

Mise en forme de la zone Article

Adaptation responsive de la zone Article

Mise en place des métas du fichier versailles

Création du fichier chambord

Création d'un état « on » des liens de la Nav

Mise en place d'une animation des zones