10 astuces en CSS

Publié le 14 décembre 2022

Vous débutez dans le développement front-end et vous souhaitez développer avec ingéniosité ? Découvrez 10 astuces qui vous faciliteront la tâche !

Voici 10 astuces en CSS pour développer efficacement le style de votre site internet :

Utilisez des sélecteurs pour désigner plusieurs éléments à la fois.
Utilisez les classes pour appliquer des styles à plusieurs éléments.
Utilisez des remplacements de texte pour rendre votre code plus lisible.
Utilisez des couleurs relatives pour réduire le nombre de couleurs utilisées dans votre design.
Utilisez des polices de caractères basées sur la famille et non sur le nom.
Utilisez le positionnement pour créer des dispositions complexes.
Utilisez des bordures pour créer des effets visuels intéressants.
Utilisez des ombres pour ajouter de la profondeur à votre design.
Utilisez des transitions pour créer des effets de transition entre les états d'un élément.
Utilisez des sélecteurs avancés pour sélectionner des éléments spécifiques.

Les sélecteurs

Les sélecteurs CSS vous permettent de désigner plusieurs éléments à la fois, ce qui vous permet d'économiser du temps et des efforts lors de la mise en page de votre site.

Vous pouvez utiliser un sélecteur pour appliquer un style à plusieurs éléments, tels que des paragraphes ou des titres, d'un seul coup.

Par exemple, vous pouvez ajouter une classe à votre balise HTML et lui appliquer un style grâce au sélecteur de type classe :

.mon_super_texte {color:red;}

Vous pouvez utiliser plusieurs types de sélecteurs CSS pour cibler un élément en particulier.

Les sélecteurs incluent les sélecteurs d'élément, les sélecteurs de classe, les sélecteurs d'ID, les sélecteurs d'attribut, les sélecteurs de descendant, les sélecteurs d'enfant, les sélecteurs de frères, les sélecteurs de type, les sélecteurs universels et les sélecteurs de pseudo-classe.

Les sélecteurs avancés vous permettent de sélectionner des éléments spécifiques en fonction de leur classe, de leur id ou de leurs attributs. Cela vous permet d'appliquer des styles à des éléments spécifiques sans avoir à appliquer le style à tous les éléments de la page.

Ajustez vos couleurs sur Chrome

Ajuster la couleur d'un élément en HTML directement sur chrome permet de visualiser le rendu sans qu'il soit nécessaire de recharger la page.

Cela peut se faire en utilisant l'outil "Inspecter" de chrome. Cliquez dessus et dirigez-vous sur le code HTML de l'élément que vous souhaitez modifier.

Vous aurez ainsi accès aux propriétés CSS.

Vous devriez pouvoir trouver un attribut "style", dans lequel vous pouvez modifier la couleur en indiquant facilement le code hexadécimal de la couleur souhaitée.

Une fois ceci fait, vous devriez voir le changement apparaître immédiatement.

N'inscrivez pas 30 couleurs sur votre site... ce n'est pas le but

D'ailleurs, vous pouvez créer des variables en CSS pour gérer plus facilement vos couleurs.

Par exemple, si vous avez 10 éléments graphiques à gérer qui ont tous la même couleur bleue, vous pouvez créer une variable CSS et lui donner la couleur bleue, et ensuite l'utiliser en référence dans chacun des 10 éléments graphiques.

Les variables rendront beaucoup plus facile vos modifications sur les couleurs de votre site internet. Il vous suffira de modifier une seule ligne de code pour appliquer les modifications sur l'ensemble des éléments graphiques de vos pages.

Font

Pour utiliser une police dans votre page web, vous devez d’abord l’importer dans votre feuille de style CSS. Vous pouvez le faire en utilisant la règle @font-face :

@font-face {
    font-family: 'NomDePolice';
    src: url('chemin/vers/la/police.ttf') format('truetype');
}

Une fois que vous avez importé la police, vous pouvez l'utiliser en définissant sa valeur dans la propriété font-family d'un élément HTML :

body {
    font-family: 'NomDePolice', sans-serif;
}

Positionnement

Le positionnement CSS peut être utilisé pour créer des dispositions complexes qui n'auraient pas été possibles avec d'autres méthodes. Vous pouvez utiliser le positionnement pour aligner des éléments sur votre page, les déplacer vers un endroit spécifique et même les cacher.

Positionner un élément avec la propriété CSS display flex est facile !

Display flex est une excellente méthode de positionnement car elle permet de gérer facilement les éléments d'un conteneur. Elle permet de modifier et de contrôler la taille, l'alignement et la disposition des éléments dans un conteneur.

Elle offre également de nombreuses propriétés telles que align-items, justify-content et flex-wrap qui permettent de mieux contrôler la disposition des éléments. Vous pouvez également définir la taille relative des éléments avec les propriétés flex-basis et flex-grow.

<div style="display: flex; flex-directions:column;">
  <div style="background-color: #FF0000; width: 50px; height: 50px; margin: 10px;"></div>
  <div style="background-color: #00FF00; width: 50px; height: 50px; margin: 10px;"></div>
  <div style="background-color: #0000FF; width: 50px; height: 50px; margin: 10px;"></div>
</div>

Bordure

Les bordures CSS peuvent être utilisées pour créer des effets visuels intéressants. Les bordures peuvent être appliquées à des éléments pour créer des effets remarquables, tels que des bordures arrondies ou des bordures colorées.

/* Ce code ci-dessous crée une bordure de style solide de 10px de large, de couleur rouge (#FF0000) et de rayon de 10px  */

div {
  border-style: solid;
  border-width: 10px;
  border-color: #FF0000;
  border-radius: 10px;

}

Box-shadow

Les ombres peuvent être utilisées pour ajouter de la profondeur et du réalisme à votre design. Les ombres peuvent être appliquées à des éléments pour créer des effets 3D intéressants et réalistes.

Pour utiliser box-shadow en CSS, vous devez ajouter la propriété box-shadow à l'élément sur lequel vous souhaitez appliquer l'ombre. Vous devez ensuite entrer les valeurs de l'ombre, qui sont horizontale, verticale, et de flou, ainsi que la couleur de l'ombre. Par exemple, pour ajouter une ombre de 4 pixels de flou avec une couleur de gris, vous pouvez utiliser:

box-shadow: 4px 4px 4px #888;

Transitions

Les transitions en CSS peuvent ajouter une transition douce et fluide à vos éléments HTML lorsqu'ils sont modifiés. Pour les utiliser, vous devez définir deux propriétés CSS : `transition-property` et `transition-duration`.

La propriété `transition-property` définit les propriétés CSS qui doivent subir une transition lorsque l'élément est modifié. Par exemple, si vous souhaitez que la couleur de fond de l'élément change doucement, vous pouvez définir `transition-property: background-color;`.

La propriété `transition-duration` définit le temps que prend la transition. Par exemple, pour une transition de trois secondes, vous pouvez définir `transition-duration: 3s;`.

Vous pouvez également utiliser la propriété `transition-timing-function` pour définir la vitesse de la transition. Par exemple, `transition-timing-function: ease-in-out;` définit une transition qui commence et finit doucement.

Enfin, vous pouvez utiliser la propriété `transition-delay` pour définir le temps d'attente avant le début de la transition. Par exemple, `transition-delay: 2s;` définit un délai de deux secondes avant le début de la transition.

N'oubliez pas d'utiliser des balises raccourcies comme la balise background