Code CSS
La section du code CSS fera état de vos erreurs concernant les éléments fondamentaux. Il sera surtout question de l'écriture de règles et de l'utilisation des propriétés. C'est également ici que vous avez en partie le plus de difficulté et qu'on retrouve plusieurs de vos erreurs.
La propriété font-family
[ Affectez toujours le font-family à un sélecteur ]
Il est difficile de changer la police de caractères si vous n'affectez pas cette propriété à un sélecteur. Le simple fait de mettre le code CSS de la sorte n'est pas assez afin de l'attribuer à un élément ou de l'attribuer de façon globale au site. Vous devez concevoir une règle CSS selon les standards que nous avons vus en classe. C'est-à-dire, cela vous prend un sélecteur. Ensuite, entre les { } vous devez insérer les propriétés que vous voulez affecter à l'élément identifié par le sélecteur. Dans notre cas, il s'agit du font-family.
ASTUCES
Le seul moment où vous pouvez insérer du code CSS sans les { } c'est en passant directement par l'attribut style sur un élément en particulier.
<img src=" " alt=" " style="width:100px;">
[ Ne pas modifier le code de Google Fonts pour les polices de caractères ]
Le code en provenance de Google Fonts est divisé en deux parties, premièrement le nom de la typographie voulue et la typo substitue si jamais le serveur chez Google ait des problèmes et que le lien ne soit plus utilisable. De cette façon, le CSS va compenser pour quelque chose de similaire le temps de corriger le problème ou de changer de typographie. Ce paramètre est très important même si nous n'en voyons pas nécessairement la pertinence.
L'affectation des couleurs
[ Assurez-vous de vous adresser à la bonne propriété pour la couleur ]
Faites attention à la façon que vous attribuez la couleur à vos éléments textuels. Em utilisant text-decoration-color, vous n'affectez pas la couleur du texte, mais bien son élément de décoration. Par exemple, je peux en CSS faire afficher une ligne en dessous de mon texte à l'aide de la propriété text-decoration. En utilisant text-decoration-color, alors j'affecte spécifiquement cette ligne et non la couleur en tant que telle de mon texte. Si votre intention est de changer la couleur du texte, il faut alors opter pour la propriété color.
[ Soyez le plus précis possible dans la couleur à affecter ]
L'utilisation des couleurs préétablies en CSS c'est bien pour fabriquer des exemples ou pour temporairement colorer une zone de votre structure. Cependant, dans une optique de développement, nous vous déconseillons de les utiliser. La raison est très simple : et si le W3C décidait de changer le nom ou d'en changer la teinte de couleur! En utilisant le code de couleur en hexadécimal ou en utilisant les codes de couleurs en RGB alors vous vous assurez d'avoir la bonne couleur à chaque fois.
Le regroupement d'éléments
[ Évitez de tapez du code inutilement ]
Il ne s'agit pas nécessairement d'une erreur, mais si vous voyez que vous dupliquez du code de la sorte alors pensez à les regrouper ensemble en utilisant les deux sélecteurs pour une seule règle CSS. Vous devez prendre soin d'insérer la virgule entre vos éléments. De cette façon, le fureteur va comprendre que vous affectez la même chose à 2 sélecteurs différents.
L'alignement du texte
[ Évitez l'utilisation de propriétés CSS obsolètes ]
Il ne faut pas utiliser cette propriété, car elle n'est plus supportée par les fureteurs. C'est important d'utiliser la propriété text-align à la place.
ASTUCES
Dès que vous voyez quelque chose en rouge dans Brackets ou même dans VSC, c'est un très bon signal que vous ne deviez pas utiliser cette balise, cet attribut ou cette propriété. C'est le cas ici avec la propriété align. Il s'agit d'une propriété obsolète et vous ne devez plus l'utiliser.
L'application du CSS à un id
[ Soyez conforme avec les standards ]
C'est important que le nom du id soit emmagasiné à l'intérieur de l'attribut. De plus, il ne faut pas ajouter le symbole suivant ( # ). Ce symbole sera nécessaire pour le CSS afin de l'utiliser en tant que sélecteur.
Le problème ici est que le code est affecté directement sur la balise <h2>. Ce code devrait être à l'intérieur du CSS. Il s'agit d'un cas classique où l'étudiant ne sait pas comment affecter le code à un sélecteur associé à un id.
ASTUCES
Un id ne réagit pas plus différemment qu'une classe CSS en HTML. La seule chose qui distinct ces deux éléments c'est le symbole qui permet de les identifier. En ce qui concerne le id, le symbole est le suivant ( # ). Pour une classe CSS, on utilise celui-ci ( . ). Quand vous utilisez une classe à une balise <div>, est-ce que vous ajouter le point avant? Non, c'est exactement le même principe pour un id.
Le symbole pour les différencier est utilisé en CSS afin de s'adresser soit à une classe ou au id d'un élément.
Lier une feuille de style externe
[ Ne jamais mettre de code HTML à l'intérieur de la balise <style> ]
La balise <style> est réservée uniquement pour recevoir à l'intérieur du code CSS et rien d'autre. Le fureteur n'aime pas quand vous y intégrez du HTML. Nous avons relevé à quelques occasions cette erreur de mettre la balise <link> à l'intérieur de la balise <style>. La bonne pratique est celle de l'image du correctif où le code est à l'extérieur de la balise dédiée au CSS.
Affecter un style directement à une balise
[ Utilisez un seul attribut style ]
Bien qu'on puisse mettre le nombre d'attributs que l'on veut à un élément HTML, par un souci de lisibilité il est préférable de mettre le CSS dans la même balise <style>. Il est important de bien séparer les propriétés à l'aide du ( ; ). En principe, ce code devrait se trouver dans la balise <style> située dans le <head> du document ou à l'intérieur d'une feuille de style externe.
La fermeture des propriétés
[ Respectez le standard de fermeture des propriétés CSS ]
Il est important de respecter le standard de fermeture des propriétés CSS en utilisant le symbole suivant ( ; ). Omettre ce symbole dans votre code fera en sorte que le code CSS ne sera pas pris en compte à partir de la propriété fautive. Si c'est votre première propriété qui est ainsi, alors c'est tout le reste du CSS qui sera affecté, même si ce code est bien écrit malgré qu'il manque un ( ; ) à la fin d'une propriété.
ASTUCES
Si vous observez que quelque chose cloche avec votre visuel et que le CSS ne semble pas s'appliquer, regardez attentivement si tous les ( ; ) sont présents dans votre code. Regardez aussi visuellement la couleur du code. Quand une erreur de la sorte se produit, Brackets mets le code en noir comme l'exemple erroné avec la propriété font-size.
Les sélecteurs
[ Ne pas mélanger le nom d'une classe à celui d'un élément HTML ]
Si votre intention est d'affecter un élément HTML (h1, div, p, section, etc.) alors vous devez simplement écrire le nom dans votre CSS comme si c'était celui en HTML. L'image du correctif démontre bien la marche à suivre dans cette situation. En ajoutant un ( . ) vous convertissez le sélecteur en classe CSS comme si vous aviez écrit ceci dans le HTML : <div class="div"> ou <h1 class="h1">.
ASTUCES
Si l'élément existe dans le langage HTML alors il s'écrit pareil en CSS, si vous avez inventé un nom de classe alors vous devez ajouter le ( . ) en avant et/ou si vous avez inventé un id alors vous devez ajouter un ( # ) devant.
- h1{ ... }
- .btnAccueil{ ... }
- #sectionPrincipale{ ... }
[ Toujours être vigilant à qui qu'on s'adresse dans les sélecteurs ]
En séparant le nom de la balise <section> et le nom du id c'est comme si nous voulions tous les éléments ayant comme id #presentation à l'intérieur de toutes les sections. Le problème est qu'un id doit être le seul élément avec ce nom. C'est ce qui distinct un id d'une classe. Cette dernière nous permet de la réutiliser autant de fois qu'on le souhaite. Afin de nous adresse à un id en particulier dans un élément spécifique, alors nous devons coller le nom de la balise ainsi que le nom du id ensemble. Dans notre exemple cela nous donne : section#presentation{ ... }. Nous pouvons aussi seulement écrire l'exemple suivant : #presentation
[ Évitez les caractères spéciaux dans les noms ]
La langue maternelle des inventeurs du HTML est l'anglais. Il est donc important de bien comprendre ce petit mais gros détail pour la suite de vos études. Tous les termes sont en anglais et le langage est basé sur cette langue. Les accents ne font pas partie des bases de ce langage. C'est important de tout écrire sans les accents. De toute façon, certains serveurs sont assez frileux quand ils voient un accent dans un nom et cela peut occasionner beaucoup de problèmes.
[ Soyez précis dans votre sélecteur ]
Si votre intention est de vous adresser à un élément spécifique à l'intérieur d'un parent, alors vous devez utiliser le symbole suivant ( > ). Cependant, bien que le symbole soit correct, ce qui pose problème ici c'est le nom du sélecteur employé. Le fait d'utiliser le sélecteur suivant : "div.texte pour la section présentation > h1" occasionne beaucoup de problèmes de compréhension pour le fureteur. Comme nous l'avons signalé précédemment, le HTML repose sur l'anglais alors les accents ne peuvent être interprétés par le fureteur. C'est également applicable pour le reste du français dans le sélecteur.
Nous voudrions faire une mise au point au sujet du français dans le HTML. Il est autorisé d'utiliser des termes en français uniquement si vous avez créé votre propre élément par exemple une classe ou un id. Dans ce cas, vous avez ajouté respectivement un ( . ) ou un ( # ) devant. De cette façon, le fureteur va comprendre ce que vous voulez faire. Cependant, selon l'exemple ici, c'est comme si vous vous adressiez à la balise <pour> <la> <section> <présentation>
.
L'affectation d'un texte en italique
[ Utilisez le CSS plutôt que les balises HTML pour la mise en forme des éléments ]
Afin de mettre un texte en italique, il est préférable d'utiliser la propriété CSS font-style plutôt que d'opter pour la balise <i>. Pourquoi ? La raison est très simple, si jamais vous deviez modifier 300 paragraphes, il suffit de retirer la propriété directement de la feuille de style CSS et les 300 paragraphes seront modifiés à la suite de la sauvegarde de votre document. Tandis que si vous optez pour la balise <i> alors vous venez de perdre 1 heure de votre vie à supprimer les deux balises <a> et </a> à la main.
ASTUCES
Assurez-vous que les propriétés CSS sont réparties selon le principe qu'une ligne est dédiée à une seule propriété.
La taille du texte
[ Utilisez la bonne propriété CSS pour la taille du texte ]
Votre intention est de modifier la taille du texte ? Alors vous devez opter pour la propriété font-size. La propriété text-emphasis n'est pas très supportée les principaux fureteurs et elle sert à mettre des marques d'emphase sur les mots. Cette propriété ne modifie aucunement la taille de notre texte.
