L'importance du CSS ne peut vraiment pas être sous-estimée. Mais qu'est-ce que CSS, qu'est-ce que cela signifie et pourquoi est-il si difficile à comprendre? Ici, vous aurez une compréhension approfondie de ce qu'est exactement le CSS, des différents types de CSS que vous pouvez utiliser et de la manière de tout mettre en œuvre dans vos propres projets Web
Le CSS est important car il contrôle tous les aspects liés à la conception de votre site Web. La typographie, les couleurs, les mises en page et tout autre aspect visuel de votre site Web sont tous contrôlés par CSS.
De plus, CSS vous permet de contrôler et d'ajuster la conception et la mise en forme de l'ensemble de votre site Web (quelle que soit sa taille) à partir d'un seul endroit. Cela se fait en utilisant ce qu'on appelle une feuille de style externe .
Désormais, si vous souhaitez créer et gérer vous-même vos sites Web, il est essentiel de mieux comprendre comment tout cela fonctionne. Mais c'est souvent considéré comme déroutant et frustrant.
En attendant, si vous souhaitez en savoir plus sur l'importance du CSS, les différents types de CSS, et ce que le CSS signifie pour vous et votre site Web, restez dans les parages ... car c'est exactement ce que nous allons couvrir dans le reste de cet article.
Sommaire
L’importance Du CSS: Allons Plus En Profondeur!
Outre HTML, CSS (qui est l'abréviation de Feuilles de style en cascade ) est à la base de toute conception Web moderne.
D'autres technologies peuvent être ajoutées au mélange de conception Web - JavaScript, PHP et autres - mais HTML et CSS sont toujours utilisés. Encore une fois, ils sont la base.
Mais quelle est la différence entre HTML et CSS?
Excellente question! Voici de quoi il s'agit ...
HTML gère la structure de votre page Web. Le HTML est composé d'éléments (parfois appelés balises). Il existe des éléments HTML pour toutes sortes de contenus que vous auriez sur une page - en-têtes, paragraphes, sections, tableaux ... et bien d'autres.
Considérez ces éléments HTML comme des conteneurs, ou des boîtes, qui contiennent le contenu de votre page. Donc, si vous voulez qu'un contenu soit un en-tête, vous le mettriez dans un conteneur d'en-tête. Vous voulez qu'un autre contenu soit un paragraphe? Mettez-le dans un conteneur de paragraphes. Et souvent, ces conteneurs peuvent être placés les uns dans les autres pour créer une structure de page spécifique.
Ainsi, de cette manière, vous pouvez considérer le HTML comme l'échafaudage et les poutres qui sont utilisés pour construire vos pages Web.
Alors, qu'est-ce que CSS et comment s'intègre-t-il dans tout cela?
CSS applique la mise en forme (comme les polices, les couleurs, le positionnement des objets, etc.) par-dessus le cadre structurel brut d'une page.
Ainsi, CSS se trouve au-dessus de la structure brute du HTML pour l'habiller et rendre tout joli. C'est pourquoi HTML et CSS sont fondamentaux pour toute conception Web - ils fonctionnent ensemble pour créer et mettre en forme des pages Web.
Et c'est ce qui rend le CSS si important. CSS sépare le contenu et la structure d'une page de sa conception et de sa mise en forme. Cela permet aux concepteurs et aux propriétaires de sites Web d'appliquer rapidement la mise en forme à leurs mises en page et d'apporter les modifications et ajustements nécessaires.
Si vous souhaitez voir un exemple visuel de la façon dont tout cela fonctionne, alors il n'y a pas de meilleur exemple que developer Mozilla . Là, vous pouvez appliquer un formatage CSS différent directement au même HTML structurel.
Et parce que CSS sépare la conception du contenu, les propriétaires de sites peuvent modifier et modifier la conception de leur site autant qu'ils le souhaitent sans risquer la structure ou le contenu de leur site.
Si vous souhaitez examiner de plus près le fonctionnement du HTML et du CSS, consultez nos prochains tuto Apprendre le HTML - Tutoriel HTML pour les débutants et CSS pour les débutants - Tutoriel CSS .
Alors maintenant que nous comprenons l'importance du CSS, quels sont certains des avantages du CSS? Devriez-vous passer du temps à l'apprendre? Et quelles sont les fonctions spécifiques du CSS?
Entrons dans tout cela et plus encore, en commençant par une compréhension plus approfondie de ce qu'est le CSS ...
Qu'est-Ce Que CSS? Un Regard Plus Profond ...
Afin de bien comprendre l'importance du CSS, un peu d'histoire est nécessaire ...
Il y a bien longtemps, au tout début d'Internet, seul le HTML existait. À l'origine, HTML a été développé comme ce qu'on appelle un «langage de balisage». Autrement dit, il était utilisé pour marquer des objets sur votre page en tant que tableaux, images, paragraphes, etc.
Ce sont les conteneurs dont nous venons de parler.
Et à l'origine, tout type de formatage ou de conception de page était une réflexion après coup. En fait, plus précisément ... le design et le style n'étaient même pas une considération!
Vous voyez, le premier Internet a été utilisé pour partager des informations de recherche. Ainsi, non seulement le formatage des pages était limité et largement inutile, mais des bandes passantes étroites ne pouvaient pas gérer autre chose qu'un style basique et rudimentaire.
Mais ensuite, Internet a commencé à se répandre. De plus en plus de personnes ont commencé à l'utiliser et Internet a été beaucoup plus utilisé. En conséquence, les gens exigeaient de plus en plus du HTML ... exigeant qu'il commence à faire des choses pour lesquelles il n'avait pas été développé à l'origine.
Des tâches telles que la mise en forme du texte, l'application de couleurs et la gestion des mises en page mettent à rude épreuve le HTML. Comme solution rapide, ces types d'options de formatage ont été ajoutés au HTML. Et des hacks et des remises de gaz ont été développés pour compenser le manque de formatage et de contrôle du HTML.
Et très vite, le HTML (et la conception Web en général) est devenu très complexe, gonflé et difficile à gérer.
Mais heureusement, une solution a été développée. Cette solution éliminerait les gros problèmes qui ont été créés en forçant HTML à tirer le double-devoir à la fois comme outil structurel et comme aide à la conception.
Et cette solution était CSS!
CSS a été développé spécifiquement pour prendre en charge toutes les tâches de conception et de mise en forme. Ce HTML a restauré son objectif initial de balisage et de structuration de page. Et, CSS a donné aux concepteurs et aux propriétaires de sites Web beaucoup plus de contrôle sur l'apparence et la présentation de leurs pages Web.
Mais qu'est-ce que CSS exactement?
CSS est ce qu'on appelle un langage de feuille de style . Plus précisément, il est utilisé pour formater des documents qui ont été écrits en utilisant un langage de balisage ... le plus souvent HTML.
Voici donc comment HTML et CSS travaillent ensemble pour créer des pages Web et des sites: pensez au CSS comme étant le patron, indiquant aux éléments HTML (les conteneurs dont nous avons discuté) à quoi ils devraient ressembler et où ils devraient apparaître dans la mise en page d'une page.
Ainsi, CSS peut indiquer à un conteneur HTML particulier d'apparaître sur le côté gauche de la mise en page, avec une certaine couleur d'arrière-plan et un espacement, peut-être avec une bordure ... et un certain nombre d'autres instructions de style.
C'est vraiment tout ce qu'il y a à faire!
Alors maintenant que vous avez compris l'importance du CSS et son fonctionnement, passons à la section suivante: Les grands avantages du CSS!
Avantages De CSS: Que Peut Faire Le CSS?
Maintenant que vous avez compris l'importance du CSS, parlons maintenant de certains des grands avantages du CSS.
Jusqu'à présent, nous savons que CSS contrôle toute la conception et la mise en forme appliquées à vos pages Web. Mais en plus de prendre en charge les tâches de formatage du HTML, CSS va beaucoup plus loin. Ci-dessous, j'ai décomposé les grands avantages qu'offre CSS ...
CSS Offre Des Options De Formatage Beaucoup Plus Étendues
Avant le développement et la prise en charge généralisée de CSS, HTML offrait des options de formatage de texte très limitées. Tout ce qui va au-delà de la définition des polices, des tailles et des couleurs était un véritable étirement.
Et en ce qui concerne la gestion de la mise en page, le HTML était extrêmement limité. En fait, la création de mises en page multi-colonnes avec HTML impliquait d'utiliser un hack: Utiliser des tableaux avec les bordures désactivées. Difficile à imaginer maintenant ... mais à l'époque, c'était le seul moyen de créer des mises en page multi-colonnes.
(Si vous êtes trop jeune pour vous souvenir de ces jours ... considérez-vous chanceux! )
Mais maintenant, avec CSS, nous avons un nombre énorme (pratiquement vertigineux) d'options de typographie, de style et de mise en page. Il existe des tonnes et des tonnes de propriétés CSS que nous pouvons utiliser dans nos pages Web. Cela signifie que nous avons des capacités de formatage beaucoup plus étendues avec CSS.
Côté mise en forme du texte, c'est le rêve d'un typographe: tailles de police évolutives, poids, hauteurs de ligne, espacement des lettres ... Et c'est la pointe de l'iceberg de type!
Et en ce qui concerne la mise en page, CSS a fait d'énormes progrès ces dernières années. Au début du développement de CSS, nous avons eu quelques faux départs. Le positionnement CSS et les flottants laissaient beaucoup à désirer. Mais avec le développement de CSS Flexbox et CSS Grids, les mises en page difficiles appartiennent au passé.
Désormais, nous pouvons créer des mises en page CSS précises et réactives qui s'ajustent automatiquement à une variété de tailles d'écran. Au fil des ans, CSS a parcouru un très long chemin!
Si les choses sont encore un peu floues pour vous, regardez la vidéo ci-dessous, qui répond aux 5 plus grandes questions sur HTML et CSS ...
Maintenant, jetons un coup d'œil à un autre gros avantage de CSS ...
CSS Fournit Une Conception Et Un Formatage Cohérents Sur Tout Votre Site Web
À l'époque pré-CSS, maintenir une mise en forme cohérente sur vos pages et sur l'ensemble de votre site Web était une véritable douleur. Tous les formats et styles devaient être appliqués article par article, page par page. Cela signifiait que si vous aviez un grand site Web, garder tout ce qui était cohérent était une tâche énorme.
Et, maintenir votre site à long terme était un cauchemar. Un ajustement apparemment simple (comme changer une police ou une couleur sur un titre) peut prendre des heures à être défini sur un grand site Web. Ce n'était pas amusant.
Mais quand le CSS est venu, tout cela a changé.
Rappelez-vous, CSS a séparé la conception de la structure, non?
La façon dont cela est fait est que le CSS est basé sur des règles . Si vous avez déjà utilisé des styles de paragraphe ou des styles de caractère dans un traitement de texte ou une application de publication assistée par ordinateur, le concept des règles CSS est exactement le même.
Ainsi, plutôt que d'appliquer la mise en forme élément par élément, une règle CSS est créée à la place. Et la règle peut contenir n'importe quel nombre d'instructions de formatage ... des instructions telles que la police à utiliser, l'espacement, les alignements et bien plus encore.
Ces règles sont ensuite stockées dans une feuille de style (plus à ce sujet plus tard) qui est ensuite appliquée aux pages de votre site.
Et c'est là que les choses vont vraiment bien ...
Si vous devez modifier la conception ou la mise en forme de vos pages Web, vous n'allez pas sur les pages elles-mêmes. Au lieu de cela, vous vous dirigez vers les règles qui contrôlent les éléments de page que vous souhaitez ajuster. Une seule modification de votre règle CSS se met automatiquement à jour sur l'ensemble de votre site Web ... instantanément!
Comment est-ce pour la productivité?!
Ainsi, CSS a complètement changé la façon dont le style Web est géré, aidant à maintenir une mise en forme cohérente sur l'ensemble de votre site Web. Et, CSS rend la maintenance et la mise à jour de votre site plus rapides, plus faciles et moins sujettes aux erreurs. Il élimine les longues heures monotones consacrées à la mise à jour manuelle du formatage HTML.
CSS Peut Ajuster Vos Mises En Page En Fonction De L’endroit Où Il Est Affiché
Voici un autre grand avantage du CSS (nous en avons brièvement parlé il y a un instant): en plus d'utiliser CSS pour contrôler la typographie et la mise en page, il peut également être utilisé pour contrôler le formatage de votre site Web en fonction de l'appareil ou du support utilisé pour afficher votre site web.
En d'autres termes, vous pouvez modifier l'apparence et le comportement de votre site Web lorsqu'il est affiché sur un iPhone par rapport à un téléviseur ... ou même entre un écran d'ordinateur et une version imprimable de vos pages.
Tout cela est rendu possible par quelque chose appelé les requêtes multimédias CSS .
Pensez aux requêtes médiatiques comme à des déclarations si / alors: si mon site Web est affiché sur un écran de smartphone, faites-le ressembler à ceci . Ou, si mon site Web est affiché sur un ordinateur de bureau, faites-le ressembler à cela.
Les requêtes multimédias CSS sont incroyablement flexibles et puissantes. Ils sont une partie très importante du CSS. Et quand ils sont combinés avec CSS Flexbox et CSS Grids, les options qui deviennent disponibles pour vous sont incroyables ...
... et sans limites!
CSS Améliore Les Performances Du Site
Un autre grand avantage de CSS est l'augmentation des performances du site Web. Dans l'ancien temps, avec le formatage intégré directement dans HTML, chaque page devait se charger dans son intégralité. Lorsqu'un visiteur suit un lien vers une autre page de votre site, cette page devait alors se charger complètement.
Cela, comme vous pouvez le deviner, a considérablement ralenti la vitesse d'un site Web.
Mais avec CSS - en particulier, les règles CSS qui sont stockées dans une feuille de style externe - les règles de mise en forme sont chargées une fois pour l'ensemble de votre site Web.
Ainsi, la première fois qu'un visiteur arrive sur votre site, toutes les instructions de formatage sont chargées une seule fois. Lorsque votre visiteur accède à des pages supplémentaires de votre site, seules les pages elles-mêmes doivent se charger ... pas le formatage ou le style.
Cela signifie qu'avec CSS, votre site se chargera et fonctionnera beaucoup plus rapidement pour vos visiteurs.
CSS Permet Une Personnalisation Rapide
Un autre grand avantage de CSS est la possibilité de personnaliser des modèles préexistants. Voici ce que je veux dire ...
Disons que vous maîtrisez décemment le CSS (et que le CSS n'est pas difficile à apprendre !). Et imaginons que vous utilisez WordPress pour gérer votre site Web ( un excellent choix , au fait). Dans ce scénario, vous pouvez creuser dans le modèle de votre site (appelé thème dans le jargon WordPress) et le personnaliser à votre guise.
Ainsi, plutôt que de créer un site Web à partir de rien, vous pouvez à la place trouver une mise en page de modèle existante qui est relativement proche de la conception souhaitée. À partir de là, vous pouvez simplement le modifier et le peaufiner pour obtenir le design exact que vous souhaitez.
CSS Vous Permet De Créer Des Animations Et Des Effets
Voici un autre avantage de CSS qui mérite d'être mentionné: l'animation. Sans CSS, si vous vouliez une sorte d'animation ou d'élément interactif sur votre page, la seule option était d'utiliser JavaScript.
Mais maintenant, vous pouvez créer des animations simples et de petits effets de rétroaction avec seulement quelques lignes de code. Et c'est ce genre de petits commentaires interactifs subtils qui rend vos pages vraiment pop pour vos visiteurs.
Travaillez Plus Rapidement Avec Les Frameworks CSS
Un dernier avantage de CSS que je vais mentionner est ce qu'on appelle CSS Frameworks. Les cadres CSS sont des bibliothèques pré-créées qui vous permettent de prototyper et de développer rapidement des mises en page. Les deux frameworks les plus populaires sont Bootstrap et Foundation .
Personnellement, je n'ai pas utilisé Foundation, mais je sais que c'est fantastique. Au lieu de cela, j'ai opté pour Bootstrap et je l'adore. Bootstrap facilite et accélère la création de mises en page Web personnalisées. Au lieu de tout créer à partir de zéro, vous utilisez simplement des blocs de construction qui ont déjà été créés pour vous.
Et, en utilisant Bootstrap avec un constructeur de site comme Pinegrow, la création de mises en page est encore plus rapide!
Maintenant, si vous ne savez pas si cela vaut la peine d'apprendre le CSS ou non, jetez un œil à HTML et CSS: 3 gros gains pour apprendre les bases .
Et maintenant que vous avez une idée solide des grands avantages du CSS, creusons maintenant plus en profondeur et découvrons les types de CSS que nous pouvons utiliser ...
Types De CSS Que Vous Pouvez Utiliser
Vous avez donc une très bonne idée de l'importance du CSS et de ce qu'il peut faire pour vous. Mais ici, abordons les différents types de CSS et comment vous pouvez appliquer tout cela à vos projets de conception Web.
Plus tôt, vous avez appris que CSS est basé sur des règles (comme mentionné, tout comme les styles de paragraphe et de caractère). Parfois, les règles CSS sont également appelées sélecteurs . Les termes règle et sélecteur sont souvent utilisés de manière interchangeable. Et en CSS, il existe en fait une variété de types de règles (ou de sélecteurs) que nous pouvons utiliser.
Voici une course rapide vers le bas: On peut utiliser des sélecteurs de classe , sélecteurs d'éléments (parfois appelés redéfinis sélecteurs d'éléments HTML), sélecteurs d'identification , les sélecteurs descendants , sélecteurs de classe pseudo ... et quelques autres qui obtiennent un peu plus avancé.
L'une des choses les plus importantes avec CSS est d'utiliser le bon type de sélecteur CSS pour la tâche à accomplir. La bonne nouvelle est que plus vous vous sentez à l'aise avec CSS, plus ce truc devient une seconde nature.
Maintenant, il est important de savoir qu'il existe plusieurs façons d'appliquer le CSS à vos pages HTML. L'approche la plus courante (et ce qui est considéré comme la meilleure pratique) consiste à utiliser ce qu'on appelle une feuille de style externe . Nous en avons brièvement parlé plus tôt.
Et, vous avez peut-être vu une feuille de style externe lors de vos voyages - c'est un fichier dans le répertoire de votre site Web avec une extension de fichier .css. Souvent, les feuilles de style externes sont nommées quelque chose de simple comme style.css .
Une feuille de style externe est simplement un fichier contenant une liste de règles CSS que vous souhaitez appliquer sur l'ensemble de votre site Web. Ensuite, vos pages HTML individuelles sont liées à votre feuille de style externe, se mettant sous son contrôle.
Ainsi, quelles que soient les règles stockées dans une feuille de style externe, les pages HTML statiques qui y sont connectées le font. C'est si simple!
Maintenant, bien que l'utilisation d'une feuille de style externe soit le moyen le plus efficace de travailler avec CSS, il existe d'autres approches.
Par exemple, vous pouvez créer ce qu'on appelle une feuille de style interne . Il s'agit d'une liste de règles CSS contenues dans une page HTML spécifique. En d'autres termes, une feuille de style interne ne peut contrôler que la page dont elle fait partie.
Les feuilles de style internes sont utiles pour les petites pages autonomes qui contiennent une mise en forme unique à cette page ... peut-être comme une page d'inscription ou une page avec des offres spéciales.
Une troisième façon d'appliquer le CSS au HTML consiste à utiliser du CSS en ligne . Ici, les propriétés de mise en forme CSS sont appliquées directement à des éléments HTML spécifiques. Donc, en d'autres termes, le CSS en ligne est intégré directement dans votre HTML. Bien que cela puisse être pratique pour les besoins de mise en forme rapides et ponctuels, ce n'est pas une méthode préférée. C'est parce que le CSS en ligne va à l'encontre de l'idée même que le CSS soit séparé de la structure HTML qu'il contrôle.
Voici donc un aperçu des différents types de CSS que vous pouvez utiliser dans vos projets Web.
Conclusion Sur L’importance Du CSS
Il y a donc un aperçu détaillé de l'importance du CSS. Encore une fois, il est difficile de surestimer à quel point le développement de CSS a été important pour la conception Web moderne.
Vous avez appris ce qu'est le CSS et comment il sépare la conception (en particulier, la typographie, la mise en page et la façon dont les pages apparaissent sur différents affichages) de la structure de page brute. Avec cette compréhension, vous devriez maintenant avoir une idée claire de la puissance et de l'importance du CSS.
Ensuite, vous avez un aperçu détaillé des avantages du CSS. Vous avez appris comment CSS fournit aux concepteurs Web et aux propriétaires de sites des options de mise en forme plus étendues, la possibilité de maintenir la cohérence sur leurs sites Web et comment CSS simplifie la maintenance continue du site.
Vous avez également appris comment CSS gère les mises en page. Plus précisément, nous avons abordé CSS Flexbox et CSS Grid - deux avancées récentes qui rendent la création de mises en page beaucoup plus facile que les méthodes précédentes. Et pour pousser encore plus loin la création de votre layout, n'oubliez pas les frameworks CSS comme Bootstrap; et en utilisant un constructeur de pages comme Pinegrow pour simplifier tout le processus de création de mises en page.
Enfin, nous avons examiné les différents types de CSS. Plus précisément, les différents types de sélecteurs CSS que vous pouvez utiliser dans votre travail et les différentes façons dont le CSS peut être appliqué à vos mises en page Web - feuilles de style internes, feuilles de style externes et CSS en ligne.
J'espère que vous avez apprécié ce regard sur l'importance du CSS!