Apprendre le CSS : des bases au niveau professionnel

1. Intro: Avez-vous déjà eu envie de personnaliser votre propre site Web ? Si c'est le cas, vous devez connaître et maîtriser le CSS. exactement ce que nous allons faire aujourd'hui en développant ce projet. Bonjour, je m'appelle Zoé. Je suis un ingénieur logiciel et un ancien professeur qui aime aider les autres à se lancer dans le codage. J'ai créé des tonnes de sites Web et d'applications Web en utilisant React, CSS, HTML, etc. Aujourd'hui, nous allons passer en revue les éléments essentiels du CSS et utiliser ces compétences pour ajouter du style à notre site Web HTML Si vous n'êtes pas familier avec le HTML, je vous recommande vivement de consulter mon cours précédent dans lequel nous avons construit le code de base de ce projet. Quoi qu'il en soit, j'aurai le code de démarrage lié dans l'onglet projet et ressources ci-dessous. Dans ce cours, nous parlerons de la cascade, des feuilles de style et des différentes règles du CSS. Tout d'abord, nous allons commencer par un aperçu de ce qu'est le CSS et de son utilisation. Ensuite, nous allons nous plonger directement dans notre tutoriel. Dans le didacticiel, vous pouvez vous attendre à apprendre à écrire du CSS, à connecter votre CSS à votre code HTML, à utiliser efficacement une feuille de style et à utiliser le CSS pour donner rapidement vie à un design Ce cours s'adresse à tous ceux qui souhaitent créer et styliser leurs propres sites Web et apprendre à travailler avec le CSS. À la fin de ce cours, vous serez capable de le faire vous-même. Commençons donc. 2. Projet de classe: Projet de classe. Notre projet pour cette classe sera de styliser un site Web simple en utilisant uniquement du CSS. Pour ce cours, il est essentiel avoir accès à un ordinateur sur lequel vous pouvez exécuter le code Visual Studio ou un autre éditeur de code de votre choix. Vous devez également disposer d'un navigateur tel que Google Chrome , car nous l'utiliserons pour afficher notre page Web. Comme je l'ai déjà mentionné, un code de démarrage sera disponible si vous souhaitez suivre le didacticiel. Je vais laisser des liens vers tous les actifs et ressources vous aurez besoin dans l'onglet projet et ressources ci-dessous. 3. Qu'est-ce que le CSS ?: Qu'est-ce que le CSS ? CSS est l'abréviation de feuilles de style en cascade Il s'agit d'un langage de feuille de style utilisé pour décrire la manière dont le HTML est présenté à CSS peut être lié à l'aide d'une feuille externe ou écrit dans le document HTML lui-même. Nous explorerons les deux options tout au long de ce cours. En tant que langage, le CSS est composé de deux parties principales, les sélecteurs et les règles Voyons en quoi consiste chacune d'entre elles. 4. Sélecteurs et règles: Sélecteurs et règles. Les sélecteurs sont des indicateurs qui indiquent à l'ordinateur quels éléments masquer les styles souhaités, et les règles sont ces Chaque règle CSS commence par au moins un, mais peut-être plusieurs sélecteurs. Ils peuvent sélectionner un type d'élément tel qu'un H, un P ou une image, une classe d'élément spécifique ou l'idée d'un élément singulier. Des classes et des identifiants peuvent être ajoutés à n'importe quel élément HTML pour aider à les regrouper ou à les identifier. Mais il existe une différence essentielle entre les classes et les identifiants. Alors que les classes peuvent être ajoutées à plusieurs éléments pour aider à diffuser un ensemble cohérent de styles, qu'il s'agisse d'une page Web ou d'un site entier. Les identifiants, en revanche, sont censés être uniques à un seul élément. En fonction de votre objectif de style, vous pouvez utiliser des classes ou des identifiants, ou les deux. La plupart des sites Web ont une combinaison saine des deux. Les sélecteurs de classe sont écrits en CSS en ajoutant le nom de la classe, que vous choisissez vous-même par un point Les identifiants sont écrits presque de la même manière, mais au lieu d'un point, vous utilisez un hachage 5. Cascade: Cascade. Comme vous pouvez le constater, il existe plusieurs manières de sélectionner un élément à l'aide du CSS. Mais comment savoir si votre règle sera appliquée correctement ou non ? Le CSS possède deux fonctionnalités qui peuvent contribuer à cette cascade et à cette spécificité. Comme son nom l'indique, les styles en CSS sont appliqués en cascade. Cela signifie que les styles écrits en haut du fichier sont appliqués en premier, puis au fur et à mesure que vous descendez, les autres styles sont appliqués par-dessus le style initial. Si vous avez écrit deux styles contradictoires pour le même élément, en tant que niveau de base, celui qui apparaît plus loin dans la feuille CSS sera celui qui sera appliqué. Cependant, cela n'est pas très facile à maintenir, surtout si vous avez plusieurs feuilles de style avec lesquelles travailler Il existe donc un moyen de contourner ce comportement. Jetons un coup d'œil à une autre fonctionnalité appelée spécificité. 6. Spécificité: Spécificité La spécificité nous permet de remplacer les règles énoncées précédemment en fonction de la précision avec laquelle l' élément est sélectionné Par exemple, si toutes les balises P étaient définies pour avoir la couleur rouge, nous donnions ensuite à une balise P spécifique la classe spéciale et donnions à cette classe la couleur bleue, indépendamment de l'endroit où cette règle était énoncée dans le document. Ainsi, quelle que soit la cascade, cette balise P serait obligée de prendre la couleur bleue car les classes sont plus spécifiques que les sélecteurs d'éléments Il en va de même pour les identifiants. Si nous donnions à cette même balise P l'identifiant unique et que nous définissions la règle pour que cet identifiant soit de couleur verte, cette balise P prendrait alors la couleur verte. Cela est dû au fait que les identifiants sont les plus spécifiques de nos trois options de sélection Donc, en allant du moins spécifique au plus spécifique, nous avons des éléments, puis des classes, puis des identifiants. 7. Déclarations: Déclarations. Une fois que vous avez correctement ciblé l'élément ou les éléments avec lesquels vous souhaitez travailler, il est temps de rédiger vos styles. Comme vous l'avez peut-être déjà remarqué, les règles CSS sont écrites à l'aide d'un ensemble de déclarations qui imposent l' utilisation de propriétés et de valeurs. La propriété sur le côté gauche de la déclaration est la caractéristique stylistique que nous voulons modifier avec notre règle La valeur sur le côté droit correspond au choix de style spécifique que nous avons fait. Lorsque nous combinons la propriété de gauche et la valeur de droite, nous obtenons une déclaration CSS. Ces déclarations figureront dans nos ensembles de règles ou règles CSS , puis seront appliquées à notre code HTML. 8. Informations supplémentaires: Informations supplémentaires. Comme vous pouvez l'imaginer, CSS possède des centaines de propriétés différentes, mais ne vous inquiétez pas, vous n'êtes pas censé toutes les mémoriser. Vous pouvez utiliser des sites tels que W three Schools, Mozilla developer dots et stack overflow pour rechercher la propriété CS appropriée à utiliser chaque fois que vous en avez besoin. Chaque propriété peut avoir de nombreuses valeurs différentes qui doivent être orthographiées correctement ou écrites dans le bon ordre pour fonctionner. Donc, si vous n'êtes pas sûr la propriété ou du style avec lequel vous travaillez, il est recommandé de simplement consulter la documentation. 9. Tutoriel: C'est bon. Il est donc temps d'ajouter du CSS, style à notre page. Mais comment travaille-t-on avec le CSS, où va-t-il aller et comment se connecte-t-il ? Et plongeons-nous dans le vif du sujet depuis le début. Le meilleur endroit pour écrire du CSS est dans son propre fichier. Nous allons donc créer notre propre fichier CSS. Pour ce faire, allons dans le dossier où se trouve Indext HTML, et créons un nouveau fichier Nous l'appellerons files point CSS. Génial. Nous avons créé notre fichier CSS. Parfait. Ce que nous devons faire maintenant, c'est le lier à notre fichier HTML, car pour le moment, ils sont en quelque sorte assis l'un à côté de l'autre, mais ils ne savent pas nécessairement qu'ils sont censés travailler ensemble. Nous devons donc passer à notre fichier HTML à points d'index. Nous allons continuer et lier notre fichier CSS à notre code HTML. Nous allons donc entrer dans la section d'en-tête, et nous allons utiliser ce que l'on appelle un élément de lien. C'est donc exactement ce que fait l'élément link. Il lie un fichier à un autre. Nous allons donc utiliser de l'encre, puis la relation. de lien possède plusieurs attributs différents élément de lien possède plusieurs attributs différents. L'un d'eux est RL, qui signifie relation. Il veut donc savoir pourquoi ces deux feuilles doivent, par exemple, fonctionner ensemble. Nous allons donc appeler celui-ci. La relation ici est une feuille de style car le CSS, la feuille CSS avec laquelle nous travaillons, est une feuille de style. Il est destiné à styliser le HTML. Ensuite, nous allons utiliser un autre attribut um appelé HRF. HRF est essentiellement l'URL ou l' emplacement du fichier Dans ce cas, comme il s'agit d'un fichier local, il sera là, mais vous pouvez même utiliser google.com pour votre HRF si c'est ce qu'il doit être Vous ne l' utiliseriez pas comme feuille de vente car Google n'est pas un fichier CSS, mais vous voyez l'idée. Le HRF peut être utilisé dans diverses situations pour différents types de liens, et nous utiliserons les liens un peu plus tard Donc pour l'instant, ce que nous allons faire, c'est prendre notre HRF, et nous allons le mettre nous allons le lier à notre style point CSS Maintenant, souvenez-vous que lorsque nous parlions terminal, de la barre oblique et de tout ça, de la même manière, nous pouvons indiquer qu'un fichier se trouve dans le même dossier que celui dans lequel nous nous trouvons actuellement en utilisant une barre oblique Donc, si je fais une barre oblique et que vous verrez que VSCode reconnaît déjà ce que j'essaie de faire, il listera tous les répertoires des fichiers qui se trouvent dans le dossier actuel dans lequel je travaille Donc, si je passe à point slash et à styles point CSS, il s'agit en fait de la feuille de style que nous venons de créer Alors appuyez sur Entrée, et il l'a déjà souligné parce que cela a essentiellement créé ce lien dans VSCode en me disant : Oui, oui, nous avons lié ce fichier CSS Il ne me reste plus qu' à fermer, encore une fois, une étiquette à fermeture automatique. Vous remarquerez que la plupart des étiquettes situées dans la tête se ferment automatiquement car il n'y a rien entre elles. Ils sont simplement destinés à contenir des informations, et nous allons les enregistrer. Et maintenant, nous devrions avoir notre feuille de style dans notre code HTML. Mais rien ne se passe encore. Encore une fois, parce que nous n'avons rien mis dans notre CSS. Alors allons-y et commençons à le styliser. Il existe plusieurs façons de cibler des éléments HTML avec du CSS, allons-y et déplaçons cela ici afin que nous puissions examiner les deux en même temps. Vous pouvez donc les cibler en utilisant de quel type d' élément il s'agit, n'est-ce pas ? Vous pouvez donc cibler le corps. Vous pouvez cibler tous les divs, les zones H, les P, les chaînes, les formulaires de saisie, etc. C'est une façon de cibler. Et si vous avez une sorte de changement global à apporter, c'est probablement la meilleure façon de le faire Donc, par exemple, il y a une chose que j'aimerais changer car, comme vous le remarquez ici, il s'agit d'une police SnSerf et la police que nous utilisons comporte Il a ces petits bords, ces petits chapeaux. Je veux m'assurer que la police utilisée dans ce document est San, son serif Nous allons donc sélectionner le body tag. Le corps, nous allons donc sectionner l'élément corps, et nous allons créer une famille de polices. Donc, famille de polices. Il existe donc tous ces différents types de propriétés auxquels vous pouvez accéder dans le CSS. La famille de polices n'est qu'une famille parmi des dizaines et des centaines. La famille de polices vous permet donc déterminer le type de police . D'une manière générale. Vous pouvez parfois spécifier la police réelle. Parfois, cela implique de télécharger la police ou de la lier et tout ça. Mais dans ce cas, je veux juste une police San sera. Je vais donc faire défiler la page jusqu'à l'endroit où il est écrit Ariel, Helvetica et SNSerf et cliquer dessus Alors maintenant, j'espère que tout ce qui se trouve dans le corps devrait être SnSerf Et une chose vraiment très importante à ne pas oublier après avoir apporté une modification à vos fichiers est de toujours être en sécurité. Jetons donc un coup d'œil là-bas, et regardons ça. L'ensemble de notre texte est désormais SNSerf. Il a Il n'y a plus de petits chapeaux et queues. Il est parfaitement propre et a l' air un peu moderne. Parfait. Très bien, voyons ce que nous pouvons faire d'autre avec cette page. Maintenant, voici un truc. Je veux cibler le H , et pour être honnête, je peux le faire simplement, voyons voir. Je veux vraiment cibler, voyons voir. Je souhaite cibler une partie du texte de la page, mais pas tout le texte de la page. Si vous regardez notre image ici, vous verrez qu'une grande partie du texte est en fait blanc. Donc c'est blanc, c'est blanc. Essayez-le gratuitement pendant sept jours en blanc. Mais ce texte en bas semble être gris, et ce texte semble être rose ou rouge ou quelque chose comme ça. Nous voulons donc avoir une combinaison de différents types et de différentes couleurs de texte. Maintenant, comme je l'ai mentionné, avec le codage, il existe différentes manières d'aborder les choses. Certaines méthodes sont meilleures que d'autres, mais cela dépend vraiment de vous et de vos préférences personnelles. Donc, la façon dont je voudrais aborder cette question est de rendre la couleur globale blanche , puis de cibler probablement les éléments non blancs. Je pense que c'est le moyen le plus propre de le faire. Une autre façon de le faire est de cibler le corps, et d'utiliser la propriété I use the color, qui est destinée à la couleur de police, et je vais simplement la nommer blanche. Maintenant, vous avez peut-être déjà compris ce qui va se passer. Notre page semble contenir presque rien , n'est-ce pas ? C'est vrai. Donc, ce que nous allons faire maintenant, c'est mettre en œuvre notre historique. Alors maintenant, il est essentiel que nous prenions en compte le contexte. à nos fichiers, nous savons Grâce à nos fichiers, nous savons donc si nous examinons les fichiers inclus dans notre projet que nous avons une image d'arrière-plan, ce bureau d'arrière-plan. Mais ce n'est pas vraiment l'image rose. Ce sont juste les petites icônes qui sont sur le dessus. Nous devons donc travailler dans ce contexte. Très bien, alors allons-y et créons notre image d'arrière-plan Et nous allons utiliser, nous allons le lier à notre BG into ou à notre PNG de bureau. La meilleure façon de procéder est donc d'utiliser une URL, tout comme vous avez google.com, tout comme vous avez hf, vous allez utiliser une URL pour lier ce sélecteur au fichier image d'arrière-plan inclus dans notre projet Nous allons donc créer une URL. URL, crochets. Et puis entre guillemets, je vais spécifier l'emplacement de ce fichier de bureau BG Intro, n'est-ce pas ? Donc, si je regarde où nous en sommes, nous sommes actuellement dans les styles à points CSS, je dois descendre d'un niveau jusqu'aux images, puis dans le Bg introdsktop Donc, pour y arriver, je tape une barre oblique indiquant ce dossier Ensuite, je veux aller dans le dossier Images, donc je vais y ajouter des images, puis cliquer sur Eh bien, je vais taper le point png de Bg intro desktop, et cela devrait le relier directement à cette image Donc, si je clique sur Enregistrer et que je reviens en arrière. Génial. Nous pouvons commencer à voir que notre image est appliquée. Mais il y a encore une chose. Il y a cette couleur rose qui ne fait pas partie de l'image d'arrière-plan. Comment pouvons-nous même y faire figurer ? Eh bien, il existe une autre propriété appelée couleur de fond. Je pense donc que cela est accompagné d'un guide de style , c'est pourquoi ils nous ont donné tous ces fichiers. Donc, si nous passons au point D du guide de style, et que nous passons à, voyons voir. Il y a une mise en page. Les couleurs. Il y a des primates rouges, verts et bleus, une police D'accord, ils nous ont en fait donné une police spécifique, donc nous pouvons certainement l'utiliser si nous le souhaitons Je ne sais pas exactement de quelle couleur il s'agit, mais tu sais quoi ? Nous n'avons même pas besoin de deviner. Profitons d' un autre outil que nous avons à notre disposition. Il y a donc cet outil appelé Eyedropper. Il s'agit d'une extension que vous pouvez ajouter à votre compte Google Chrome, totalement gratuite, et il vous suffit de cliquer dessus. Une fois que vous l'avez installé sur vos extensions Google Chrome, vous cliquez dessus et vous cliquez là où il est écrit Choisir la couleur de la page Web, et vous pouvez simplement survoler la partie de votre page Web pour obtenir cette couleur Donc, comme nous ne savions pas de quelle couleur il s'agissait, nous avons simplement choisi cette couleur, et nous pouvons voir qu' elle nous est décrite de trois manières différentes. C'est donc dans un hachage EC 7476. C'est donc une façon de le décrire. Il est également disponible en HSL, teinte, saturation et luma, comme 359, 76 % et 69 % Euh, ou c'est en RGB, donc c'est une combinaison de rouge, de vert et de bleu, et voici les chiffres. Donc 236 rouges, 116 verts et 118 bleus. Nous pouvons utiliser n'importe lequel d'entre eux. Il n'y a pas de bonne ou de mauvaise réponse. Dans ce but. Je vais juste utiliser le hachage parce que c'est le plus court Donc, si je reviens à nos styles, je créerai une nouvelle propriété. Et je les mets simplement par ordre alphabétique, mais vous pouvez vraiment le faire dans l'ordre que vous voulez. Je trouve juste que c'est plus facile à trouver quand c'est alphabétique. Vous pouvez choisir la couleur de fond, et j'ajouterai le hachage. Je vais économiser. Vous verrez que le code VS le remplit réellement pour moi. Il me dit de quelle couleur il s'agit. Et nous y voilà. Maintenant, nous avons notre arrière-plan rose. Nous pouvons voir notre texte blanc, et nous sommes sur la bonne voie. Génial. Génial. Nous sommes bien placés. En fait, nous sommes dans une telle situation que nous voudrions peut-être le transférer dans notre dépôt GitHub, car disons que nous faisons autre chose et que nous nous trompons complètement, nous pourrions finir par souhaiter nous pourrions finir par souhaiter pouvoir revenir à cet endroit Alors allons-y et faisons-le. Nous travaillons donc avec deux pièces différentes en ce moment. Allons-y et validons l'arrière-plan du bureau d'introduction, qui est l'image que nous utilisons Allons-y et validons également nos styles par points CSS. Et allons valider notre code HTML à points d'index, qui relie ces fichiers entre eux. Génial. Donnons donc notre message sous forme de styles initiaux. Essayons d'abord d'épeler correctement. Nous y voilà. Et nous allons nous engager à le faire. que nous avons effectué ce commit, nous allons le transférer vers notre dépôt distant pour nous assurer que, même si notre ordinateur disparaît dans les 5 prochaines minutes, il est toujours là sur Internet Et lorsque nous aurons un nouvel ordinateur, nous pourrons le ramener. Donc, ce que nous allons faire c'est appuyer sur ces trois petits boutons ici, ces trois petits points ici, et nous allons cliquer sur le mot push parce que nous avons déjà connecté les deux référentiels, cela signifie que lorsque je dis appuyer, je veux dire, poussez-le sur la télécommande à laquelle nous l'avons connecté Allons-y et cliquons sur Push. Et vous verrez que la petite barre bleue commence à disparaître. Il n'y avait pas beaucoup de fichiers, donc ça ne va pas prendre très longtemps. Mais si nous allons sur GitHub et que nous revenons au code de notre formulaire d'inscription, nous verrons que nous venons de recevoir des notifications récentes. Nous avons donc un fichier styles at CSS, qui est notre style initial ici, et nous avons notre fichier Images, qui contient notre dossier Images, qui contient un fichier, qui est le fichier PNG du bureau. Génial. C'est un endroit où il fait bon vivre. Nous survolons ça. Donc, la prochaine chose que nous voulons aborder est de jeter un coup d'œil à ce que nous avons ici. La prochaine chose que nous voulons probablement aborder est soit de les séparer, soit de les regrouper en différents éléments. Nous pouvons y aller dans les deux sens. Commençons par aborder ces petits éléments, puis nous les séparerons. Et encore une fois, comme je l'ai dit, avec le codage, il existe huit façons différentes de faire les choses. Cela dépend entièrement de vous et de ce que vous préférez faire en premier. Et, bien sûr, vous pouvez toujours changer d'avis et faire quelque chose de différent. Si vous avez décidé que, vous savez, vous avez choisi la mauvaise approche, très bien, surtout pendant que vous apprenez. N'hésitez pas à faire des erreurs , puis à contrôler Z et à faire quelque chose de nouveau. Commençons donc par prendre ceci. Essayez-le gratuitement pendant sept jours et 20$ par mois par la suite. Allons-y et essayons de créer cette boîte. Permettez-moi de revenir à notre guide de style pour voir s' il y a quelque chose. Je pense que c'est peut-être ce bleu foncé ou peut-être le bleu grisâtre. Je n'en suis pas tout à fait sûr. Essayons-y et voyons ce que nous pouvons faire. Donc, pour cibler cette ligne ici, cette balise P, d'accord, il y a plusieurs façons de le faire. Nous pouvons soit ajouter un rembourrage à l'étiquette P, soit envelopper dans un séparateur et ajouter le style au C'est à vous de décider ce que vous voulez faire. Tu sais, fais juste ton choix et persévère. Parlons donc du rembourrage. Ce qu'est le rembourrage, c'est ce petit espace, cet espace entre l'espace entre le texte et la limite extérieure de la boîte. C'est du rembourrage. Donc, en fait, je viens de répondre à ma propre question. Nous devons utiliser un div si nous voulons utiliser le rembourrage. La marge, cependant, se situe à l' extérieur de quelque chose, n'est-ce pas ? La marge est donc la distance entre deux objets. Ainsi, par exemple, parce que nous voulons utiliser une couleur d'arrière-plan, nous devons l'avoir comme arrière-plan pour un élément. Alors laissez-moi vous montrer ce que je suis. Si j'avais la couleur de fond pour cette étiquette, et que je l'avais créée, une couleur grisâtre bleutée . Essayons donc quelque chose ici. Prenons toutes les étiquettes en forme de pois, nous allons définir la couleur d'arrière-plan, puis nous allons sélectionner. Essayons ce bleu grisâtre. Je ne suis pas sûr. C'est ce que nous ferons et nous économiserons. Toutes les balises P ont cette couleur. Mais comme vous le voyez, il n'y a pas non plus beaucoup de place autour des balises p, n'est-ce pas ? Ce ne sont que de très longues lignes droites. Pour éviter cela, nous pouvons créer une boîte autour de la balise P et utiliser un peu de rembourrage à l'intérieur cette boîte pour spécifier l'espace que nous voulons pour cet élément Alors laissez-moi vous montrer ce que je veux dire. Débarrassons-nous de cette couleur de fond de balise P. Et créons une boîte autour de notre tag P, non ? Nous allons donc créer cette boîte plus grande autour de notre petite ligne de texte ici. Créons donc un autre div et enveloppons-le autour de notre balise P. Génial. D'accord. Maintenant, nous voulons également cibler cette balise P spécifique, parce que, comme vous l'avez remarqué, lorsque j'ai mis cette couleur sur la balise P, elle a fait apparaître toutes les balises p, n'est-ce pas ? Ce n'est pas ce que nous voulons. Nous voulons que ce div spécifique entoure cette balise P spécifique. Maintenant, il y a deux façons de le faire. Nous pouvons en fait, essayer de faire quelque chose d'imbriqué où nous pourrions écrire quelque chose comme nous pourrions écrire quelque chose Nous pouvons écrire quelque chose comme, euh , body, puis l'enfant du corps est un div. Ensuite, je pense que c'est dans une autre division, puis nous avons un Ptag et c'est le petag que nous cherchons à cibler Mais tout d'abord, nous ne cherchons pas à cibler le tag Pe. Nous cherchons à cibler le div. Et deuxièmement, ce n'est pas encore assez précis. Bien sûr, cela ciblera cette division spécifique, et cela fonctionnera. Donc, si je fais de la couleur de fond, et allons-y, je ne pense pas que c'était le bon bleu. Faisons un bleu différent cette fois. Passons au bleu foncé. C'est peut-être du bleu normal, mais nous verrons. C'est ce que nous allons faire. Cela ciblera cette division spécifique. Mais la seule raison pour laquelle il cible cela est qu'il n' y a qu'une seule division. Regardons ce que j'ai fait ici. J'ai donc ciblé le corps, le corps. Ensuite, j'ai ciblé les divs à l'intérieur du corps, savoir ce div et ce div Ensuite, j'ai ciblé les divs au sein des divs, et il n'y a, dans ce cas, une seule div dans une Je sais que cela devient un peu compliqué, mais dans ce cas, il n'y a qu'une seule division dans une division, et c'est cette division. Ce n'est donc pas la meilleure façon de procéder, car même le fait que j' essaie de vous l' expliquer ne soit pas clair. Ce que nous préférons faire, c'est simplement cibler ce diviseur spécifique, cet élément spécifique, et aucun autre élément Nous pouvons donc procéder de deux manières. Si le design que nous cherchons à implémenter sera réutilisé ailleurs. Nous pouvons utiliser ce qu'on appelle une classe. Une classe est donc un type de propriété qui est placé sur n'importe quel code HTML visible. Vous pouvez donc taper une classe, puis vous pouvez donner à une classe le nom que vous voulez. N'importe quel texte que vous voulez lui donner, vous pouvez le nommer ainsi. Donc, si j'appelle cette classe, vous savez, CTA comme un appel à l'action, alors ce sera le nom de la classe à cibler Et si j'ai d'autres appels à l'action sur le site Web, je veux peut-être qu'ils se ressemblent tous. Donc, quand je vais ici, je peux simplement changer cette structure et cibler le CTA Maintenant, pour cibler une classe, vous devez en fait mettre un point avant le texte. Le point indique donc les classes. Lorsque je tape CTA et que je mets les couleurs d'arrière-plan, je identifie comme ayant la classe CTA et c'est la seule chose avec une classe CTA, elle ne devrait cibler qu'une fois de plus cet Génial. Je l'ai encore fait. Parfait. Et si nous voulions cibler uniquement une instance singulière de quelque chose, n'est-ce pas ? Par exemple, nous ne voulions pas cibler un autre type de CTA ? C'est littéralement juste pour ce seul et unique CTA. Eh bien, ce que nous pouvons faire alors, c'est utiliser cet autre identifiant appelé identifiant , essentiellement une pièce d' identité. Il s'agit d'un autre attribut que vous pouvez utiliser sur HTML visible ou sur des éléments HTML non visibles. Et vous pouvez l'appeler en tapant littéralement un identifiant. Et tout comme la classe, vous pouvez lui donner le nom que vous voulez. Vous pouvez donc taper pour celui-ci, je pourrais taper un CTA unique Et gardez-le. Et puis quand je vais ici pour le spécifier, je vais en fait utiliser un hachage car un hachage est le sélecteur d'identifiants Je vais donc simplement taper le nom, Unique CTA, et je vais faire mes petits crochets, puis peut-être que je changerai la couleur de fond Cette fois, je vais le mettre en bleu. Mais nous l'avons déjà dit, donc cela ne devrait pas changer, n'est-ce pas ? Faux. Cela a définitivement changé. Maintenant, pourquoi est-ce arrivé ? Eh bien, le truc avec le CSS, c' est qu'il a une hiérarchie. Il existe donc deux manières de déterminer cette hiérarchie et la spécificité invoquée par le CSS. Au niveau le plus bas, au niveau le moins important, se trouve l'élément. Ce sont donc nos marques corporelles. Lorsque nous tapons H un, H deux, ils font généralement référence au type d'élément en général, n'est-ce pas ? Ce ne sont là que des éléments non spécifiques. Viennent ensuite les cours. Si je précise que tous les H doivent avoir la couleur rouge sous forme de texte. Mais ensuite je précise que je donne une classe à l'un de mes H, une classe à H. Quelle que soit la couleur que j'ai mise dans cette classe H one remplacera en fait ce que j'ai mis pour cet élément H one Donc, vous savez, ce H sera alors bleu au lieu de rouge. Est-ce que cela a du sens ? C'est bon. Maintenant, comme vous venez de le voir, les identifiants sont encore plus précis . Les identifiants sont censés être des identifiants uniques pour un seul élément Vous ne devez pas les réutiliser pour plusieurs éléments. C'est vraiment juste destiné à cet élément individuel. Donc, si je voulais être vraiment très précise et que je disais, juste ce H, ce div, j'utiliserais un identifiant et je dirais H un identifiant, puis je changerais la couleur en jaune. Hein ? Donc, si j' y allais, que je prenais mon H one et que j' ajoutais tous ces cours. J'ai donc ajouté class equals H one class, et ID est égal à H one ID. Je l'épelle correctement, c' est très important. Selon vous, lequel sortirait en tête ? J'espère que vous avez deviné H one ID. Et si c'était le cas, vous le devineriez, c'est vrai, parce que c'est jaune. C'est donc censé être le cas, c'est censé passer par la spécificité. Mais disons que je n'avais pas cet identifiant H one, est-ce pas ? Disons que je viens d'avoir un cours. Il devrait être bleu, non ? Et ça l'est. Mais il y a une autre chose dont il faut être conscient. Le CSS fonctionne également en fonction de ce qu'il voit et dans quel ordre il le voit. La dernière chose que voit le CSS, c'est ce qu'il faudra. Donc, si vous avez écrit H une classe et que vous l'avez appelée bleue ici, et que vous l'avez appelée verte ici, puis Oups Et puis tu es passé sous le vert, tu as dit, en fait, non, je vais le colorer en violet. Si vous portez votre linter pour cela, cela déclenchera probablement une erreur Mais, supposons que vous ne le fassiez pas et que vous l'enregistrez, il devrait choisir la dernière version de cette classe que vous spécifiez. Donc, si vous devinez, ça devrait être violet. Et quand vous vérifiez, il est violet. Donc, ce que nous devons retenir de cette leçon, ce sont deux choses. Celui dans lequel le CSS utilise des classes. Vous pouvez donc spécifier des classes et les appliquer à plusieurs éléments. Je peux donc réellement postuler. Même s'ils ne sont pas des H, je peux m'inscrire à ce PTAG et, vous savez, le sauvegarder Et puis j'aurais dû bien, c'est un peu difficile à dire, mais celui-ci est violet aussi. Je peux donc l'appliquer à plusieurs éléments différents. Les classes sont destinées à partager un certain nombre d'éléments. Vous pouvez cibler l'élément lui-même, le type d'élément, mais sachez simplement qu' il sera transféré tous ces types d'éléments, ce qui est vraiment recommandé uniquement pour le corps ou si vous savez que tous les PTA doivent avoir une certaine taille ou quelque chose comme ça Et puis nous avons des cartes d'identité, non ? Les identifiants sont destinés à cibler quelque chose de très spécifique. Ils ne sont censés être que singuliers ? Vous ne devez utiliser qu'un seul identifiant pour un élément et vous ne devez pas les répéter . C'est à cela que servent les cours. Génial. Allons-y et personnalisons le reste de cette page. Allons-y donc et ajoutons le rembourrage dont nous parlions tout à l'heure à notre élément Il semble donc qu'il y ait une bonne quantité de rembourrage à gauche et de rembourrage à droite, et un peu de rembourrage en haut et un peu de rembourrage en bas Comme nous l'avons mentionné, le rembourrage est ce qui se trouve à l'intérieur d'un élément Il s'agit essentiellement d'agrandir l' élément lui-même, non ? Considérez-le comme un rembourrage naturel. Tu veux mettre des couches supplémentaires pour te protéger du froid. Ajoutons-en donc quelques-uns. Ajoutons un peu de rembourrage. Donc, selon la façon dont vous écrivez le rembourrage, il existe deux manières d' écrire le rembourrage Vous pouvez en fait écrire le remplissage Um, puis spécifier la direction. reste donc du rembourrage. Ensuite, vous pouvez le spécifier en pixels. Disons que c'est environ 20 pixels. Et cela ajoutera un peu de rembourrage sur la gauche, juste un peu de rembourrage juste là juste un peu de rembourrage juste Il existe un autre moyen , puis vous pouvez le faire pour le rembourrage à gauche, à droite, en haut et en bas Ce sont les quatre côtés de tout élément en CSS, à gauche, à droite, en haut et en bas. C'est une façon de cibler des objets à l'aide d'un rembourrage. Vous pouvez également saisir le mot seul et utiliser deux sélecteurs Vous pouvez donc sélectionner le haut et le bas, ainsi que la gauche et la droite. C'est un peu un raccourci pour pouvoir écrire le rembourrage en une seule ligne Vous pourriez donc écrire le rembourrage supérieur et inférieur, car de plus, si nous regardons notre design, il semble qu'ils devraient être assez similaires, n'est-ce pas ? La gauche et la droite se ressemblent, et le haut et le bas se ressemblent. Nous pourrions donc placer notre gauche et notre droite comme, disons, 40 pixels ou, désolé, le haut et le bas devraient probablement mesurer environ 20 pixels. Et à gauche et à droite, peut-être 40 ou 60 pixels. Euh, jetons un coup d'œil. Et c'est à peu près ce que nous recherchons, peut-être pas exactement ce que nous recherchons, mais à peu près. Le problème ici, cependant, est que nos éléments s'étendent sur toute la page, qui n'est pas du tout ce que nous voulons faire. Nous voulons nous assurer qu'ils sont juste gentils et mignons et qu'ils sont habillés comme ils les ont ici sur l'image, non ? Donc, pour ce faire, nous allons devoir utiliser une sorte de contenant plus grand, quelque chose pour tout cela que tout cela rentre essentiellement dans ces deux colonnes. Nous devons, par exemple, les faire rester dans deux colonnes, puis aussi , réparer ce rembourrage et le rendre un peu plus joli Faisons donc quelques étapes pour y parvenir. Tout d'abord, séparons-les en deux colonnes, car je pense que cela facilitera un peu notre style. Donc, la façon dont je vais choisir de le faire, et encore une fois, 100 façons différentes de faire 100 choses différentes. Mais je vais choisir de le faire avec Flexbox. Flexbox est l'un des meilleurs outils de CSS, et je vous recommande vivement prendre le temps de l' apprendre, car vous allez l'utiliser tous les jours , je vous le garantis Flexbox est une disposition de boîte flexible qui crée essentiellement un type de conteneur contenant divers éléments Et en fonction des propriétés que vous attribuez à cette boîte flexible, sa taille changera essentiellement en fonction de la taille de la fenêtre et de l'écran qu'elle représente C'est vraiment génial à utiliser pour la conception réactive et les mises en page réactives, et cela change un peu la donne Utilisons donc Flexbox et utilisons certains de ces outils pour notre page ressemble à ce que nous voulons Et je vais avoir ce lien vers CSS Trix dans la description ci-dessous afin que vous puissiez y jeter un œil par vous-même. En regardant le design, nous savons que ces deux parties de texte sont censées être ensemble, et toute cette section est en quelque sorte censée être ensemble, ces deux colonnes que nous examinons. Et puis, plus grand que cela, il semble qu'il y ait rembourrage latéral ou autre sur le corps ou peut-être une marge, je n'ai pas encore décidé Alors, allons-y, donnons quelques identifiants à ces deux divs, puis partons de Donc, ce que nous pouvons faire ici, c'est, en fait, vous savez ce que nous allons faire ? Nous allons tout regrouper dans un seul grand fichier et y mettre tous les styles. Donc, c'est un div, et vous pouvez voir en quelque sorte où les choses capturent des choses. Il y a donc le corps, qui est en quelque sorte l'élément de page. Je ne vais pas m' embêter avec ça. Utilisons un div qui enveloppe tous les éléments qu'il contient Et nous allons lui donner le nom de classe du conteneur au cas où je voudrais l' utiliser à nouveau sur une autre page ou quelque chose comme ça. Et maintenant, donnons ce conteneur, puis sélectionnons-le. Hum, sélectionnez ce conteneur. Et donnons-lui l'affichage de Flex. Ainsi, lorsque vous tapez display flex, cela crée en fait un conteneur Flexbox Donc, si nous l'avons bien fait, vous verrez ici que nos deux informations sont désormais côte à côte. Maintenant, ils sont déjà séparés parce que si vous vous souvenez tout à l'heure, nous avons créé ces deux divs. Flexbox a donc déjà fait une grande partie du travail pour nous, ce qui est génial Voyons donc ce que nous devons faire d'autre. Nous devons nous assurer d'avoir une sorte d'espace, un peu de rembourrage ici C'est joli, uniforme sur tout le pourtour. Allons-y et ajoutons-le. Faisons donc un peu de rembourrage. Et nous allons faire les quatre parties. Maintenant, une autre astuce pour le rembourrage est que lorsque vous faites les quatre côtés, c'est la même quantité Vous pouvez simplement le mettre en un seul chiffre. Donc, si vous mettez 50 pixels, cela devrait faire 50 pixels sur les quatre côtés. pixels ou REM ou EM sont donc essentiellement deux manières différentes de décrire la taille. Personnellement, je préfère utiliser REM ou EM simplement parce que c'est un peu plus personnalisable. Ainsi, si votre navigateur est configuré pour une taille de police de 16 pixels, toutes les tailles de police suivantes seront basées sur cette taille de racine. Je préfère donc utiliser REM simplement parce que c'est un peu plus adaptable, car si quelqu'un change la taille de ses pixels pour 24, par exemple, pour mieux voir les choses, il s'ajustera, mais il ne conservera pas cette taille très petite. C'est difficile à voir. Je vais donc vraiment y aller. Oh, et aussi dans la plupart des navigateurs, pixels par défaut, la taille de police par défaut est de 16 pixels. Donc, en gros, tout ce qui suit dans REM est une multiplication de cela. Un REM est donc de 16 pixels. Deux REM font 32 pixels. Trois REM, c'est 30 Non. Trois REM font 48 pixels, et cetera, Donc, une fois que vous vous y serez un peu plus habitué , vous vous y habituerez un peu. Donc, ce que je vais faire ici, c'est à trois REM, passer à trois REM, et je vais également changer le rembourrage de mon CTA en REM, le rembourrage de mon CTA en REM, juste pour me faciliter la vie un peu Et ce sont des ventres approximatifs. Moi aussi, je joue en quelque sorte avec les frondes. Donc, si je reviens ici, en commençant à voir, vous savez, commencer à se former sur les bords, allongeons un peu le rembourrage. Et l'avantage du RMT, c'est qu'il suffit d'augmenter quelques chiffres, et c'est comme une tonne de rembourrage en plus Comme ça, il y a une tonne de rembourrage en plus sur le côté. Je pense qu'il pourrait même atteindre dix. Bien, restons-en là. Pour l'instant, cela semble être une bonne quantité Génial. Nous avons donc le rembourrage autour de nos éléments, et maintenant nous avons nos deux éléments côte à côte Regardons à nouveau notre design. D'accord, donc une autre chose à remarquer c'est que notre texte est centré, et je suppose qu'il l' est aussi, parce qu'il est en quelque sorte centré sur centré, C'est une chose importante à laquelle il faut prêter attention lorsque vous cherchez à mettre en œuvre un design lequel les éléments sont centrés, s'ils penchés vers la gauche, vers la droite, etc. vraiment génial avec Flexbox et avec Google Chroma General c'est que vous pouvez jouer avec ces styles dans le navigateur lui-même Donc tu n'as pas à coder tout un tas de choses pour ensuite te demander si ça marche. Vous pouvez vraiment jouer avec ça ici et voir si cela fonctionne. D'accord, donc ce que je vais commencer par faire c'est de centrer ces éléments dans ce conteneur Vous verrez donc notre conteneur ici. Et si vous faites défiler l'écran vers le bas sous la section des styles juste ici, vous pouvez voir le rembourrage Nous avons donc dix bandes de rembourrage sur tous les côtés, soit 160 pixels de rembourrage sur tous les côtés. C'est cette marge verte juste là. Plutôt cool, non ? Euh, donc le milieu, c'est la taille de nos éléments eux-mêmes. Donc, quelques problèmes ici. Le formulaire n'est pas vraiment conçu, c'est pourquoi il semble si rétréci Peut-être que le texte est également un peu petit. Allons-y, étoffons en quelque sorte ces composants, puis voyons de quelle quantité de rembourrage nous avons besoin pour ajouter du rembourrage et de Margus que nous devons ajouter à Commençons donc ici sur la droite, car c'est la plus complexe. Et voyons ce que nous pouvons faire. Finissons ce que nous faisons ici avec ce CTA, essayez-le gratuitement Donc, si nous y réfléchissons bien, nous remarquerons que les bords sont arrondis et qu'il semble y avoir une sorte d' ombre en dessous , parce que cela en fait partie. Et si on y regarde maintenant, il n'y a pas d' ombre. Il n'y a pas d'arrondissement. De plus, il existe un écart important entre ce formulaire et le formulaire lui-même. Ce que nous voulons faire ici, c'est faire un certain nombre de choses. Nous voulons arrondir ces bords. Et en fait, il semble que ces bords soient également arrondis et aient une bordure similaire. Nous pourrions donc simplement créer une classe pour cela. Nous arrondirons les bords, puis nous y ajouterons la petite bordure d' ombre. Très bien, créons donc une classe appelée round edges. Bords arrondis à pois. Et allons-y, c'était quel div ? C'était le CTA. Une autre chose est que vous pouvez ajouter plusieurs classes à chaque élément. Nous allons donc ajouter ici la deuxième classe des arêtes arrondies. Ensuite, nous ajouterons l'autre classe ici à notre forme de rond Oups Classe. Bords arrondis. Mais en fait, tu sais quoi ? J'ai changé d'avis. J'ai réalisé que nous devrions en fait envelopper ce formulaire dans un div parce que ce PTag fait partie d'un ensemble plus vaste, mais il ne fait pas partie du formulaire formellement défini Alors annulons ça. Et créons un autre div ici. Oups, Div. Et ensuite, nous allons l'enrouler autour de notre tag P. Et puis ajoutons cette classe ici. La classe est égale à Whoops. Bords arrondis. Génial. Cool. Maintenant que nous avons créé cette classe, faisons en sorte qu'elle fasse quelque chose. Il existe donc une propriété CSS appelée border radius. Et oui, j'en ai mémorisé beaucoup, mais ce n'est qu'après avoir travaillé avec eux encore et encore vous pouvez simplement rechercher ce faire, vous pouvez simplement rechercher les propriétés CSS d'une bordure ou les propriétés CSS, et vous obtiendrez une liste exhaustive de toutes les propriétés que vous pourriez éventuellement cibler. Hum, il y a peut-être même de meilleures façons de faire ce que je fais ici en jouant simplement au CSS et au HTML, mais c'est ce avec quoi je travaille en ce moment. Donc, arrondissez les bords, nous allons cibler la bordure, mais il s'agit en fait du rayon de la bordure. Donc rayon de bordure. Et nous allons y arriver, disons, en le courbant peut-être de 20 %. Voyons voir si cela fonctionne. Maintenant, ça a l'air super bizarre. Courbons-le plutôt en utilisant REM. Utilisons deux REM. Cela semble un peu plus normal. Très bien, cool. Comparons-le. Euh, peut-être que c'est un peu trop pointu, en fait. Faisons une jante. Cela semble un peu plus proche. C'est un peu plus proche. D'accord. Et maintenant, nous pouvons déjà dire qu'en fait, je vais le déplacer ici puisque ce n'est pas le cas. On voit déjà qu'il y a beaucoup trop de rembourrage ici, non ? 10. Conclusion: Conclusion. Nous avons beaucoup parlé dans cette vidéo bases du CSS au style de votre propre site Web. l'avenir, vous devriez être en mesure de commencer à personnaliser votre propre site Web à partir de zéro. N'oubliez pas de rechercher quelque chose chaque fois que vous n'en êtes pas sûr. J'adorerais voir le résultat de votre site Web. Veuillez donc laisser un lien vers votre code, une capture d'écran ou le site hébergé dans l' onglet projets et ressources ci-dessous afin que je puisse voir tout le travail que vous avez accompli. Je lis chaque commentaire, chaque critique et je regarde chaque proposition de projet. Donc, si vous avez des questions, hésitez pas à laisser un commentaire dans la section d'évaluation ci-dessous ou à me contacter directement. Consultez ma page de profil pour plus d'informations à ce sujet. Si vous souhaitez en savoir plus sur le codage, regardez les autres vidéos que j'ai sur ma page de profil. J'ai également des vidéos sur Next S et React disponibles sur ma chaîne YouTube et mon site Web. Je les lierai ci-dessous et sur mon profil si vous souhaitez également les apprendre , et je vous verrai dans le prochain.