Généralités :
Au début du web, les possibilités de mise en place de style étaient très limitées. Avec le temps, le CSS est devenu un outil complet et puissant.
MAIS QUEL EST SON RÔLE ?
Le CSS (Cascading Style Sheets) joue un rôle crucial dans le développement web en permettant de contrôler l'apparence visuelle des pages HTML. Voici quelques points clés pour comprendre son rôle :
Séparation des préoccupations :
Repartons de notre code HTML ici.
À côté de celui-ci, nous allons maintenant créer un fichier pour notre CSS `styles.css`. Pour faire la liaison entre nos deux fichiers, nous allons ajouter une ligne dans le <head> de notre HTML. Cette ligne va dire à notre navigateur de charger la ressource extérieure en mémoire, notre CSS.
Comment procède-t-on pour styliser un texte ?
Ciblage des éléments :
Les sélecteurs CSS sont des motifs qui correspondent à des éléments HTML spécifiques sur une page. Ils déterminent quels éléments seront ciblés par les règles CSS et recevront les styles correspondants. Voici quelques exemples de sélecteurs :
Sélecteur d'élément : nom de la balise HTML, par exemple : "p" pour tous les paragraphes. (ref A)
Sélecteur de classe : Cible les éléments qui ont une classe spécifique attribuée, par exemple :
".exemple". (ref B)
Sélecteur d'identifiant : Cible un élément spécifique avec un identifiant unique, par exemple : "#header". (ref C)
Voici plusieurs exemples possibles pour cibler mon h1.
En utilisant des différents sélecteurs CSS, vous pouvez cibler avec précision les éléments que vous souhaitez styliser
Stylisation des éléments :
Le CSS permet de définir le style visuel de chaque élément HTML, tels que les couleurs, les polices de caractères, les tailles de texte, les marges, les bordures et les arrière-plans. Grâce au CSS, les concepteurs peuvent créer des mises en page attrayantes et cohérentes pour améliorer l'expérience utilisateur.
Chaque propriété CSS a un nom (attribut) et une valeur. Il existe une large gamme d'attributs CSS pour contrôler différents aspects de la présentation d'un élément HTML (ici)
Exemple : "color" est l'attribut, qui définit la couleur du texte. "red" est la valeur de l'attribut, qui spécifie que la couleur du texte sera rouge.
Modèle de boites :
Comme nous l’avons abordé dans notre article HTML, la structure de notre page est composée de contenu, placé dans des boîtes, elles-mêmes placés dans des boîtes parentes… Un bel emboîtement de poupées russes.
Le CSS peut ainsi jouer avec ce modèle pour écarter le contenu de sa boite (padding) ou au contraire, écraser celui pour le rendre plus petit (margin).
Mise en page, disposition de mes boites entre elles :
Pour la mise en page, les différentes approches sont flexbox et grid, chacune ayant ses propres avantages.
-
Flexbox :
Flexbox est une méthode qui permet de créer des mises en page dynamiques et réactives. Voici quelques points clés à retenir sur flexbox :
Disposition flexible : adaptation automatique à la taille de l'écran et au contenu des éléments. Alignement et distribution : contrôle précis sur l'alignement, la distribution et l'ordre des éléments dans leur conteneur. Axes principal et transversal : disposition le long de l'axe principal (row ou column) et de l'axe transversal.
Exemple : en repartant de notre code HTML
Pour se perfectionner : https://flexboxfroggy.com/
-
Grid :
Grid est une méthode bidimensionnelle qui permet de créer des mises en page avec des lignes et des colonnes. Voici quelques points clés à retenir sur grid :
Disposition en grille : contrôle précis sur la disposition des éléments dans les lignes et les colonnes. Alignement et espacement : fonctionnalités avancées pour l'alignement, l'espacement et la superposition des éléments dans la grille. Contrôle de la taille : dimensionnement en fonction des lignes et des colonnes
Pour se perfectionner : https://cssgridgarden.com/#fr
Adaptabilité aux différents appareils : Avec l'essor des appareils mobiles et des écrans de différentes tailles, le CSS joue un rôle essentiel dans la création de sites web adaptatifs. Les media queries CSS permettent de définir des styles différents en fonction des caractéristiques de l'appareil.
Animation et interactivité : En plus de la stylisation statique, le CSS offre également des fonctionnalités pour ajouter des animations et des transitions aux éléments HTML. Cela permet de rendre les sites web plus dynamiques et interactifs, améliorant ainsi l'engagement des utilisateurs.
Conclusion : Ouvrir la Porte à de Nouvelles Possibilités
En maîtrisant le CSS, nous posons les fondations essentielles pour le design web, permettant de créer des pages web attrayantes, fonctionnelles et adaptées à divers écrans. Cependant, le monde du développement web ne s'arrête pas là. Plusieurs autres technologies et outils peuvent enrichir encore davantage nos créations.
En continuant notre exploration du développement web, nous découvrirons qu'il y a toujours plus à apprendre et à expérimenter. Le CSS n'est qu'une partie de l'ensemble, et chaque nouvelle compétence que nous acquérons ouvre des portes vers des possibilités créatives et techniques infinies.
Ces premiers pas en CSS vous ont donné envie d'en apprendre davantage ? Lancez-vous avec notre bootcamp en développement web. Cette formation intensive de 5 mois peut-être suivie sur l'un de nos campus ou à distance.
