Image de cours gratuite Apprendre CSS

Cours en ligne gratuitApprendre CSS

Durée du cours en ligne : 11 heure et 57 minutes

3.75

étoileétoileétoileDemi-étoileétoile

(4)

Donnez du style à vos pages web : cours en ligne gratuit pour maîtriser CSS, du responsive à Flexbox, et créer des interfaces modernes grâce à la pratique.

Dans ce cours gratuit, découvrez

  • Rôle du CSS et son lien avec le HTML pour styliser une page web
  • Maîtrise des sélecteurs, classes vs IDs, et la spécificité/cascade
  • Modèle de boîte (margin/padding/border) et box-sizing
  • Typographie : polices, couleurs du texte, formats et unités (px, em, rem, vw/vh)
  • Mise en page : position, z-index, float, et centrage de blocs
  • Flexbox : axes, alignement, distribution d’espace, layouts modernes
  • Background : image, repeat, position, et background-size: cover
  • Pseudo-éléments (ex: ::first-letter) et pseudo-classes utiles
  • Transform, transitions et animations CSS pour effets visuels
  • Responsive design : media queries et images HTML responsives
  • Compatibilité navigateurs et vérification via Can I use
  • Polices personnalisées via @font-face et bonnes pratiques d’intégration
  • Frameworks CSS, reset CSS, variables CSS et préprocesseurs (ex: Sass)
  • TP : structurer et intégrer des maquettes (blog, réseau social, topbar, UI)

Descriptif du cours

Vous savez déjà structurer une page web et vous voulez enfin la rendre agréable, lisible et professionnelle ? Ce cours en ligne gratuit Apprendre CSS vous accompagne pas à pas pour transformer vos pages HTML en interfaces modernes, cohérentes et responsives. Au fil des vidéos et des exercices, vous allez comprendre comment le navigateur applique les styles, comment choisir la bonne règle au bon endroit, et comment éviter les effets inattendus qui font perdre du temps.

Vous partirez des bases indispensables comme les sélecteurs, les classes et la logique de priorité, puis vous construirez une vraie compréhension du modèle de boîte. Vous apprendrez à gérer les espacements, les dimensions, les unités adaptées à chaque contexte, ainsi qu’à manipuler la typographie et les couleurs avec précision. Cette progression vous donnera des réflexes solides pour maintenir un design propre, stable et facile à faire évoluer, même quand la page se complexifie.

La mise en page occupe une place centrale : positionnement, éléments flottants, puis Flexbox pour aligner et distribuer les contenus sans bricolage. Vous découvrirez aussi comment gérer les arrière-plans, éviter les surprises avec box-sizing et adopter de bonnes pratiques pour un rendu cohérent. L’objectif est simple : savoir construire une maquette crédible et la reproduire en CSS, comme dans un vrai contexte de production.

Pour aller plus loin, le cours aborde des notions devenues incontournables : pseudo-éléments, transformations, animations et transitions, ainsi que les media queries pour adapter l’interface à tous les écrans. Vous serez également sensibilisé à la compatibilité entre navigateurs, à l’intérêt des resets, aux variables CSS et à l’écosystème des frameworks et préprocesseurs. À la fin, vous aurez acquis une méthode et des automatismes pour styliser des composants, créer des pages responsive et développer des interfaces web prêtes à être intégrées dans des projets concrets.

