Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et commentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

LES MARGES EN CSS

Marges intérieures et marges extérieures

En CSS, nous allons devoir distinguer deux types de marges : les marges intérieures (le padding) et les marges extérieures (le margin).

Les marges intérieures se trouvent entre le contenu de l’élément et sa bordure. Ainsi, définir une marge intérieure importante va éloigner la bordure de l’élément de son contenu. Si on définit une couleur de fond pour notre élément, celle-ci s’applique également dans l'espace correpondant aux marges intérieures.

Les marges extérieures, au contraire, vont définir l’espace autour d’un élément. Les marges extérieures se trouvent en dehors des bordures d’un élément et servent généralement à éloigner un élément d’un autre. Comme les marges extérieures se trouvent « en dehors » d’un élément, celles-ci ne sont pas affectées par la couleur de fond donnée à un élément.

Les marges intérieures

Les marges intérieures d’un élément vont pouvoir être définies en CSS grâce à la propriété padding. Cette propriété peut prendre des valeurs absolues (px) ou relatives (%).

Notez que l’on va pouvoir définir des marges intérieures haute, droite, basse et gauche de tailles diverses avec padding-top, padding-right, padding-bottom et padding-left.

On va définir des marges intérieures (padding)

On peut définir un padding différent pour chaque côté

Nous avons appliqué différentes marges intérieures à nos éléments HTML

Essayer ce code

Les marges extérieures

Nous allons pouvoir définir des marges extérieures (« en dehors » de nos éléments) en CSS grâce à la propriété margin.

Cette propriété accepte en valeurs des valeurs absolues, relatives, ainsi que les valeurs inherit ou auto. Cette dernière valeur, auto, va souvent nous être utile pour centrer horizontalement un élément par rapport à un élément parent.

Une nouvelle fois, nous allons pouvoir définir des marges extérieures haute, droite, basse et gauche d’importances diverses grâce à margin-top, margin-right, margin-bottom et margin-left.

Nous allons définir des marges extérieures pour nos éléments

On utilise margin pour définir des marges extérieures en CSS

Nos éléments possèdent maintenant différentes marges extérieures

Essayer ce code

Nous pouvons également centrer horizontalement un élément par rapport à son élément parent en utilisant la valeur auto. Pour que cela fonctionne, il faut que deux critères soient réunis : l’élément doit être de type block et doit posséder une largeur définie.

Regardez plutôt l’exemple ci-dessous avec notre élément div.

On utilise margin auto pour centrer un élément block

Notre div a bien été centré horizontalement grâce à margin auto

Essayer ce code

Notations raccourcies padding et margin

Notez finalement que l’on peut définir des marges intérieures et extérieures de tailles différentes pour chaque côté de nos éléments en utilisant directement les propriétés padding et margin plutôt que padding-top, padding-right, etc.

Pour cela, nous allons tout simplement enchaîner les quatre valeurs à la suite. La première valeur correspond à la marge haute, la seconde à la marge droite, la troisième à la marge basse et la dernière à la marge gauche.

On peut également ne préciser que deux valeurs. Dans ce cas, la première correspond aux marges haute et basse et la seconde aux marges droite et gauche.

On définit des marges différentes avec madding et margin

On peut donner 1, 2 ou 4 valeur à padding et margin

Nos éléments possèdent des marges intérieures et extérieures personnalisées

Essayer ce code

Chapitre précédent

Chapitre suivant