Guide CSS pratique pour les développeurs occupés

Si vous êtes comme moi et que vous préférez apprendre en commençant par construire en premier et en cherchant sur Google lorsque vous êtes bloqué, ce guide CSS est fait pour vous.

Il vous donnera un cours accéléré uniquement sur le CSS dont vous avez absolument besoin dans la pratique, sans perdre de temps sur des choses que vous pouvez rechercher sur Google une fois que vous en avez besoin.

Donnez-moi 5 minutes de votre temps et vous serez sur la bonne voie pour créer votre application.

Qu’est-ce que CSS ?

CSS signifie Cascading Style Sheets – c’est un langage utilisé pour ajouter des styles aux pages Web en décrivant comment les éléments doivent être affichés.

Les éléments sont stylisés à l’aide de CSS en les sélectionnant avec des sélecteurs et en définissant des valeurs pour leurs propriétés :

p {
  background-color: green;
}

Exemple de code CSS

Dans l’exemple ci-dessus, tous <p> les éléments seront sélectionnés et auront une couleur de fond verte.

Sélecteurs CSS

Il existe trois principaux types de sélecteurs :

élément – toute balise HTML p, div, h1etc.
classe – ficelle dans class attribut précédé d’un point, par exemple <div class="section"> peut être sélectionné avec .section
identifiant – ficelle dans id attribut précédé d’un hashtag, par exemple <div id="nav-bar"> peut être sélectionné avec #nav-bar

Je recommande principalement d’utiliser des classes pour styliser vos éléments, car les éléments peuvent avoir plusieurs classes, ce qui facilite l’extension ou le remplacement des styles.

Il existe trois façons de combiner les sélecteurs :

virgule – de sélectionner tous les éléments correspondant n’importe quel des sélecteurs séparés par des virgules et appliquer le même style.
espace – de sélectionner un élément imbriqué, en décrivant son chemin. Par exemple .section h1 sélectionnera un h1 élément qui est un enfant d’un élément avec classe section.
rien – ajouter plus de sélecteurs de classe à un sélecteur existant augmentera sa spécificité, par exemple h1.title va sélectionner <h1> éléments avec class="title".

Cascade

Vous pouvez combiner et remplacer des styles en utilisant des sélecteurs avec une plus grande spécificité. Un moyen simple de rendre le sélecteur plus spécifique est de lui donner plus de classes.

.text {
  color: #cccccc;
  font-size: 14px;
}

p.text.small-text {
  font-size: 12px;
}

Remplacement du style d’élément avec un sélecteur plus spécifique

Dans cet exemple, tous les éléments avec class="text" aura une couleur grise et une taille de texte de 14 pixels. Le <p> éléments avec class="text small-text" auront la même couleur grise, mais leur taille de texte sera de 12 pixels à la place en raison du sélecteur plus spécifique qui remplace le font-size propriété.

En pratique, je recommande de garder les sélecteurs aussi simples que possible, par exemple en n’utilisant qu’une seule classe et en ne mettant pas trop les styles en cascade.

Ajout de styles CSS

Il existe deux manières d’ajouter des styles à vos éléments :

attribut de style – Les éléments HTML peuvent avoir un style attribut, où vous pouvez écrire directement des expressions CSS qui seront appliquées à l’élément, par exemple : <div style="color: white; background-color: black;">
feuilles de style – déclaré soit entre le <style> balises en tant qu’enfant de <head> élément dans votre code HTML, ou en tant qu’élément distinct .css déposer.

Feuilles de style

Si vous créez un .css fichier contenant votre code CSS, vous pouvez l’importer en HTML à l’aide de la <link> tag avec rel="stylesheet" attribut:

<head>
  <link rel="stylesheet" href="https://codefrontend.com/css-guide/styles.css">
</head>

Importation du fichier CSS en HTML

Si vous utilisez quelque chose comme React avec un bundle comme Webpack, Vite ou similaire, vous pouvez importer le fichier CSS en utilisant la syntaxe ES6 dans vos fichiers JavaScript :