Contenu du cours

  • Leçon vidéo : Découverte du CSS (1/31) : Présentation 07m
  • Exercice: _Qu'est-ce que le CSS?
  • Leçon vidéo : Découverte du CSS (2/31) : Les sélecteurs 30m
  • Exercice: Quel est le principal avantage des classes CSS par rapport aux IDs ?
  • Leçon vidéo : Découverte du CSS (3/31) : Le modèle de boîte 34m
  • Exercice: _Qu'est-ce qu'une boîte en CSS ?
  • Leçon vidéo : Découverte du CSS (4/31) : Police 29m
  • Exercice: Quelle propriété CSS est utilisée pour changer la couleur du texte ?
  • Leçon vidéo : Découverte du CSS (5/31) : Les formats de couleurs 10m
  • Exercice: _Comment représente-t-on une couleur en CSS ?
  • Leçon vidéo : Découverte du CSS (6/31) : Les unités de mesures 16m
  • Exercice: Quelles unités CSS utilisez-vous pour définir la taille relative à la fenêtre d'affichage ?
  • Leçon vidéo : Découverte du CSS (7/31) : Le positionnement 18m
  • Exercice: _Quelle est la propriété CSS qui permet de positionner les éléments ?
  • Leçon vidéo : Découverte du CSS (8/31) : Les éléments flottants : float 19m
  • Exercice: Quelle est l'utilité de la propriété CSS 'float' dans la mise en page web?
  • Leçon vidéo : Tutoriel CSS : Flexbox 33m
  • Exercice: _Qu'est-ce que les flex box en CSS ?
  • Leçon vidéo : Découverte du CSS (9/31) : La propriété background 18m
  • Exercice: Quel est l'effet de la propriété CSS background-size avec la valeur 'cover'?
  • Leçon vidéo : Découverte du CSS (10/31) : Le box-sizing 04m
  • Exercice: _Quelle est la propriété CSS qui permet de définir comment la largeur affecte un élément en prenant en compte les bordures et le padding ?
  • Leçon vidéo : Découverte du CSS (11/31) : TP : Création d'un blog 1h15m
  • Exercice: Que doit-on faire pour centrer un bloc d'articles dans une page web en CSS?
  • Leçon vidéo : Découverte du CSS (12/31) : La spécificité des sélecteurs 08m
  • Exercice: _Comment le navigateur détermine-t-il quelle règle CSS prendre en compte lorsque plusieurs règles peuvent affecter un élément ?
  • Leçon vidéo : Découverte du CSS (13/31) : La compatibilité des navigateurs 13m
  • Exercice: Quel est l'outil conseillé pour vérifier la compatibilité des propriétés CSS dans différents navigateurs ?
  • Leçon vidéo : Découverte du CSS (14/31) : Polices personnalisées 20m
  • Exercice: _Quelle est la propriété CSS qui permet de définir une police personnalisée sur une page web ?
  • Leçon vidéo : Découverte du CSS (15/31) : Pseudo-éléments 19m
  • Exercice: Quel pseudo-élément CSS permet de sélectionner la première lettre d'un élément HTML ?
  • Leçon vidéo : Découverte du CSS (16/31) : Transform 19m
  • Exercice: _Qu'est-ce que la propriété transforme en CSS permet de faire ?
  • Leçon vidéo : Découverte du CSS (17/31) : Animation 18m
  • Exercice: Quelle propriété CSS est principalement utilisée pour créer des effets de transition visuelle fluide entre les états des éléments?
  • Leçon vidéo : Découverte du CSS (18/31) : Media query et le responsive 32m
  • Exercice: _Qu'est-ce que les médias query permettent de faire en CSS ?
  • Leçon vidéo : Découverte du CSS (19/31) : TP : Réseau social 1h37m
  • Exercice: Quel aspect est mis en avant lors de la création de la maquette présentée dans la vidéo ?
  • Leçon vidéo : Découverte du CSS (20/31) : TP Restaurant : Ouvrir la maquette 07m
  • Exercice: _Quel est le logiciel qui permet d'ouvrir des fichiers sketches sur Windows, Mac et Linux avec la fidélité la plus intéressante ?
  • Leçon vidéo : Découverte du CSS (28/31) : Les frameworks CSS 19m
  • Leçon vidéo : Découverte du CSS (29/31) : Reset 07m
  • Exercice: _Quel est l'objectif de l'outil "reset css" ?
  • Leçon vidéo : Découverte du CSS (30/31) : Les variables CSS 11m
  • Leçon vidéo : Découverte du CSS (31/31) : Les préprocesseurs CSS 07m
  • Exercice: _Qu'est-ce qu'un prêt processeur en CSS ?
  • Leçon vidéo : Tutoriel HTML: Images responsives 17m
  • Leçon vidéo : Les techniques d'espacement en CSS, LA 3ème VA VOUS ETONNER ! 25m
  • Leçon vidéo : Découverte du CSS : Chapitre 11, Flexbox 35m
  • Leçon vidéo : Découverte du CSS : Chapitre 29, Mini TP : Topbar 37m
  • Leçon vidéo : Tutoriel CSS : Personnaliser des checkbox en CSS 17m

Ce cours gratuit comprend:

11 heure et 57 minutes du cours vidéo en ligne

Certificat numérique de réussite du cours (gratuit)

Exercices pour développer vos connaissances

100% gratuit, du contenu au certificat

Prêt à commencer ?Téléchargez l’application et commencez dès aujourd’hui !

Installez l'application

dès maintenant pour accéder au cours
Icône représentant les cours de technologie et de commerce

Plus de 5000 cours gratuits

Programmation, anglais, marketing digital et bien plus encore ! Apprenez ce que vous voulez, gratuitement.

Icône de calendrier avec cible représentant la planification des études

Plan d'études avec IA

L'intelligence artificielle de notre application peut créer un planning d'études pour le cours que vous choisissez.

Icône professionnelle représentant la carrière et le commerce

De débutant à professionnel accompli

Améliorez votre CV grâce à notre certificat gratuit, puis utilisez notre intelligence artificielle pour trouver l'emploi de vos rêves.

Vous pouvez également utiliser le code QR ou les liens ci-dessous.

Code QR - Télécharger Cursa - Cours en ligne

Plus de cours gratuits sur Programmation web

Ebook + livres audio gratuits ! Apprenez en écoutant ou en lisant !

Téléchargez l'application dès maintenant pour avoir accès à + 5000 cours gratuits, exercices, certificats et de nombreux contenus sans rien payer !

  • Cours en ligne 100% gratuits du début à la fin

    Des milliers de cours en ligne en vidéo, livres électroniques et livres audio.

  • Plus de 60 000 exercices gratuits

    Pour tester vos connaissances lors de cours en ligne

  • Certificat numérique gratuit et valide avec code QR

    Généré directement à partir de la galerie de photos de votre téléphone portable et envoyé à votre adresse e-mail

Application Cursa sur l'écran du livre électronique, l'écran du cours vidéo et l'écran des exercices du cours, ainsi que le certificat de fin de cours