Tutoriel CSS3
Tutoriel CSS
Le but de ce premier chapitre est de vous convaincre rapidement de l’importance et de la place particulière du HTML et du CSS parmi l’ensemble des langages informatiques.
Nous allons également nous intéresser à la question « pourquoi apprendre à coder » et passer en revue les alternatives existantes à l’apprentissage de la programmation en soulignant les points forts et faibles de chacune d’entre elles.
HTML et CSS : deux langages incontournables
Il existe aujourd’hui des dizaines et des dizaines de langages informatiques et de programmation différents : HTML, CSS, JavaScript, PHP, Python, Ruby on Rails, C, C#, C++, Java, etc. pour ne citer qu’eux.
Certains de ces langages ont des possibilités et des rôles similaires, ce qui signifie qu’ils vont être (dans une certaine mesure) interchangeables : on va pouvoir utiliser un langage ou l’autre pour effectuer une même opération selon notre sensibilité personnelle ou selon l’environnement dans lequel on se trouve.
D’autres langages, en revanche, vont être beaucoup plus exclusifs ou ne pas avoir de concurrent et on va donc obligatoirement devoir passer par eux pour effectuer certaines opérations. Cela va être le cas du HTML et du CSS.
En effet, le HTML et le CSS sont deux véritables standards en informatique qui n’ont à l’heure actuelle aucun concurrent comme cela va pouvoir être le cas pour le langage PHP par exemple (pour lequel il existe des alternatives comme Ruby on Rails ou Python entre autres).
De plus, les langages HTML et CSS vont se trouver à la base de tout projet web car ils ont un rôle qui les rend incontournables : les navigateurs (Google Chrome, Safari, etc.) sont des programmes qui ont été construits pour pouvoir lire du code HTML au départ et qui ne peuvent aujourd’hui lire que du code HTML, CSS et JavaScript et nous allons donc nous appuyer sur ces langages (et sur le HTML en particulier) pour pouvoir afficher nos pages.
En bref : quel que soit votre projet web (blog, site e-commerce, application mobile, etc.), vous devrez forcément utiliser du HTML et du CSS.
Pour être un peu plus précis et pour anticiper un peu sur la suite de ce cours, le HTML est un langage de structure : il permet d’indiquer au navigateur que tel contenu est un titre, que tel autre est un simple texte, que cet objet est une image, que celui-ci est une liste, etc. Le navigateur, qui « comprend » le HTML, va se baser sur ces indications pour afficher les contenus.
Quelles alternatives à l’apprentissage des langages informatiques ?
De nombreuses personnes veulent lancer leur site internet sans forcément apprendre à coder. Est-ce une bonne idée ? Quels sont les risques ? Quelles alternatives existent pour créer un site web sans avoir à le coder ? Quels sont leurs points forts et points faibles ?
Il existe selon moi trois alternatives à l’apprentissage de la programmation qu’on va pouvoir considérer lorsqu’on a un projet web mais qu’on ne veut pas forcément devenir développeur :
- Le recours à un développeur / une agence externe ;
- L’utilisation d’un CMS ;
- L’utilisation d’un éditeur WYSIWIG.
Apprendre à coder, ce n’est pas que pour les développeurs !
Je pense vous avoir démontré l’intérêt de maitriser au moins les bases du développement dans la partie précédente si vous avez un projet lié au web : économie d’argent, plus d’efficacité, création d’un site conforme à vos attentes, etc.
En effet, apprendre à coder ou tout au moins connaitre les bases en développement c’est avant tout mettre un pied dans le monde des développeurs pour pouvoir les comprendre et pouvoir vous faire comprendre.
De plus, connaitre le rôle des différents langages et comprendre comment fonctionne votre site permet de pouvoir le gérer de manière beaucoup plus efficace. En effet, je suis et reste persuadé qu’on ne peut pas travailler sereinement lorsqu’on ne comprend pas son outil de travail ou la structure dans laquelle on travaille.
C’est évident et pourtant la plupart des gens essayent de se persuader et de persuader les autres du contraire. Pourquoi ? Car tout le monde utilise internet aujourd’hui et la majorité des gens ne veulent pas faire l’effort de comprendre comment tout cela fonctionne.
Ce n’est pas un problème lorsque vous êtes un simple utilisateur, mais ça le devient lorsque vous devez gérer un site internet ou même lorsque vous travaillez dans un domaine lié au digital.
Deviendriez-vous plombier sur un coup de tête ? Non, car vous n’y connaissez rien en plomberie. C’est exactement pareil sur le web.
L’immense majorité des échecs liés au web proviennent du fait que des personnes se lancent dans l’aventure sans la moindre connaissance de leur environnement.
N’oubliez pas qu’il est essentiel pour qu’un commerce fonctionne -et aujourd’hui plus que jamais- d’avoir une compréhension de son propre business, de son architecture et de son infrastructure.
Si vous faîtes l’effort d’acquérir ces connaissances, je vous garantis que vous avez d’ores-et-déjà battu 99% de vos concurrents.
Convaincu de l’utilité d’apprendre à coder ? Dans ce cas, passons à la suite ! Car je suis certain que vous êtes impatients de découvrir ce que signifient les initiales « HTML » et « CSS » !
Vous souhaitez devenir dévelopeur web ? Vous voulez être capable de créer un site Internet ? Mais vous êtes un total débutant dans ce domaine ? Alors bonne nouvelle! Ce cours est fait pour vous..
D’abord on va apprendre les bases du développement web, c’est-à-dire HTML et CSS. Mais la partie HTML vous pouvez la retrouver juste ici
C’est quoi CSS ?
C’est un langage qui va décorer notre HTML. Il est responsable des couleurs, des tailles, de la mise en page, etc… Dans ce cours vous allez construire un site Web depuis 0 avec uniquement de l’HTML et du CSS.Vous allez taper vos premières lignes de code ! Je vous assisterai et vous expliquerai en détails chacune des étapes. Allez ! On passe à l’action !
CSS est la technologie de présentation utilisée dans la conception de sites Web.
CSS signifie feuilles de style en cascade (Cascading Style Sheets). CSS est un langage de feuille de style standard utilisé pour décrire la présentation (c'est-à-dire la mise en page et le formatage) des pages Web.
Avant CSS, presque tous les attributs de présentation des documents HTML étaient contenus dans le balisage HTML (en particulier dans les balises HTML) ; toutes les couleurs de police, les styles d'arrière-plan, les alignements d'éléments, les bordures et les tailles devaient être explicitement décrits dans le code HTML.
En conséquence, le développement des grands sites Web est devenu un processus long et coûteux, car les informations de style ont été ajoutées à plusieurs reprises à chaque page du site Web.
Pour résoudre ce problème, CSS a été introduit en 1996 par le World Wide Web Consortium (W3C), qui maintient également sa norme. CSS a été conçu pour permettre la séparation de la présentation et du contenu. Désormais, les concepteurs Web peuvent déplacer les informations de formatage des pages Web vers une feuille de style distincte, ce qui se traduit par un balisage HTML considérablement plus simple et une meilleure maintenabilité.
CSS3 est la dernière version de la spécification CSS. CSS3 ajoute plusieurs nouvelles fonctionnalités de style et améliorations pour améliorer les capacités de présentation Web.
Ce tutoriel CSS vous aidera à apprendre les bases du dernier langage CSS3, des sujets de base aux sujets avancés étape par étape. Si vous êtes débutant, commencez par la section de base et avancez progressivement en apprenant un peu chaque jour.
Ce que vous pouvez faire avec CSS
Il y a beaucoup plus de choses que vous pouvez faire avec CSS.
- Vous pouvez facilement appliquer les mêmes règles de style sur plusieurs éléments.
- Vous pouvez contrôler la présentation de plusieurs pages d'un site Web avec une seule feuille de style.
- Vous pouvez présenter la même page différemment sur différents appareils.
- Vous pouvez styliser des états dynamiques d'éléments tels que le survol, le focus, etc., ce qui n'est pas possible autrement.
- Vous pouvez modifier la position d'un élément sur une page Web sans modifier le balisage.
- Vous pouvez modifier l'affichage des éléments HTML existants.
- Vous pouvez transformer des éléments tels que l'échelle, la rotation, l'inclinaison, etc. dans un espace 2D ou 3D.
- Vous pouvez créer des animations et des effets de transition sans utiliser de JavaScript.
- Vous pouvez créer une version imprimable de vos pages Web.
La liste ne s'arrête pas là, il y a beaucoup d'autres choses intéressantes que vous pouvez faire avec CSS. Vous en apprendrez plus sur chacun d'eux en détail dans les prochains chapitres.
Avantages de l'utilisation de CSS
Le plus grand avantage du CSS est qu'il permet de séparer le style et la mise en page du contenu du document. Voici quelques avantages supplémentaires, pourquoi commencer à utiliser CSS ?
- CSS économise beaucoup de temps - CSS offre une grande flexibilité pour définir les propriétés de style d'un élément. Vous pouvez écrire du CSS une fois ; puis le même code peut être appliqué aux groupes d'éléments HTML, et peut également être réutilisé dans plusieurs pages HTML.
- Maintenance facile - CSS fournit un moyen simple de mettre à jour le formatage des documents et de maintenir la cohérence entre plusieurs documents. Parce que le contenu de l'ensemble des pages Web peut être facilement contrôlé à l'aide d'une ou plusieurs feuilles de style.
- Les pages se chargent plus rapidement — CSS permet à plusieurs pages de partager les informations de formatage, ce qui réduit la complexité et la répétition du contenu structurel des documents. Il réduit considérablement la taille du transfert de fichiers, ce qui se traduit par un chargement de page plus rapide.
- Styles supérieurs à HTML - CSS a des capacités de présentation beaucoup plus larges que HTML et offre un bien meilleur contrôle sur la mise en page de vos pages Web. Ainsi, vous pouvez donner une bien meilleure apparence à vos pages Web par rapport aux éléments et attributs de présentation HTML.
- Compatibilité de plusieurs appareils - CSS permet également d'optimiser les pages Web pour plus d'un type d'appareil ou de média. En utilisant CSS, le même document HTML peut être présenté dans différents styles d'affichage pour différents appareils de rendu tels que les ordinateurs de bureau, les téléphones portables, etc.
La plupart des attributs HTML sont désormais obsolètes et leur utilisation n'est pas recommandée. C'est donc une bonne idée d'utiliser autant de CSS que possible pour augmenter l'adaptabilité de votre site Web et le rendre également compatible avec les futurs navigateurs.
Ce que couvre ce tutoriel
Cette série de didacticiels CSS couvre tous les principes fondamentaux de CSS, y compris l'idée des sélecteurs, les méthodes de définition des couleurs et des arrière-plans, la manière de formater les polices et le texte, le style des éléments de l'interface utilisateur tels que les hyperliens, les listes, les tableaux, etc. ainsi que le concept de Modèle de boîte CSS, etc.
Une fois que vous êtes à l'aise avec les bases, vous passerez au niveau suivant qui explique la manière de définir la dimension et l'alignement des éléments, les méthodes de positionnement des éléments sur une page Web, l'utilisation de sprites d'image, ainsi que le concept de relative et unités absolues, modèle de formatage visuel, affichage et visibilité, calques, pseudo-classes et éléments, feuilles de style dépendantes du support, etc.
Enfin, vous explorerez certaines fonctionnalités avancées introduites dans CSS3 telles que les dégradés de couleurs, l'effet d'ombre portée, les transformations 2D et 3D, la transparence alpha, ainsi que la méthode de création d'effets de transition et d'animation, les mises en page flexibles, l'effet de filtre, le concept de média requêtes, et plus encore.
Chaque chapitre de ce didacticiel contient de nombreux exemples concrets que vous pouvez essayer et tester. Ces exemples vous aideront à mieux comprendre le concept ou le sujet. Il contient également des solutions de contournement intelligentes ainsi que des conseils utiles et des notes importantes.