CSS est l'élément clé pour que tout fonctionne correctement et ressemble à ce que vous voulez lorsque vous vous lancez dans la conception de sites web. CSS permet de styliser les éléments HTML comme vous le voulez.
Nous pourrions trouvé plusieurs façon d'utiliser ou d'organiser votre code en CSS
1. Organiser la feuille de style
Premièrement pour mieux pratiquer du CSS C'est de commencer par organiser vos feuilles de style. La manière dont vous aborderez cette tâche dépendra de votre projet.
**CSS est la clé pour que votre site soit beau et fonctionne correctement. ✨
Utilisez les sauts de ligne à profusion
Il est préférable pour d'utiliser les sauts de ligne pour tous qui travaillons avec du code CSS pour que chaque extrait de code soit séparé et lisible.
Créez de nouvelles sections là où cela a du sens
En règle générale, il est mieux de créer des sections pour les styles tels qu’ils seront utilisés. Ainsi, une section pour les styles de texte, une section pour les listes et les colonnes, une section pour la navigation et les liens, et ainsi de suite...
Il existe trois types différents CSS avec lesquels vous pouvez être amené à travailler lors de la création d’un site web et de l’ajustement de son style. Parlons un peu de ce qu’ils sont et de ce qu’ils font, puis de ceux que vous devriez utiliser pour vos projets.
- CSS en ligne: Cela vous permet de styliser des éléments HTML spécifiques,
- CSS externe: Il s’agit d’utiliser un fichier tel qu’une feuille de style pour styliser le site dans son ensemble.
- CSS interne: Cela vous permet de styliser une page entière plutôt que des éléments spécifiques.
2. Envisagez un framework CSS
Les frameworks CSS peuvent être utiles dans certains cas mais peuvent être inutiles pour beaucoup de personnes, surtout si votre site web est de petite taille.
2. Classes ou ID
La meilleur pratique aussi d'utiliser Css, ce de savoir nommer les classes et les ID avec de noms qui vous serez familier. :
Classe: Le sélecteur de classe fonctionne en sélectionnant un élément avec un attribut de classe. Le contenu de l’attribut class est ce qui détermine la façon dont l’élément HTML est sélectionné. Cela ressemble à ceci en code : .classname
ID: ID, d’autre part, fonctionne en sélectionnant un élément avec un attribut ID. L’attribut ID doit être identique à la valeur du sélecteur pour que cela fonctionne. Vous pouvez repérer un ID dans CSS par ce symbole :** #idname**.
Un ID est utilisé pour sélectionner un seul élément tandis qu’une classe est utilisée pour sélectionner plusieurs éléments. Un ID est utilisé pour appliquer un style à un seul élément HTML et une classe pour appliquer un style à plus d’un élément HTML. Le respect de cette règle générale permet de garder votre code propre et ordonné et réduit également le cas de code inutile ou dupliqué.
3. Évitez la redondance
C’est une bonne pratique de revoir votre code pour supprimer les redondances. Il est inutile que des balises identifient la taille de la police répété deux fois dans la même section.
Utilisez les raccourcis CSS
Les raccourcis CSS sont un excellent moyen de réduire l’espace occupé par votre code tout en conservant ses performances. Vous pouvez combiner plusieurs styles dans une seule ligne si cela s’avère judicieux.
Ajoutez plusieurs classes à vos éléments
.
Nous pouvons ajouter autant de classes que nous désirons à un élément, à condition qu’elles soient séparées par un espace.
Évitez les sélecteurs supplémentaires inutiles
Parfois, votre code devient un peu désordonné lorsque vous finalisez la conception de votre site. C’est pourquoi il est important de revenir en arrière et de supprimer les sélecteurs inutiles après coup. Vous devez également garder un œil sur les sélecteurs trop complexes. Par exemple, si vous avez l’intention de donner un style aux listes de votre site web, vous n’avez pas besoin d’utiliser des sélecteurs comme « body » ou « container » ou quoi que ce soit de ce genre. Un simple .classname li { suffira.
4. Comment importer correctement des polices
On tilise le @font-face pour importer des polices
Vous pouvez ajouter à peu près toutes les polices que vous voulez à votre site web, mais vous devrez suivre une procédure spécifique pour vous assurer qu’elles fonctionnent correctement.
- Téléchargez la police que vous souhaitez utiliser: Il existe de nombreux endroits où vous pouvez vous procurer des polices, notamment Google... . Assurez-vous que vous téléchargez le fichier TrueType (.ttf) de la police que vous avez choisie.
.
- Mettez à jour le fichier CSS à l’aide d’un éditeur de texte: Tout éditeur de texte HTML que vous préférez fera l’affaire, comme replit, Visual studio code ou Sublime. Dans ce fichier, il y aura une « URL source » répertoriée. Vous devrez la mettre à jour pour refléter l’endroit où le Web Font Kit est maintenant hébergé sur votre serveur web. Copiez dans ce fichier le chemin d’accès à l’endroit où chaque fichier de police est stocké sur votre hôte web, comme suit :
Vous pouvez ensuite mettre vos nouvelles polices à profit en les ajoutant aux fichiers CSS de votre site avec la balise font-family.
Top comments (0)