Une introduction aux cours en html et css

Cela va sans dire, le développement Web est énorme. Cela tient en grande partie au fait que presque tout le monde est sur le Web. Cependant, il y a une pénurie de développeurs sur le terrain, et c'est pourquoi le programme de développement Web est si facilement disponible et gratuit. Dans cet esprit, nous allons vous expliquer un peu en quoi consistent HTML et CSS. Plus précisément, nous allons vous montrer comment fonctionnent les «classes».

Nous ne vous démarrons pas depuis le début, car il existe déjà des tonnes de programmes d'études gratuits. Au lieu de cela, nous allons spécifiquement vous montrer comment fonctionnent les classes, car elles constituent un élément nécessaire au style de votre site Web. Nous avons également pensé qu'il valait peut-être la peine d'être couvert avant de publier notre aperçu de l'API Bootstrap de Twitter, car les classes en sont également un composant indispensable.

Si vous êtes totalement novice en HTML et CSS, ce n’est probablement pas un bon début pour vous. Si vous le connaissez bien, cela ne devrait pas être trop difficile à comprendre. Toutefois, si vous recherchez un tutoriel complet pour débutant, il existe de nombreuses options en ligne. Pour en nommer quelques-uns, il y a FreeCodeCamp, The Odin Project, CodeAcademy, Code School, Team Treehouse, Udacity et bien d'autres. Si vous choisissez de commencer à creuser dans l'un de ceux-ci, je vous recommanderais vivement de vous en tenir à un (tel que Free Code Camp) et de le terminer avant de commencer un autre, car une grande partie du contenu «de base» peut être assez répétitif.

Ceci dit, voyons ce que sont les classes.

Comment fonctionnent les cours

Les cours sont extrêmement utiles. Ils éliminent le caractère répétitif du style HTML. Sans classes, vous styliseriez chaque élément de votre balise individuellement. Et si vous aviez deux éléments identiques, mais que vous vouliez les coiffer différemment? Ce serait un désordre complet. C'est pourquoi nous avons des cours. Les classes ajoutent une structure d'organisation à votre code HTML, vous permettant de garder votre code relativement propre. De plus, les classes peuvent être utilisées plus d'une fois. En d'autres termes, vous n'aurez jamais à créer deux fois les mêmes règles de style.

Voici à quoi ressemblent les classes dans notre étiquette:

Comme vous pouvez le voir, sous notre balise body, nous avons deux

éléments avec différentes classes. La première

balise a la classe "head1" tandis que la deuxième balise a la classe "head2". Ainsi, dans notre CSS, au lieu d'appliquer un style à la

élément, nous pouvons appliquer un style à ces classes individuelles. Pourquoi voudrions-nous faire ça?

La principale raison est que vous ne voulez pas tout votre

les éléments doivent avoir le même style. Cela créerait beaucoup de maux de tête lors de la création d'un site Web, et en plus de cela, les sites Web ne seraient pas très beaux. Les classes nous permettent d’appliquer un style à une seule instance de la balise, pas à toutes.

balises sur le document. Alors, comment écrivez-vous une classe en HTML? Comme ça:

Du contenu

Vous pouvez ajouter la propriété "class" à presque n'importe quel élément HTML.

Génial! Nous avons donc des cours, mais dans leur état actuel, ils ne font rien. C'est parce que nous n'avons pas encore ajouté de règles de style à la classe. Pour ce faire, nous devrons créer un document séparé .css. Je vais juste l'appeler main.css. Dans ce document, nous appelons une classe comme celle-ci:

Pour sélectionner une classe à styler, procédez comme suit:

.head1 {couleur: rouge; text-align: center; }

Les accolades contiennent toutes les “règles” (ou styles) que nous appliquons à cette classe. Il y a beaucoup de règles différentes que vous pouvez mettre dans cette classe. Dans mon cas, j'ai changé la couleur du texte en rouge en utilisant la règle «couleur» et j'ai centré le texte en utilisant la règle «alignement du texte». Vous pouvez trouver une liste complète des règles CSS ainsi que leur documentation à partir du réseau de développeurs de Mozilla.

Notre style n'est toujours pas appliqué aux classes de notre document HTML, car nous n'avons pas encore lié les deux fichiers. Revenez à votre fichier HTML, et dans le balise, vous voudrez lier votre fichier CSS en procédant comme suit:

Votre document HTML devrait ressembler à ceci:

Et votre notre projet de test devrait ressembler à ceci sur le Web:

Pour une vidéo plus détaillée qui décrit ces étapes, voir ci-dessous.

Vidéo

Conclusion

Et c'est tout ce qu'il y a dans les cours! Ils sont vraiment simples à comprendre. Évidemment, sur les grands sites Web populaires que vous visitez, les règles dans les classes sont bien plus compliquées que ce que nous avons décrit, mais dans leur forme la plus élémentaire, c’est leur fonctionnement.

Si vous avez des questions ou si vous avez eu du mal à vous suivre longtemps, n'hésitez pas à nous le signaler dans les commentaires ci-dessous ou dans les forums de PCMech! Ou, si vous souhaitez un guide complet pour débutant HTML / CSS sur PCMech, n’oubliez pas de nous le faire savoir également!