Ceci est le troisième article de notre série «Retour aux sources» dans lequel nous examinons les concepts de base du développement Web. Si vous êtes un designer peu ou pas familiarisé avec la programmation Web, cette série est faite pour vous.
Dans notre premier article, nous avons examiné ce qu'est le HTML et dans notre deuxième article, nous avons présenté l'anatomie de base d'un document HTML. Aujourd'hui, nous allons passer à un nouveau sujet et répondre à une question très importante: qu'est-ce que le CSS?
Qu'est-ce que le CSS?
Avant de répondre directement à cette question, revenons à la réponse à la question de la première partie: Qu'est-ce que HTML? Comme nous l’avons appris, d’un point de vue conceptuel, on pourrait dire que HTML comprend principalement contenu et structure d'une page Web. Nous avons utilisé la métaphore d'un squelette et discuté de la manière dont HTML constitue les éléments de base du World Wide Web, tel que nous le connaissons.
Si une page Web contient un paragraphe, il provient du code HTML. S'il existe un titre et une galerie d'images, encore une fois, ces éléments ont probablement été insérés sous forme d'extraits de code HTML (exceptions évidentes pour Flash et similaires).
Dans cette optique, les feuilles de styles en cascade, plus communément appelées CSS, deviennent le moyen de style ce contenu. Les choix de couleurs, les textures d'arrière-plan répétitives, les ombres, les coins arrondis et même la mise en page sont autant de domaines de CSS. En tant que designer, c’est le domaine dans lequel vous prospérerez le plus.
Pour avoir une idée claire de l’importance des CSS pour la conception Web, examinons une page Web avec et sans feuille de style.
Avant et après CSS
Considérant que CSS est relégué à simplement? Style? Sur une page Web, vous pourriez être tenté de penser qu’il ne s’agit que d’une cerise sur le gâteau, ce qui signifie qu’il ne fournit que de petits ajustements esthétiques. Cependant, l'impact de CSS sur une page Web est énorme.
Pour illustrer cette idée, voici une capture d'écran de la page d'accueil de Design Shack avec la feuille de style principale désactivée:
Avant CSS
Cette structure de base pourrait être déclinée en un nombre infini de variations, chacune ayant un aspect tellement différent que, malgré le même code HTML exact, vous ne les reconnaîtriez même pas comme la même page!
Avec l'inclusion d'une seule feuille de style, la page d'accueil de Design Shack devient:
Après CSS
Puis-je avoir une "merde sainte"? Vous remarquerez que ce ne sont pas de simples changements de couleur. L'influence de CSS sur l'expérience utilisateur est dramatique. La mise en page complète a été reconstruite en trois colonnes, les textures d'arrière-plan ont été appliquées et la typographie a été considérablement améliorée.
Comment ça marche?
Alors, comment CSS exécute-t-il toute cette magie? Quel exploit insensé de codage devrez-vous apprendre à dire au navigateur pour effectuer une transformation aussi spectaculaire? La bonne nouvelle est que CSS est beaucoup plus facile que vous ne le pensez. C'est assez bas niveau comparé au type de codage hardcore que vous aurez à faire dans des langages comme PHP. C'est aussi incroyablement amusant une fois que vous avez compris.
C'est une question de sélecteurs
Dans la première partie de cette série, nous avons appris comment le code HTML est construit principalement sur Mots clés. À peu près tous les extraits de code HTML sont composés de HTML éléments encapsulé avec un ensemble de balises qui sont à peu près conformes à cette syntaxe:
Avec CSS, la syntaxe est complètement différente et pourtant étroitement liée. Nous pouvons vraiment approfondir et cibler chaque petit élément de notre code HTML et le personnaliser lui-même. Nous accomplissons cette tâche avec Sélecteurs CSS.
Un sélecteur est exactement ce que cela ressemble: il vous permet de sélectionner quelque chose à manipuler, dans notre cas une partie particulière du code HTML. De nombreux sélecteurs CSS correspondent directement au tag qu'ils ciblent. Ainsi, par exemple, si nous voulions styler le contenu entre les balises h1 et paragraphe ci-dessus, nous utiliserions ce qui suit.
Comme vous pouvez le constater, le sélecteur pour le? H1? La balise est simplement? h1 ?. Le sélecteur est ensuite suivi d'un ensemble d'accolades, qui contiendra l'ensemble du code correspondant à ce sélecteur.
Le code à l'intérieur des accolades est divisé en Propriétés, qui définissent exactement ce que vous modifiez à propos de la partie ciblée du HTML. Comme dans Photoshop, chaque élément de la conception possède plusieurs propriétés pouvant être modifiées. Un passage de texte donné a une police, une taille de police, une couleur, une hauteur de ligne, etc. Chacune de celles-ci doit être définie manuellement au lieu de simplement compter sur les valeurs par défaut, qui sont incohérentes entre les navigateurs.
Voici un aperçu de cette syntaxe en action. Nous avons un sélecteur, suivi par des accolades, qui contient une propriété et sa valeur suivie d'un point-virgule (facultatif sur la dernière propriété d'une liste).
Ce code est très lisible par l’homme et définira simplement la taille de tout le texte h1 de la page sur 25 pixels. La terminologie ici est très importante, alors voici un autre regard pour vous, les gens qui ont l’esprit visuel.
Utilisation de plusieurs propriétés
L'exemple ci-dessus est assez simplifié. Comme je l'ai mentionné, chaque sélecteur a généralement plusieurs propriétés définies par le développeur. Différents codeurs organisent leur code de différentes manières, mais voici comment se présente un bloc de CSS typiquement structuré.
Ici, nous définissons la police, sa taille et sa couleur. La? Famille de polices? utilise des polices de sauvegarde dans le cas où la police principale n'est pas présente sur la machine de l'utilisateur final.
Plus que des tags
Les exemples de sélecteurs ci-dessus visent des balises HTML simples, mais CSS est livré avec des sélecteurs beaucoup plus complexes pouvant cibler tous les types de HTML.Vous pouvez même combiner ou? Chaîne? divers sélecteurs ensemble.
Par exemple, supposons que votre code HTML comporte deux paragraphes à l'intérieur de deux div différents:
Maintenant, si je ciblais simplement la balise de paragraphe dans mon CSS, ces deux paragraphes seraient affectés. Cependant, disons que je veux qu'ils soient différents, comment pourrais-je le faire?
Voici une façon de voir si vous pouvez comprendre ce qui se passe:
Comme vous pouvez le constater, nous affectons à chaque paragraphe une couleur différente en combinant des sélecteurs. Nous avons ciblé le? P? dans les deux cas, mais dans le premier morceau, j'ai ciblé la section "main"? id et dans la seconde j'ai ciblé la? secondarySection? classe. La différence étant que les classes sont réutilisables et peuvent être appliquées à plusieurs éléments du code HTML, tandis que les identifiants sont uniques. Donc, une fois que nous appelons notre? SecondarySection? classe, nous pouvons facilement appliquer ces styles à d’autres divs en appliquant simplement cette classe au format HTML.
En CSS, vous voulez toujours être aussi efficace que possible, alors faites tout ce que vous pouvez avec le moins de code possible. Les cours sont un énorme gain de temps et d’espace.
Pour en savoir plus sur les sélecteurs CSS, consultez notre article Sélecteurs CSS: Juste les trucs délicats.
En cascade?
Nous avons maintenant une compréhension rudimentaire de? Stylesheets? et comment ils? style? le HTML, alors d'où vient le? cascade? une partie entre?
Cela revient encore une fois à la notion d'efficacité. Une fois que vous avez défini un style générique, il cascade vers le bas. à d'autres éléments. Ce code, par exemple, active chaque balise d'ancrage de la page en rouge:
La spécificité compte beaucoup, donc si nous ajoutons un peu, tout change:
Maintenant, tous les liens sur la page sont colorés en rouge, sauf ceux avec la? section? id, qui sera bleu. Le sélecteur plus spécifique a annulé le sélecteur général.
Pour un bref aperçu de la façon de déterminer les règles qui remplaceront les autres, consultez la section Getting StartedED avec CSS.
Comment fonctionne la conception Web?
Maintenant que nous avons examiné ce que sont le HTML et le CSS, vous devriez être en mesure de voir comment ils fonctionnent ensemble pour créer des pages Web finies. Passons en revue un exemple rapide d'un processus de conception que quelqu'un pourrait suivre.
Maquette de Photoshop
Tout d'abord, quelqu'un ouvre Photoshop et conçoit fondamentalement le site. A quoi ça va ressembler, quelles couleurs seront utilisées, où les images seront placées, les différentes colonnes de contenu: tout.
Notez que cette étape est complètement facultative. Il y a une grande tendance ces jours-ci vers concevoir dans le navigateur et ignorer complètement les compositions Photoshop ou Fireworks.
HTML
Ensuite, le développeur Web, qu'il s'agisse ou non de la même personne, examinera la maquette et choisira des parties pouvant être insérées dans le code HTML, telles que des paragraphes, des images, etc. avec des divs ou d'autres éléments structurels.
CSS
Le contenu en HTML pur sera dépourvu de tout style, aussi le développeur examinera-t-il la mise en page, les polices, les couleurs, etc. utilisés dans la maquette Photoshop et traduira ces caractéristiques en CSS. En tant que développeur, il surveille la prévisualisation en direct pour voir comment le code affecte le contenu jusqu'à ce que tout soit parfait.
Conclusion
Après avoir lu les trois articles de cette série, vous devriez avoir une idée précise de ce que sont le HTML et le CSS et de la manière dont ils fonctionnent ensemble pour créer des pages Web.
Il ne s’agissait nullement d’un examen exhaustif de l’une ou l’autre de ces syntaxes, pas plus que de l’intention de vous familiariser avec votre propre code. Au lieu de cela, il comble cette lacune conceptuelle de connaissances en ce qui concerne ce que sont ces langues et comment elles sont utilisées. Que vous vouliez ou non être un développeur web, posséder ces connaissances vous fera un meilleur concepteur web.