Tutoriel débutant css : 3 tips indispensables (+SCSS + LESS)


p {
background-color: red;
}


Vous pouvez également cibler des éléments plus spécifiques en utilisant des sélecteurs. Par exemple, pour changer la couleur de fond d’un élément ayant un ID de « mon-element », vous pouvez utiliser :


#mon-element {
background-color: red;
}


Il y a beaucoup de propriétés différentes que vous pouvez utiliser pour styliser vos éléments, comme la couleur, la police, l’espacement, la taille, etc. Il est important de comprendre comment cibler les éléments corrects et comment utiliser les propriétés de manière efficace pour créer un design attrayant.

• block : Les éléments de type block prennent toute la largeur disponible et créent un saut de ligne avant et après l’élément. Les éléments HTML tels que les titres (h1, h2, etc.) et les paragraphes (p) sont des exemples d’éléments de type block.
• inline : Les éléments de type inline prennent uniquement la largeur nécessaire pour afficher leur contenu et n’ont pas d’effet sur les sauts de ligne. Les éléments HTML tels que les liens (a) et les images (img) sont des exemples d’éléments de type inline.
• inline-block : Les éléments de type inline-block prennent uniquement la largeur nécessaire pour afficher leur contenu tout en respectant les propriétés de mise en forme telles que les dimensions et les marges.
• none : Les éléments avec un display none sont enlevés de la page et n’occupent pas de place.
• flex : Permet de créer des layouts flexibles en utilisant flexbox.
• grid : Permet de créer des layouts en utilisant grid (grille)

Il est important de choisir le bon type de display pour chaque élément en fonction de l’effet souhaité. Par exemple, si vous voulez que plusieurs éléments soient alignés horizontalement, vous devriez utiliser display:inline-block ou display:flex. Si vous voulez que l’élément occupe toute la largeur disponible, vous devriez utiliser display:block.

Voici un exemple simple qui montre comment utiliser display: flex pour aligner trois éléments (divs) horizontalement :

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

.container {
display: flex;
}


Cela permettra d’aligner les 3 éléments « item » horizontalement dans le conteneur « container »

Il existe de nombreuses propriétés supplémentaires qui peuvent être utilisées en conjonction avec display: flex pour créer des layouts plus avancés tels que les alignements des éléments, la direction de l’axe, l’ordre d’affichage, etc. Par exemple, vous pouvez utiliser justify-content pour aligner les éléments horizontalement, et align-items pour aligner les éléments verticalement. Il est possible de jouer avec ces propriétés pour créer des layouts flexibles et adaptatifs pour les écrans de différentes tailles.

Voici un exemple simple qui montre comment utiliser display: grid pour créer une grille de 3 colonnes et 2 lignes:


<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>


.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 50px);
}


Cela permettra de créer une grille de 3 colonnes et 2 lignes avec des éléments « item » disposés dedans.

Il existe de nombreuses propriétés supplémentaires qui peuvent être utilisées en conjonction avec display: grid pour créer des layouts plus avancés tels que les alignements des éléments, l’espacement entre les éléments, l’ordre d’affichage, etc.

• Utiliser des Media Queries : Les Media Queries permettent de définir des règles CSS qui ne s’appliquent qu’à des écrans de tailles spécifiques. Vous pouvez utiliser des Media Queries pour définir des règles spécifiques pour les écrans de bureau, les tablettes et les téléphones.

@media (min-width: 768px) {
/* règles pour les écrans de tablettes et de bureau */
}
@media (max-width: 767px) {
/* règles pour les écrans de téléphones */
}


• Utiliser des tailles relatives : Au lieu d’utiliser des tailles absolues (en pixels) pour les dimensions des éléments, vous pouvez utiliser des tailles relatives (comme pourcentage ou em) qui s’adaptent automatiquement à la taille de l’écran.
• Utiliser des flexbox ou Grid : En utilisant flexbox ou Grid, vous pouvez créer des layouts flexibles qui s’adaptent automatiquement à la taille de l’écran.
• Utiliser des frameworks de responsive design : Il existe des frameworks tels que Bootstrap, Foundation, Bulma, Tailwind CSS qui ont déjà intégré des règles CSS pour gérer le responsive design.
• Utiliser des librairies javascript : Il existe des librairies javascript tels que enquire.js, matchmedia.js, breakpoints.js qui permettent de détecter les tailles d’écrans et de changer les styles en conséquence.

