Programmation Web (CSS3) - Module Gratuit

Name: Programmation Web (CSS3) - Module Gratuit
Rating: 4.3 (22 reviews)

Apprenons la mise en forme de notre site web

Created byJean-Michel ROSEE

Last updated 9/2025

French

French [Auto],

What you'll learn

Vous allez enfin savoir ce que l'on appelle le CSS3
Vous aurez de bonnes bases afin de mettre en forme votre page
Vous aurez accès à une multitude de références afin de parfaire votre apprentissage
Ce n'est que le début car une formation complète payante arrive

Course content

4 sections • 12 lectures • 1h 58m total length

Présentation de la formation4:26
Présentation de la formation

Je vous présente la formation avec les différentes sections que l'on apprendra au niveau du langage CSS3
Comme il faut des connaissances en HTML5, je vous propose une autre formation gratuite au cas.
Sachant que cette formation est juste les prémices de l'apprentissage de ce superbe langage de mise en page d'une page web, bien entendu comme pour l'apprentissage du langage en HTML5, une formation complète sera mise en ligne afin de tout apprendre sur le CCS3.
Aperçu de l'interface Udemy5:06
Aperçu de l'interface Udemy

Il est toujours intéressant de comprendre comment fonctionne l'interface Udemy, voilà pourquoi une vidéo a été faite dans ce sens afin de vous aider à mieux comprendre celle-ci
Module Ressources4:08
Module Ressources
Le module Ressources est un fichier Zippé qui comprend à la fois les fichiers (html5 et CSS3) et un répertoire comme j'ai pu vous expliquer dans la vidéo.
Vous trouverez aussi un fichier Zippé qui résume ce que vous avez appris dans cette formation et dévoile la suite avec la formation payante, sachant que les 3 site web que l'on va s'amuser à faire sont en ligne sur mon site web personnel: https://savoirpourtous.eu dans l'onglet Web - Test
Note et commentaire2:46
Avis et remarques

Au bout d'un certain moment de la formation, il vous sera demander de me mettre une note et une remarque.
Avant toute chose, n'oubliez que cette formation est gratuite, et comme je vous dit dans la vidéo, vous pouvez me poser des questions par le biais de la plateforme Udemy, des réseaux sociaux, chaine YouTube et autre.
Bien entendu je me ferais un plaisir de vous répondre,

Voilà, bonne formation
Mr ROSEE Jean-Michel

Origine4:14
Origine du CSS
Le concept des feuilles de style a été à l'origine proposé en 1994 par Håkon Wium Lie

Avant toute chose, penchons un instant sur l'origine du CSS, voici les différentes versions de CSS avec leurs dates de publication (liste non exhaustive) :

CSS1 : publiée en décembre 1996
CSS2 : publiée en mai 1998
CSS2.1 : publiée en juin 2011
CSS3 : en réalité, CSS3 est divisé en plusieurs modules, chacun ayant sa propre date de publication. Voici les dates de publication de certains de ces modules :
Selectors Level 3 : publié en septembre 2001
Media Queries : publié en juin 2012
Backgrounds and Borders : publié en septembre 2012
Color : publié en juin 2018
Grid Layout : publié en juin 2018
Flexbox : publié en mai 2018

Il est important de noter que CSS est une spécification en constante évolution, et de nouveaux modules peuvent être ajoutés à tout moment.
Insertion du CSS9:31
Insertion du CSS

Il existe 3 façons d'insérer du CSS :
Insérer le CSS dans une balise STYLE à l'intérieur de la balise HEAD
Insérer directement le code CSS à l'intérieur d'une balise comme par exemple la balise P
Lier une page CSS à l'intérieur de la balise HEAD par le biais de la balise LINK
Introduction sur le CSS

Gestion des sélecteurs de base12:30
Sélecteur de base

Les sélecteurs de base sont des éléments clés en CSS pour cibler et styliser des éléments HTML spécifiques.
Si on décompose celui-ci, on aura:
Le sélecteur
La propriété
La valeur
Ensuite, nous verrons comment cibler une classe ou un ID.
Pour finir nous verrons comment cibler plusieurs éléments comme par exemple les balise P et H2.
Gestion de la couleur11:30
Gestion de la couleur en CSS

Nous allons voir qu'en CSS, il existe plusieurs façons de définir la couleur d'un élément:

