CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 3 - Mettre en page son site internet

Apprendre la mise en page CSS

Retour à la formation
Chapitre 2 Leçon 3
Précédent
Suivant

Dans cette leçon, nous allons apprendre à mettre en page un fichier HTML en utilisant des techniques CSS avancées comme display et margin.

Détails de la leçon

Description de la leçon

Cette leçon explore les différentes techniques de mise en page avancées avec le CSS. Nous utiliserons notamment les propriétés display et margin pour améliorer la structure et l'apparence de notre contenu. Vous apprendrez à centrer des éléments, appliquer des ombres, changer la police de caractères, et ajuster les marges pour obtenir un design agréable et professionnel. Nous commencerons par relier notre fichier HTML à une feuille de style externe, avant de progresser vers des spécificités comme le centrage d'un conteneur à l'aide de margin: 0 auto et l'application de padding pour une meilleure lisibilité. La leçon se termine par l'ajout de touches finales comme l'application d'ombres et la mise en forme du pied de page (footer).

Objectifs de cette leçon

À la fin de cette vidéo, vous serez capable de :

  • Centrer des éléments avec CSS
  • Appliquer des ombres avec box-shadow
  • Changer de police et ajuster les marges et les paddings

Prérequis pour cette leçon

Vous devriez avoir une connaissance de base en HTML et CSS, y compris les sélecteurs CSS et la structure HTML.

Métiers concernés

Les compétences abordées dans cette vidéo sont utiles pour les métiers suivants :

  • Développeur Web
  • Intégrateur HTML/CSS
  • Designer Web

Alternatives et ressources

Vous pouvez utiliser différents outils et frameworks comme Bootstrap ou Tailwind CSS pour faciliter la mise en page et le design de vos pages web.

Questions & Réponses

Pour centrer un conteneur, utilisez la propriété margin: 0 auto; après avoir défini une largeur fixe pour le conteneur.
La propriété box-shadow est utilisée pour ajouter des ombres en CSS.
Pour vérifier si une feuille de style CSS est bien liée, modifiez une propriété CSS visible comme l'arrière-plan et voyez si le changement s'affiche dans le navigateur.