Il est important de tester vos designs sur différents types d’écrans pour vous assurer qu’ils s’adaptent correctement à la taille de l’écran. Il est également important de continuer à suivre les tendances et les meilleures pratiques en matière de responsive design pour s’assurer que votre site reste accessible et fonctionnel sur tous les types d’écrans.

Voici quelques exemples de fonctionnalités introduites avec CSS3 :

• Sélecteurs avancés : permettent de cibler des éléments plus précisément dans le document.
• Transitions : permettent de créer des animations douces et fluides en changeant les propriétés de l’élément de manière graduelle.
• Transforms : permettent de transformer les éléments (rotation, translation, mise à l’échelle)
• Animations : permettent de créer des animations plus sophistiquées en utilisant des keyframes
• Rounded corners : permettent de créer des angles arrondis pour les éléments
• Shadows : permettent de créer des ombres pour les éléments
• Backgrounds : permettent de créer des dégradés, des images de fond répétées, des images de fond centrées, etc.
• Media Queries : permettent de définir des règles CSS qui ne s’appliquent qu’à des écrans de tailles spécifiques.
• Flexbox : permet de créer des layouts flexibles en utilisant flexbox.
• Grid : permet de créer des layouts en utilisant grid (grille)

Il est important de noter que malgré le nom CSS3, cette version n’a pas été publiée en une seule fois. Les différentes spécifications ont été publiées au fil des années, et certaines d’entre elles ne sont pas encore complètement supportées par tous les navigateurs. Il est donc important de vérifier la compatibilité des navigateurs pour les fonctionnalités que vous souhaitez utiliser.

Voici quelques exemples de ce que vous pouvez faire avec SCSS :

• Variables : Vous pouvez définir des variables pour les couleurs, les tailles, les polices, etc. et les utiliser partout dans votre code. Par exemple :

  $primary-color: blue;
$font-size: 16px;
body {
color: $primary-color;
font-size: $font-size;
}


• Nesting : Vous pouvez imbriquer les règles CSS pour éviter la répétition de sélecteurs. Par exemple :

  nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
}
@mixin border-radius($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
}
.button {
@include border-radius(5px);
}


• Boucles : Vous pouvez utiliser des boucles pour générer du code CSS. Par exemple :

  @for $i from 1 through 12 {
.col-#{$i} {
width: 100% / 12 * $i;
}
}


• Import : Vous pouvez importer des fichiers SCSS dans d’autres fichiers pour une meilleure organisation.

Il est important de noter que pour utiliser SCSS, il faut le compiler en CSS avant de l’utiliser dans un navigateur. Il existe plusieurs outils pour compiler du SCSS en CSS, tels que Sass, Compass, etc. Il existe également des outils de build de projet comme webpack, gulp ou grunt qui peuvent inclure un compilateur scss directement dans le workflow de développement.

Voici quelques exemples de ce que vous pouvez faire avec LESS :

• Variables : Vous pouvez définir des variables pour les couleurs, les tailles, les polices, etc. et les utiliser partout dans votre code. Par exemple :
  
@primary-color: blue;
@font-size: 16px;
body {
color: @primary-color;
font-size: @font-size;
}

• Nesting : Vous pouvez imbriquer les règles CSS pour éviter la répétition de sélecteurs. Par exemple :
  
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
}

• Mixins : Les Mixins vous permettent de réutiliser des ensembles de règles. Par exemple :
  
.border-radius(@radius) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
.button {
.border-radius(5px);
}

• Boucles : Vous pouvez utiliser des boucles pour générer du code CSS. Par exemple :
  
.loop(@index) when (@index > 0) {
.col-@{index} {
width: (100% / 12) * @index;
}
.loop(@index - 1);
}
.loop(12);

• Import : Vous pouvez importer des fichiers LESS dans d’autres fichiers pour une meilleure organisation.

Comme pour SCSS, il est important de noter qu’il faut compiler LESS en CSS avant de l’utiliser dans un navigateur. Il existe des outils pour compiler LESS en CSS tels que Less.js ou less-cli. Il existe également des outils de build de projet comme webpack, gulp ou grunt qui peuvent inclure un compilateur less directement dans le workflow de développement.

Bonjour,
Je m’appelle Sébastien. Ingénieur de formation avec 11 ans d’expérience, je me lance en freelance (= autoentrepreneur) dans la création de sites internet pour mes clients.
N’hésitez pas à me demander un devis (si vous êtes concernés) ou à poster un commentaire, un petit retour sur cet article gratuit.
Je suis convaincu que la meilleure manière d’apprendre est la pratique. Alors, lancez-vous !