Dans cette leçon vidéo en français, l'instructeur explique les propriétés CSS liées aux bordures, aux dimensions et aux marges. Il commence par montrer comment appliquer une bordure à un titre h1 en utilisant les trois propriétés séparées border‑style, border‑width et border‑color, puis introduit la syntaxe raccourcie border. Il décrit les différents styles de bordure (solid, dotted, dashed, etc.) et comment ajuster l'épaisseur et la couleur. Ensuite, il présente border‑radius pour arrondir les coins et créer un cercle parfait en combinant une largeur et hauteur égales avec un radius égal à la moitié. Il aborde les propriétés width et height, en insistant sur le fait qu'elles ne s'appliquent qu'aux éléments de type bloc. Il montre comment créer un cercle avec une div en définissant width/height à 400 px et border‑radius à 200 px. La vidéo traite ensuite des marges externes (margin) : les marges par défaut du h1 et du body, comment les réinitialiser, et comment spécifier des marges différentes pour chaque côté à l'aide de propriétés individuelles ou de la notation raccourcie avec 1, 2, 3 ou 4 valeurs. Enfin, il explique les marges internes (padding), leur impact sur la taille de l'élément, et la façon d'utiliser les propriétés padding‑top/right/bottom/left ou la forme raccourcie. Tout au long du cours, l'instructeur montre le code, exécute les exemples et décrit les effets visuels, adoptant un ton pédagogique et enthousiaste.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon de CSS. Aujourd'hui, nous allons traiter les bordures, les dimensions et les marges. Considérons le code HTML suivant. Dans la balise body, nous avons un titre h1 et une balise div identifiée par maDiv et qui ne contient rien. Nous allons dans un premier temps nous intéresser à la balise h1. Alors nous allons aller sur le style CSS et avec le sélecteur h1 nous avons déjà intégré quelques styles de base. Maintenant on va essayer d'appliquer une bordure. Pour appliquer une bordure il faut appliquer 3 propriétés à la fois, à savoir le style de la bordure, son épaisseur et sa couleur de la manière suivante: border-style, on va mettre une de plusieurs valeurs possibles, par exemple on va choisir solid. Ensuite border-width, c'est l'épaisseur, par exemple 1px. Et à la fin border-color, on va spécifier la couleur, par exemple du noir, c'est 000. On exécute maintenant pour voir à quoi ça va ressembler. Nous avons ici le titre h1 qui est entouré par une bordure noire. Bon, revenons maintenant au style pour expliquer un petit peu de quoi il s'agit. Border style, ça spécifie le style de la bordure. Par exemple, solid pour un trait continu. Il y a aussi dotted, donc il va donner des pointillés, ce sont des petits points. Il y a aussi dashed, donc il va donner des tirets. Donc il y a d'autres valeurs comme double, groove, outset, inset, etc., mais en général on utilise soit solid ou bien dotted. Pour border-width, ça donne l'épaisseur de la bordure. Ici, la bordure, il va mesurer 1 pixel d'épaisseur. Si vous voulez que ce soit plus épais que ça, il suffit d'agrandir la valeur, par exemple 10 pixels. Alors on aura une bordure plus prononcée, comme ça par exemple. Et border-color, ce n'est rien d'autre que la couleur. Bien sûr, la couleur, on peut la spécifier avec l'une des 4 méthodes que nous avons vues précédemment. Maintenant, nous avons ici 3 lignes pour spécifier les styles de la bordure. Nous CSS nous permet de résumer tous ces styles dans une seule ligne de la manière suivante. Il suffit de mettre bold: solid 10px et à la fin on va mettre la couleur. Bon, il faut mettre un espace entre les 3 valeurs. On commence généralement par le style, ensuite l'épaisseur et finalement par la couleur. Quand on exécute, on voit que rien n'a changé, bon, parce que le style est maintenu. Il existe une autre technique Un autre style pour la bordure, c'est border-radius. Bon, border-radius, il est préférable de le séparer, bon, ne pas le mélanger avec border. On va le déclarer dans une ligne à part et on va mettre ici 10px. Bon, on va voir déjà l'effet. Bon, l'effet c'est quoi? C'est l'arrondi. Vous avez constaté que c'est légèrement arrondi sur les coins. Bon, je peux agrandir la valeur, par exemple 20px, pour mieux voir l'effet. Donc ça donne ce qu'on appelle une bordure arrondie. Border-radius, c'est ce qu'on appelle le rayon de la bordure. Le rayon c'est quoi? C'est tout simplement ici, c'est comme si vous aviez un cercle, voilà, un cercle ici dont le rayon mesure 20 pixels. Et on va conserver que la partie externe du cercle. Ça, c'est ce qui concerne les bordures. Bon, maintenant on va voir les dimensions. Les dimensions, ce sont la largeur et la hauteur d'un objet. Alors, pour spécifier la largeur et la hauteur, il suffit de déclarer les propriétés width et height. Donc pour width, on va mettre par exemple 400 pixels, et height 300 pixels comme ça. Et quand j'actualise, je vais voir que maintenant mon H1 mesure bien les dimensions que je lui ai attribuées, à savoir 400 pixels sur 300 pixels. Il y a quand même une remarque, c'est que les dimensions, c'est-à-dire la largeur et la hauteur, elles sont applicables exclusivement sur les balises de type bloc comme les H1, les paragraphes, les divs, etc. Les balises inline ne sont pas toutes concernées par le width et le height. Ça veut dire si vous prenez la balise span et que vous lui appliquer le width et le height, ça va pas s'appliquer. Alors les balises inline ne sont pas concernées sauf quelques exceptions comme par exemple la balise d'image ou bien les champs de formulaire. Donc maintenant je vais retourner un peu en arrière et je vais essayer de créer un cercle, bon un cercle parfait à l'aide de la balise div. Pour faire ceci, j'ai déjà une balise div que j'ai intégrée dans le document HTML et identifiée par ma div. Voilà, il suffit de la styler pour avoir le cercle. Alors sur le CSS, je peux mettre le sélecteur div ou bien juste le ID ma-div. Et ensuite je vais mettre ici la largeur c'est 400 pixels, la hauteur c'est 400 pixels. Right. Et pour voir la div, soit on peut colorer son arrière-plan ou bien on peut lui attribuer une bordure. Par exemple background color orange et aussi on va mettre une bordure solide un px. On va mettre donc toujours le noir. Alors dans un premier temps, la div va ressembler à ça. Donc ça c'est notre div. Si je veux que ça soit un cercle parfait, il suffit de choisir border-radius qui mesure au moins la moitié des dimensions, ça veut dire des 400 pixels. Donc ce qu'on va mettre border-radius, on va mettre au minimum 200 pixels. Quand j'exécute, je vais voir que j'obtiens un cercle Parfait. Maintenant nous allons voir les marges internes et externes. Bon, revenons au code CSS. Bon, pour la div, je vais pour le moment l'écarter. Bon, même chose dans le code HTML, je vais enlever la balise div. Je conserve juste le titre H1. Je peux par exemple mettre width égal à auto pour dire la valeur par défaut, et la hauteur je vais conserver 300 pixels. D'ailleurs le résultat ça va ressembler à ceci. Voilà, auto ça veut dire largeur automatique, celle qui est appliquée par le navigateur. Vous allez voir que déjà il y a une marge supérieure qui est appliquée d'une manière automatique. La balise H1 applique une marge supérieure et inférieure d'une manière automatique. Bon, si je veux annuler ces marges, il suffit de mettre ici margin 0. Quand j'exécute maintenant, je vais voir que les marges ont été supprimées. Il y a une petite marge qui est toujours appliquée, mais ce n'est pas la marge de H1, c'est la marge du body. On peut l'éliminer aussi. Bon, on peut aller par exemple ici, on va mettre body margin 0. Donc ce qu'on annule aussi, les marges par défaut de body. Et on aura le résultat qui va ressembler à ceci. Imaginez maintenant que je veux que mon titre H1 soit écarté des bords de mon navigateur. Alors il suffit d'appliquer des marges qui sont différentes. Par exemple, marge, mettre ici 20px. Le résultat maintenant ressemble à ceci. Donc nous avons 20px de tous les côtés, ça veut dire à gauche, au haut, à droite et en bas. Si vous voulez prendre des valeurs différentes pour chacune des marges, alors il suffit tout simplement de mettre ici margin. Top, ça veut dire la marge supérieure c'est 20 pixels. Les autres marges n'ont pas été explicitées. Alors là encore je vais mettre margin-bottom 40px, ensuite margin-left 20px, margin-right par exemple 50px. Ça veut dire si vous voulez expliciter chacune des marges, il suffit de mettre le suffixe top, bottom, Left ou bien right. Et le résultat va ressembler à ceci. Cependant, on peut résumer ça sur une seule ligne. On va mettre margin: au lieu de mettre une valeur, parce que si vous mettez une valeur, ça veut dire que les 4 marges, ils auront cette même valeur. Alors là, il suffit tout simplement de spécifier chacune des valeurs, c'est-à-dire 4 valeurs espacées par un espace blanc. Par exemple, je vais mettre les valeurs suivantes: 100px, 20px, 50px et 70px. Ce sont des valeurs arbitraires juste pour faire le test. Ça veut dire que dans cet ordre, 100px c'est la marge supérieure, 20px la marge droite, 50px la marge inférieure et 70px c'est la marge gauche. Alors quand j'actualise, ça va donner ceci. Donc 100px ici et bien sûr on va aller dans cet ordre supérieur, droite, inférieure et gauche. On peut aussi faire ceci. Si vous mettez uniquement deux valeurs, ça veut dire la marge supérieure et inférieure c'est 100 pixels, la marge gauche et droite c'est 20 pixels. Alors on aura quelque chose qui ressemble à ça. Si vous voulez maintenant appliquer des marges internes, parce que margin c'est la marge externe de l'objet, la marge interne on va l'appliquer à l'intérieur de l'objet lui-même. Ça veut dire ici on va un petit peu écarter le texte par rapport au bord de l'objet. Alors là, il suffit de mettre padding, par exemple 30px. Quand j'exécute, je vais voir que le texte est un peu écarté par rapport aux bords. Alors j'ai appliqué 30px sur tous les côtés. Vous avez aussi remarqué que la hauteur de la balise h1 a augmenté légèrement. C'est normal parce que maintenant il faut aussi prendre en considération le padding supérieur et inférieur. Bon, même chose pour le padding droite et gauche au cas où nous avons spécifié une valeur de width qui est différente de auto. De la même manière, on peut spécifier padding-top, padding-left, padding-right et padding-bottom. Et si vous spécifiez les 4 valeurs d'un seul coup, il suffit de mettre exactement comme on a fait pour margin. Alors margin, c'est pour une marge externe, et padding, c'est pour une marge Merci pour votre attention et à la vidéo prochaine.