import './styles.css'

Importer CSS à l’aide de la syntaxe d’importation ES6

Les seules règles CSS pour commencer

CSS a plus de 500 propriétés différentes. Il serait stupide d’essayer de tous les mémoriser. Il n’y a qu’une vingtaine de règles que j’utilise le plus souvent dans la pratique.

📌

Ces règles vous permettront de commencer à construire sans vous submerger. Ensuite, une fois que vous avez construit quelque chose, commencez à apprendre des propriétés et des concepts CSS plus avancés tels que les requêtes multimédias et la grille CSS pour rendre vos sites Web réactifs et d’une apparence étonnante.

Couleur

Le color La propriété CSS change la couleur du texte. Vous pouvez le préfixer avec border- ou background- pour styliser les parties respectives de l’élément :

p {
  color: white;
  background-color: black;
  border-color: green;
  
  /* Additional styles needed for border */
  border-style: solid;
  border-width: 3px;
}

Changer de couleur avec CSS

Voici à quoi ça ressemble :

Largeur et hauteur

Vous pouvez spécifier la taille de l’élément en modifiant le width et height Propriétés CSS. Il est courant d’utiliser des valeurs de pixel absolues ou des pourcentages, mais d’autres unités sont également disponibles :

.full {
  width: 100%; /* Fills the space horizontally */
}

.fixed-height {
  height: 200px; /* Fixed 200px vertical size */
}

Modification de la taille à l’aide de CSS

Rembourrage et marge

L’espace vide à l’intérieur de l’élément est appelé remplissage et à l’extérieur de l’élément est la marge. Voici comment ajouter un espacement aux éléments HTML :

.section {
  padding: 20px; /* Empty space inside of the element on all sides */
  margin: 10px /* Empty space outside of the element on all sides */;
}

Espacement en CSS

Vous pouvez contrôler où ajouter un espace blanc en ajoutant -top, -left, -right ou -bottom:

.box {
  padding-left: 10%;
  margin-bottom: 20px;
}

Spécifier où ajouter un espacement

Frontière

Border nécessite trois propriétés width, style et colormais vous pouvez utiliser le raccourci que je recommande :

.box {
  border: 1px solid black; /* width style color */
}

Ajouter des bordures en CSS

Comme avec la marge et le rembourrage, vous pouvez ajouter -top, -left, -right ou -bottom pour spécifier où ajouter la bordure.

Afficher

Si vous souhaitez supprimer l’élément de l’écran, une méthode courante consiste à définir display: none;

Vous devrez également définir display: flex; lorsque vous souhaitez utiliser le modèle flexbox.

D’autres options courantes d’affichage incluent inline (par défaut pour des éléments comme <span>, <b>, <i>) et block (par défaut pour <div> , <p> et la plupart des autres).

Boîte flexible

L’élément passe en mode flexbox lorsque vous définissez display: flex;

Les propriétés flexbox les plus couramment utilisées sont :

flex – pour contrôler ce que l’élément doit faire avec l’espace libre disponible.
flex-direction – pour contrôler la direction de mise en page automatique.
justify-content – pour contrôler l’alignement des éléments sur l’axe parallèle à la direction de flexion.
align-items – pour contrôler l’alignement des éléments sur l’axe perpendiculaire à la direction de flexion.

Si vous utilisez Figma, flexbox est similaire à la mise en page automatique. C’est un outil incroyablement utile dans le développement Web moderne qui rend la création de mises en page simple et rapide.

Voici un excellent guide visuel de @NikkiSiapno et @ChrisStaud (ils font de superbes explications visuelles des concepts de programmation):

CSS Flexbox simplifié

Tout ce que vous devez savoir sur Flexbox en 15 pagesSimple à comprendre et magnifiquement expliqué avec des illustrations et des diagrammes.Ce qui est inclus ?Terminologie FlexboxToutes les 15 propriétés flexbox expliquées simplementDescriptionsValeurs par défautValeurs non validesIllustrations qui démontrent les valeurs des propriétésAccès…

