Dans le cours : L'essentiel des CSS

Définir le rôle du langage CSS - Tutoriel CSS

Dans le cours : L'essentiel des CSS

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Définir le rôle du langage CSS

“

Bonjour à toutes et à tous, et bienvenue dans cette formation sur le CSS. Pour démarrer, je vous propose de faire directement quelques petites expériences qui vont nous permettre de faire connaissance avec le site dans lequel nous allons travailler durant cette formation, et qui vont également nous permettre de bien comprendre le rôle que le CSS joue dans un site Web. Le site avec lequel nous allons travailler dans cette formation, vous l'avez devant les yeux. Vous avez en tout cas sa page d'accueil devant les yeux. C'est un site qui sera consacré à la photographie, et je vous propose de faire un petit tour du propriétaire. Nous avons la page d'accueil bien sûr. Nous avons également une page avec des galeries photo. Nous avons deux galeries dans notre exemple. Regardez quand je passe la souris sur ces galeries, nous avons un petit effet de survol. Quand je clique ici sur la première galerie photo, j'arrive sur une page qui me propose les photos de la galerie en question, avec également un petit effet de survol sur chacune des photos. Si je reviens sur ma page Galeries, que je clique sur l'autre galerie photo, j'ai d'autres images ici à ma disposition avec les mêmes effets de survol. J'ai également une page de contact. Nous avons un formulaire de contact que les internautes pourront utiliser pour nous envoyer un petit message. La page À propos contient simplement quelques éléments de texte, donc des titres, des paragraphes, et ici une liste. Enfin, nous avons un blog dans notre site. Nous avons ici la page d'accueil du blog avec les derniers articles parus dans notre blog, et puis une colonne de côté avec un moteur de recherche, la liste des différentes catégories, et ici la liste des archives dans notre blog. La dernière page dans ce site, on va la trouver quand on va cliquer sur Lire la suite. C'est une page qui représente un article individuel de notre blog, et là-dessus on va retrouver des titres, des paragraphes, des liens, des listes, des images, bref, toute une série d'éléments que l'on rencontre habituellement dans nos documents Web. Autre chose à propos de ce site, je vais revenir sur la page d'accueil. Et je vais vous montrer que ce site est responsive. Ça veut dire qu'il peut s'adapter aux différentes largeurs d'écran. Si je réduis la largeur de l'écran, au bout d'un moment, le site va changer de mise en forme. J'ai le titre du site qui va changer. Regardez bien, voilà ici. Je change simplement ici la taille des caractères pour gagner un petit peu de place sur les écrans moins larges. Ensuite, si je continue, je vais avoir un deuxième changement. C'est ici, vous le voyez bien. Ce changement est un peu plus important. Tout d'abord, nous avons cette zone ici avec les informations de la photo qui est située tout à fait à droite sur les écrans les plus larges, qui est déplacée vers le centre sur les écrans moins larges. Il y a également le menu qui se trouve ici au dessus. Constatez au passage que nous avons également ici des effets de survol sur ces éléments du menu. Ce menu est supprimé pour les écrans les moins larges et remplacé par ce bouton. Cette mise en forme est particulièrement bien adaptée pour les écrans les moins larges de nos Smartphone. Ce que vous avez devant les yeux c'est le résultat de deux technologies différentes qui travaillent main dans la main. Il y a d'abord l'HTML qui met en place les différents éléments de cette page. Et puis il y a le CSS, c'est l'objet de notre formation, qui met en place toute la mise en forme, toute la mise en page de ces éléments. Je vais maintenant désactiver le CSS. Pour ça, dans mon navigateur, dans Firefox, j'utilise le menu Affichage. Je vais dans Style de page. Et je vais demander Aucun style. Donc je désactive complètement le CSS. Maintenant, il n'y a plus qu'une de ces deux technologies. Il n'y a plus que l'HTML. Et regardez, l'HTML sans le CSS, ce n'est pas très joli. Pourtant, c'est exactement la même page, avec exactement le même contenu. Si je vais sur mes galerie photo, j'ai mes galeries, Bretagne et Sacramento. Mais j'ai perdu toutes mes mises en forme, tous mes effets de survol, etc. Bref, l'expérience utilisateur que vous offrez à vos internautes, c'est toujours la conjonction de l'HTML et du CSS. L'objectif de notre formation, c'est de partir de ceci, ce que vous avez maintenant devant les yeux, pour arriver à la fin de la formation à créer ceci, c'est-à-dire la mise en forme de tous ces éléments de l'HTML. Allons-y, retroussons-nous les manches, on a beaucoup de choses à découvrir dans cette formation. Découvrons ensemble le langage CSS.

Table des matières