Salut, tout le monde, bienvenue.
Une des choses que je veux vraiment souligner dans ce cours d'introduction au CSS est qu'
il y a ce besoin d'arrêter et de pratiquer et de revoir ce que nous avons appris jusqu'à présent.
Donc je vais m'assurer d'inclure des petites choses que je vais appeler
Code Together.
Donc, si vous regardez ceci en ce moment, et que vous n'avez pas votre ordinateur portable à côté de vous ou
quoi que vous utilisez pour coder, j'espère vraiment que vous allez arrêter, aller chercher ça, et
coder avec moi parce que juste écouter avec moi ne vous donne pas vraiment
la vraie expérience dont vous avez besoin pour le taper et faire des erreurs au fur et à mesure que nous allons ensemble.
Ok, alors allons-y et commençons.
Ce que je vais faire dans cette vidéo, c'est que je vais retourner à un vieux mais
un goodie qu'on a fait en HTML 5.
Et je veux qu'on y aille ensemble et qu'on le coiffe.
D' accord, commençons par faire notre fichier CSS.
Je vais aller de l'avant et en créer un nouveau maintenant,
aller ici pour fichier, nouveau fichier, ou vous pouvez faire la commande N.
Et la première chose que vous voulez faire est que vous voulez enregistrer ceci en tant que fichier .CSS,
alors de cette façon votre éditeur sait colorer les choses comme vous voulez qu'elles soient coloriées.
Maintenant, chaque fois que je conçois
des pages, je garde tous mes fichiers HTML dans un dossier et mes fichiers CSS dans un autre dossier.
Et je vous encourage vraiment à faire la même chose.
Donc, je vais aller de l'avant et aller dans mon dossier CSS.
Et je vais appeler ça, appelons-le together-1.css.
Il est vraiment important que vous vous souveniez de mettre cette extension de fichier, ou
les choses ne vont pas fonctionner.
Bon, donc voici ma vieille page ennuyeuse.
Ce que les gens font généralement, c'est qu'ils stylisent depuis le haut de la page et qu'ils
travaillent leur chemin vers le bas.
Donc, je veux que vous choisissiez vos propres valeurs, mais ensemble allons de l'avant et
stylisez mon en-tête.
Oups, mauvaise chose ici.
Et nous pouvons lui donner un contexte.
Je vais essayer B3B3B3.
Nous pouvons lui donner une police plus grande si vous voulez.
Je vais dire la taille de la police.
Faisons 150%.
Juste un peu quelque chose de différent.
Je vais sauver cela, et j'encourage toujours vraiment les étudiants à apporter de petits changements
à leur code, puis vérifier et voir ce qui s'est passé.
Voyons si on a changé quelque chose ici.
Et maintenant je vais le recharger et voir ce qui s'est passé, et
si vous remarquez, rien ne s'est passé.
Eh bien, le problème est que je n'ai pas lié la feuille de style correctement au fichier HTML.
Rappelez-vous comment je vous ai dit que je pense toujours mettre les choses dans un dossier appelé CSS ?
Je dois inclure ça.
Bon, reviens.
Recharger.
Oh, hé ! J'ai un peu quelque chose
qui se passe là-bas.
D' accord ?
Donc, maintenant, allons de l'avant et juste ajouter quelques choses.
Je sais que ça ne ressemble pas exactement à mon exemple.
Mais une des choses que je veux faire ensuite, c'est que je veux aller de l'avant et coiffer, voyons,
mon en-tête.
Donnons à l'en-tête entier une couleur d'arrière-plan.
D' accord.
Tu peux choisir tout ce que tu veux.
Et je vais choisir l'arrière-plan : je pense que j'ai 66666, d'accord.
Et allons-y et je veux vraiment aligner ce texte.
Donc je vais l'appeler text-align : centre.
Enregistrer, actualiser.
Oh, on y arrive !
La page commence à paraître légèrement différente tout le temps.
Maintenant, la seule chose qui me confond, c'est qu'il ne semble pas aimer mes antécédents.
Donc si je reviens, je me rendrai compte que j'ai oublié ce signe juste devant.
Et faire un, deux, trois, quatre, cinq, six.
Gardez-le ici.
Actualiser.
On y va.
Maintenant, ces couleurs sont vraiment moches et vraiment difficiles à voir.
Et je m'en rends compte.
Alors allons de l'avant et jouons avec les choses pour rendre cela un peu plus facile à voir.
Allons-y et mettons-le.
Changeons le h1 pour qu'il soit une couleur différente et
continuons et changeons la navigation.
Pour que nous l'ayons, je vais changer la police, essayons la variante de police.
J' aime la variante de police.
Il vous permet de mettre les choses en majuscules, minuscules, différentes choses comme ça.
Nous avons également la taille de la police.
Je ne suis toujours pas satisfait de la taille, donc je vais faire 150%,
et la dernière que je vais faire est la famille de polices.
Maintenant, si vous vous souvenez, avec font-family, il est très habituel de lui donner plus d'
une valeur car tous les navigateurs ne prennent pas en charge chaque famille de polices.
Donc dans mon cas, je vais aller de l'avant et essayer de mettre Arial,
Times New Roman.
Si vous avez une police composée de plusieurs mots,
vous devez les placer dans les guillemets.
Et enfin, juste Serif.
Maintenant, c'est comme ça que je code.
Je code faire des erreurs.
Je code avec des fautes de frappe.
Pour être honnête, je cods rarement dans une chemise boutonnée qui semble si mal à l'aise.
La façon de coder est confortablement avec un coca et un bar Hershey afin
que lorsque vous avez terminé, vous ayez ces petites bouchées de chocolat festives.
Mais pour l'instant, je vais faire de mon mieux pour vous accompagner.
J' ai changé beaucoup de choses.
Voyons ce qui s'est passé.
Tu vois que je vais faire un peu plus grand, on commence à y arriver.
Nous avons les couleurs de fond, nous avons les choses comme ça.
Alors allons de l'avant et stylisons quelques autres choses ensemble,
et ensuite nous allons continuer et apprendre un peu plus.
J' aimerais que vous choisissiez vos propres affaires pour h2.
Donc h2 je vais choisir une couleur différente,
essayons la même couleur 666666 et un fond différent.
Je vais utiliser 00B7EA.
Alors, est-ce important ?
Est-ce important que je le tape en majuscules EA, minuscules ?
Ça n'a pas d'importance du tout.
Ce qui est important, c'est que vous soyez généralement cohérent pour
ne pas vous gâcher pendant que vous allez et venez.
D' accord ?
On va se rafraîchir à nouveau.
D' accord.
Ça commence à paraître très différent.
Ce n'est pas beaucoup de style.
Ce n'est qu'un, deux, trois, quatre, cinq.
Cinq règles et nous avons déjà un look bien différent.
Je vais aller de l'avant et rendre l'écran plus petit parce
que quand je mets cette taille de police 150%, ça fait une grande différence.
D' accord.
Une sorte de dernière chose cool que j'aimerais que vous essayiez de faire est d'aller de l'avant et
d'essayer de styliser le résumé dans les détails.
Parce que si je veux faire juste le, J'ai grandi dans Ashtabula Ohio partie,
comment pouvez-vous faire que l'italique mais pas le reste ?
Très bien donc si vous vous souvenez à quoi ressemble le code HTML,
laissez-moi vous montrer un exemple rapide, c'est que juste ici j'ai ma balise details et
si vous ne l'avez pas vu avant, j'ai mis le mot ouvert,
ce qui signifie par défaut montrer qu'il est ouvert, donc personne n'a à cliquer dessus.
J' ai mes coordonnées.
J' ai mon résumé où est apparu la partie Mon enfance, et
ensuite j'ai toute cette partie.
Donc, si tu veux faire ça en italique, et seulement ça, comment tu le fais ?
D' accord.
Ce qu'on va commencer, c'est qu'on va styler la balise de détails.
Et je vais faire défiler ici un peu pour que vous puissiez voir un peu mieux,
espérons-le.
Et ce que je vais dire, c'est que je veux tout rendre italique, et
la façon dont tu fais ça, c'est que tu vas mettre en style police : italique. Tu l'
as eu ?
Ce ne sera pas exactement ce qu'on voulait parce que ce que j'ai fait c'est que j'ai
tout mis en italique.
Alors maintenant tu veux y retourner et dire, mais tu sais quoi ?
Je ne veux pas du résumé.
Je ne veux pas le résumé en italique.
Oups, retourne ici.
Résumé et je peux dire police.
Oups, style police.
Eh bien, comment vous le faites pour que ce ne soit pas italique,
par défaut la plupart des choses ne le sont pas, vous pouvez réellement mettre dans le mot normal.
D' accord.
Alors c'est tout.
Maintenant, nous avons cette partie en italique et cette partie en gras.
Pour la plupart, nous avons fini, mais je vais ajouter une petite chose,
parce que c'est vraiment commun pour les gens de style leur en-tête et
leur pied de page d'une manière très similaire.
Allons donc ajouter du style à mon pied de page.
Et ce que je veux faire, c'est que je veux lui donner la même couleur de fond
que mon en-tête avait.
Donc arrière-plan, un, deux, trois, quatre, cinq, six, boum.
Et voilà.
Donc, ce que nous avons fait maintenant, c'est que nous sommes passés d'un fichier HTML de base très simple et
nous avons commencé à ajouter juste un peu de couleur, un peu de taille de police,
un peu de choses différentes comme ça.
Laissez-moi vous montrer à quoi ressemblait le fichier original et
nous les regarderons l'un à côté de l'autre.
Je vais commenter ma feuille de style.
Je vais l'ouvrir et vous pouvez voir ce sont deux pages très différentes.
Mais ils sont exactement le même HTML.
Ok super, c'est le genre de choses que tu vas devoir faire pour
les devoirs dans cette section.
Alors pratiquez-vous ici, reviens et regarde-moi,
si ça t'aide un peu à te remettre des bosses.
Mais l'important est, code, code, code, bonne chance.