Police de caractère

Les propriétés de police les plus courantes que vous utiliserez sont :

font-size – pour changer la taille de la police.
font-family – pour changer la police elle-même.

De plus, vous souhaiterez parfois utiliser line-height qui vous permet essentiellement d’augmenter ou de diminuer l’espace entre les lignes de texte.

Voici à quoi ils pourraient ressembler :

body {
  font-size: 12px;
  line-height: 20px;
  font-family: "Gill Sans", Arial, sans-serif; /* Ordered by preferrence */
}

Position

Il y a trois valeurs que vous utiliserez le plus souvent pour position propriété:

relative – l’élément conteneur pour c’est absolute enfants positionnés.
absolute – superpose l’élément au-dessus d’un autre contenu aux coordonnées à l’intérieur du relative parent.
fixed – identique à absolue, sauf que les coordonnées sont relatives à la fenêtre d’affichage du navigateur.

Vous pouvez spécifier les coordonnées de l’élément en utilisant top, left, right et bottom propriétés:

.parent {
  position: relative; /* Container for absolute children */
}

.child {
  position: absolute; /* Relative to .parent */
  
  /* Coordinates inside .parent */
  top: 50%;
  bottom: 0px;
  left: 20px;
  right: 20px;
}

.overlay {
  position: fixed; /* Relative to the browser window */
  top: 100%;
}

CSS position usage

Indice Z

CSS z-index est utilisé pour contrôler quels éléments seront au-dessus lorsqu’ils chevauchent d’autres éléments. Un nombre plus élevé signifie une priorité plus élevée. Habituellement, il est utilisé sur absolute ou fixed éléments positionnés :

.absolute-element {
  z-index: 10;
}

CSS z-index usage

Débordement

Le overflow La propriété contrôle la façon dont le contenu d’un élément doit se comporter lorsqu’il ne rentre plus dans sa boîte.

Le plus souvent, vous souhaiterez définir overflow: auto; pour afficher les barres de défilement. Cependant, vous avez également la possibilité de couper le contenu à l’aide de overflow: hidden; ce qui peut être utile si vous souhaitez afficher des points de suspension par exemple.

.clipped-container {
  overflow: hidden; /* Will hide content that doesn't fit */
}

/* You can control the vertical and horizontal overflows individually */
.scrollbar-container {
  overflow-y: auto; /* Will only show vertical scrollbar */
  overflow-x: hidden; /* Prevents horizontal scrolling */
}

CSS overflow usage

Dimensionnement de la boîte

Le box-sizing propriété contrôle quoi width et height signifie – la taille du contenu ou la taille de la boîte.

Pour vous épargner de la frustration, je vous recommande simplement de régler border-box sur tous les éléments (au lieu de la valeur par défaut content-box), car il est plus intuitif de travailler avec :

* {
  box-sizing: border-box;
}

Réinitialiser le box-sizing sur tous les éléments

À long terme, il est important de comprendre le modèle de boîte CSS, alors voici une excellente brève explication par @ishratUmar18 sur Twitter:

Conclusion

Même s’il existe des centaines de propriétés CSS disponibles, vous en utiliserez rarement la plupart. Ce guide a couvert ceux nécessaires pour commencer à construire quelque chose.

Cela dit, il reste encore beaucoup pour savoir si vous voulez créer des sites Web étonnants. Je n’ai pas abordé les requêtes multimédias ou la grille CSS. Vous devriez les apprendre ensuite. Cependant, ce guide devrait suffire à vous aider à créer votre première application.

Maintenant, commencez à construire quelque chose !

PS, si vous voulez toujours lire quelque chose, pourquoi ne pas en savoir plus sur les crochets React et les modèles qu’ils ont remplacés ?

Modèles de réaction remplacés par des crochets

Découvrez comment les crochets React ont remplacé les anciens modèles de codage afin que vous écriviez un code propre et moderne.