CATALOGUE Design et Infographie Formation WebDesign UX / UI Apprendre le Responsive Design - en HTML5 et CSS3

Guide Complet pour Styliser une Page Web avec HTML et CSS

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

Découvrez comment ajuster les marges, centrer le contenu sur différents écrans et appliquer des couleurs à vos éléments HTML pour un design cohérent.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons examiner les règles de style essentielles pour créer une page web attrayante et fonctionnelle. Nous allons commencer par ajuster les marges globales de l'élément body à zéro. Ensuite, nous nous concentrerons sur le conteneur principal (Container), où nous appliquerons des marges automatiques pour centrer la page sur des dispositifs plus larges comme les tablettes et les écrans de bureau.

La zone d'en-tête (header) sera stylisée avec une couleur de fond grise (#858585) et une hauteur fixe de 300px, malgré le manque de contenu.

Nous masquerons certains éléments comme le Slider sur les maquettes smartphones en utilisant la propriété display: none.

D'autres sections, telles que le Side, la Section, le Footer, et la zone d'information, auront des couleurs spécifiques et des hauteurs fixes définies par des valeurs hexadécimales pour obtenir un design harmonieux.

Enfin, nous soulignerons les différences entre les sélecteurs d'identifiant (ID) et les balises HTML5 pour clarifier leur utilisation dans notre feuille de style.

Objectifs de cette leçon

L'objectif de cette vidéo est de fournir une méthodologie claire pour appliquer des styles de base en HTML et CSS, tout en prenant en compte la compatibilité entre différents appareils.

Prérequis pour cette leçon

Les prérequis pour suivre cette vidéo incluent des connaissances de base en HTML et une initiation aux propriétés CSS.

Métiers concernés

Les compétences acquises sont directement applicables pour des métiers tels que développeur front-end, designer web, et intégrateur web.

Alternatives et ressources

Pour ceux recherchant des alternatives, d'autres options incluent l'utilisation de frameworks comme Bootstrap ou des préprocesseurs CSS comme Sass.

Questions & Réponses

Mettre les marges à zéro pour le body permet de commencer avec une ardoise propre, supprimant les espaces indésirables autour de la page.
Centrer le conteneur sur les grands écrans assure que le contenu principal reste au centre de l'attention visuelle, offrant une meilleure expérience utilisateur.
La propriété display: none masque le slider sur les smartphones, permettant une présentation plus claire et plus épurée pour les petits écrans.