Vous pouvez utiliser des noms de couleurs prédéfinis (color: blue;)
Des valeurs hexadécimales (comme par exemple background-color:#f6c66f;)
Des valeurs RGB ou RGBA
Des valeurs HSL ou HSLA

Ces options de couleur offrent une grande flexibilité pour choisir les couleurs exactes que vous souhaitez utiliser pour vos éléments HTML.
Gestion d'une police, Font21:07
Gestion des polices, Fonts

Une font en CSS se réfère à la famille de polices utilisée pour afficher le texte d'un élément HTML.
Les polices déterminent le style, la taille et la forme du texte.
En CSS, il est possible de définir une liste de polices en ordre de priorité, appelée pile de polices. comme l'exemple suivant:

font-family: verdana, sans-serif;
font-weight: bold;

On pourra donc modifier la couleur, la taille, le type, la graisse et ensuite de votre police.
Vous pourrez même si vous le souhaitez récupérer des polices sur des site web afin d'avoir des polices plus stylés.

Nous verrons aussi la propriété Text-transform: afin de transformer nos lettres en majuscules, en micuscules, souligné, aligner notre texte et ainsi de suite.
Gestion d'un bloc21:42
Description des blocs

Cette leçon est primordial pour comprendre comment fonctionne un bloc de texte, d'image ou tout autre élément.
comprendre la gestion des blocks de type INLINE ou BLOCK comme une balise de type DIV ou SPAN
Gestion de la tailles des éléments19:45
Gestion des tailles

La gestion des tailles des Font ou des polices est très importante, on y trouvera pleins de catégories comme:

Unités de mesure absolues : Ces unités de mesure sont fixes et ne changent pas en fonction de la taille de la fenêtre ou de la résolution de l'écran. Les unités de mesure absolues comprennent les pixels (px), les centimètres (cm), les millimètres (mm), les pouces (in) et les points (pt).

Unités de mesure relatives : Ces unités de mesure sont basées sur des facteurs tels que la taille de la police de base (rem), la taille de la police actuelle (em) ou la largeur de l'écran (vw). Les unités de mesure relatives permettent une conception plus flexible et sont recommandées pour les sites web adaptatifs et réactifs.
Pourcentage (%) : Les pourcentages sont une unité de mesure relative qui permet de spécifier la taille d'un élément par rapport à la taille de son parent.

Viewport Units (vh, vw) : Ces unités de mesure relatives se réfèrent à la taille de la fenêtre de visualisation du navigateur. La largeur de l'écran est représentée par vw (Viewport Width) et la hauteur par vh (Viewport Height).

Bien entendu, tout vous sera expliqué dans la vidéo avec différents exemples.
Les bases en CSS

Requirements

Avoir un minimum de connaissance sur l'apprentissage de la programmation HTML5
Avoir un PC ou un MAC
Avoir une connexion Internet
Savoir utiliser l'outil appelé IDE permettant d'écrire votre code

Description

Bienvenue à cette formation gratuite de presque 2 heures pour apprendre les bases du CSS3 !

Pendant cette formation, vous allez apprendre les bases du CSS3 pour styliser vos pages web de manière professionnelle. Nous allons commencer par voir l'origine et l'insertion du CSS dans une page web.

Le CSS a été créé en 1996 pour permettre de séparer la présentation (style) du contenu (HTML) d'une page web. Cela permet de faciliter la maintenance et la mise à jour du site web en modifiant simplement le fichier CSS sans avoir à toucher au code HTML.

Il y a trois façons d'insérer du CSS dans une page web : en ligne, en interne et en externe. Nous allons voir comment utiliser chacune de ces méthodes.

Ensuite, nous allons aborder la gestion des sélecteurs de base. Les sélecteurs permettent de cibler des éléments HTML spécifiques pour leur appliquer des styles CSS. Nous verrons comment utiliser les sélecteurs d'éléments, de classe et d'identifiant.

Nous allons également apprendre à changer la couleur du texte et des éléments de la page en utilisant la propriété "color". Nous verrons comment utiliser des couleurs nommées, des codes hexadécimaux et des codes RGB et ainsi de suite.

Nous allons voir comment changer la police de caractères (font) d'un texte en utilisant la propriété "font-family". Nous verrons comment utiliser différentes polices de caractères, comme Arial, Verdana, Times New Roman, etc.
Nous verrons aussi comment récupérer une font sur des sites Web.

Nous apprendrons également à changer la taille du texte en utilisant la propriété "font-size". Nous verrons comment spécifier la taille en pixels, en pourcentage ou en em et bien plus encore.

Enfin, nous verrons comment utiliser les propriétés de type (inline et block) pour créer des mises en page complexes en utilisant les éléments HTML de base tels que les divs et les spans.

À la fin de cette formation, nous allons passer un petit test pour voir si tout est bien compris. Vous allez devoir créer une petite page web et y ajouter des styles CSS pour modifier la couleur, la police, la taille et la mise en page des différents éléments.

Après cette petite formation que je rappelle est gratuite, vous aurez acquis les compétences de base afin de commencer à styliser vos propres pages web de manière professionnelle !

Bien entendu, une formation payante de plus 7 heures est préparation sur l'apprentissage du CSS3 avec énormément de ressources, d'exemples, de QUIZZ

Ne pas hésiter à me poser des questions si vous rencontrez des problèmes par le biais des différentes moyens de communication que je cite, je me ferais un plaisir de vous répondre,

Voilà, bon apprentissage et bonne formation

Who this course is for:

Ce cours s'adresse aux débutant(e)s voulant comprendre et commencer à connaître le langage CSS3
Ce cours s'adresse aux personnes souhaitant commencer à mettre en forme son site Web

Programmation Web (CSS3) - Module Gratuit

What you'll learn

Explore related topics

Course content

Présentation et Ressources4 lectures • 16min

Introduction2 lectures • 14min

Les bases en CSS35 lectures • 1hr 27min

Conclusion1 lecture • 2min

Requirements

Description

Who this course is for: