C’est parti pour découvrir les bases des feuilles de style CSS3.
Un cours vidéo conséquent pour partir sur de bonnes bases 😉
Bien évidemment, il y a énormément d’autres cours prévus dans les jours et les semaines qui viennent !
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Maitrisez les bases de CSS3
Bonjour à tous et bienvenu sur Développement Facile.
Beaucoup d’entre vous me les ont demandé, quand est-ce qu’arrive les cours sur CSS 3, nous on veut apprendre CSS 3, on connait JavaScript on voudrait ajouter des effets sympa, un design sympa sur notre site Internet. Voici les nouveaux cours consacrés à CSS 3. Donc bien évidemment il y a des nombreux débutants parmi vous, des débutants, des professionnels et des experts, je vais commencer par les bases de CSS 3, et au fur et à mesure des cours on va monter crescendo dans le niveau. Ce cours est consacré aux bases CSS 3.
Utilité des feuilles de style
Il faut savoir que les feuilles de styles sont indispensables à utiliser avec HTML 5. HTML 5 ça permet de créer la structure de votre site web, avec un entête, un menu, des articles, un pied de page et widgets sur le côté. Avec HTML 5 vous allez créer cette structure de votre page Internet et vous allez ajouter du CSS pour rendre tout ça, avec un design magnifique, que ce soit très joli et agréable à regarder par vos utilisateurs, avec des effets. Avec CSS vous pouvez faire des menus, des effets, des fondus d’images, on va voir tout ça ensemble et il est très important pour organiser votre code de séparer le contenu de la présentation. Vous avez votre contenu HTML et vous faites votre présentation avec CSS, donc dans des fichiers CSS à part, toujours. Ça va simplifier votre code, une maintenance de site beaucoup plus facile, une meilleure accessibilité, je vous encourage à toujours utiliser le validateur en ligne du W3C pour le CSS, ça va vous permettre de fournir des pages respectueuses des normes du W3C. Je vous ai mis le lien sur cette page, le lien sera en dessous de la vidéo, bien évidemment vous pourrez valider vos fichiers CSS, et vos fichiers HTML ainsi ils seront accessibles pour la majorité des navigateurs, donc des périphériques, ordinateurs, tablettes, Smartphones, ou télé, etc.
Vous avez les sélecteurs de balises, donc div background color c’est-à-dire, à chaque fois que dans votre code HTML vous allez utiliser une balise div, il y aura une couleur de fond, h1, h2, h3 à chaque fois que vous allez utiliser les balises h1, h2, h3 dans votre code HTML il y aura une couleur de fond, vous avez les sélecteurs de classes, donc div classe égale nom de la classe, en CSS vous mettez .nom de la classe avec background color, donc votre code CSS, il faut savoir qu’une même classe vous pouvez l’appeler plusieurs fois, dans plusieurs div différents, plusieurs pages, plusieurs paragraphes, autant de fois que vous voulez, vous pouvez appeler votre classe CSS, donc .nom classe dans votre balise div pages ou paragraphe, vous mettez l’attribut classe avec le nom de la classe que vous avez définie en CSS. Vous avez également les sélecteurs d’identifiants, là c’est un dièse au lieu que ce soit un .nom de classe, #le nom de l’identifiant et vos propriétés CSS, et dans div ou dans spam ou dans P vous utilisez un id, c’est un sélecteur d’identifiant égal nom de l’identifiant. Rappelez-vous les classes CSS vous pouvez les appeler autant de fois que vous le souhaitez dans un document HTML. Par identifiant vous pouvez les appeler qu’une seule fois, bien évidemment rien ne vous empêche de le mettre plusieurs fois, mais votre code HTML ne sera pas valide W3C, donc l’identifiant c’est fait pour être appelé une seule fois dans votre document HTML. Comme ça vous avez les différents sélecteurs en CSS qui vous seront très utiles, vous allez vous en servir tout le temps de toute façon.
Les commentaires CSS
Pour faire des commentaires en CSS, c’est vraiment très simple, /* */. Donc je vous ai affiché un exemple de commentaire CSS, faites attention les commentaires CSS ça paraît dans le code source de votre page, les commentaires que vous mettez dans les fichiers CSS, ils sont lisibles par vos internautes, donc les commentaires HTML, les commentaires JavaScript, les commentaires CSS, ne mettez surtout pas d’informations de données sensibles dedans, mettez des informations par exemple, dans un fichier CSS vous mettez définir la couleur des boutons, tout simplement, définis la taille des boutons de de tel ou tel formulaire.
Les unités de mesure CSS
Voilà ensuite vous avez les unités de mesure en CSS, vous pouvez définir des pourcentages dans vos feuilles de styles, par exemple pour la taille de la police, des largeur, les largeurs hauteurs, width, height, on les définit souvent en pourcentage de la page, ça permet que quel que soit la taille de l’écran de l’utilisateur, sur un Smartphone, une tablette, ou un écran d’ordinateur, si on met 50 % ça affichera la largeur sur 50 % de l’écran, em c’est une unité relative qui se base sur la taille de la police par défaut de la page, et vous avez l’unité définie en pixels. Moi j’utilise et ce que je vous conseille d’utiliser c’est d’utiliser des pixels et les pourcentages.
Les couleurs CSS
Les différentes couleurs en CSS, vous pouvez définir des couleurs en hexadécimale, donc ça utilise les trois composantes rouge, vert et bleu, donc une couleur hexadécimale, vous pouvez définir des couleurs en hexadécimal abrégée par exemple, DC2 de ça correspond à DD CC 22, il faut savoir que certaines couleurs ne peuvent pas être abrégées, mais le but c’est d’abréger vos couleurs hexadécimales quand vous le pouvez, que plus votre fichier CSS est petit en taille, plus votre site Internet va s’afficher rapidement sur l’ordinateur de votre visiteur. Vous pouvez définir des couleurs en décimales par exemple, avec les couleur RGB ou RVB, c’est encodé par un nombre entier compris entre 0 et 255, c’est pas très utilisé mais vous pouvez le faire, ça ne pose aucun problème, vous pouvez utiliser également des pourcentages pour définir votre couleur RGB, donc zéro absence de la composante 100 %, elle est à son maximum, c’est toujours les couleurs rouges, verts, et bleu que vous définissez, c’est un mélange des trois couleurs primaires et vous pouvez également définir des couleurs CSS grâce à des mots-clés en anglais, ça représente les couleurs basiques comme vert pour green, yelow pour jaune, blue pour bleu, orange pour orange, white pour blanc, black pour noir, red pour rouge, etc. Vous avez un pannel de possibilité pour définir les couleurs dans vos fichiers CSS, après, libre à vous de choisir ce que vous préférez utiliser, le but c’est que ça vous soit parlant.
CSS intégré à une balise HTML 5
Vous pouvez carrément intégrer du CSS dans des balises HTML 5, pour être beaucoup plus rapide, des fois pour des pages très simples, vous n’avez pas besoin de créer une feuille de style .CSS, pas besoin si c’est juste pour mettre une seule ligne sur une balise, vous n’avez pas besoin de mettre le style CSS dans le document, vous pouvez l’intégrer directement sur une balise, regardez je vous ai mis deux exemple, h1 style color :green, ça va afficher le titre de l’article en vert, ou font h1 style font size bold, ça veut dire de litre de l’article 1 sera mis en gras mais uniquement pour cette balise h1, pour l’autre balise h1 en dessous il n’y a pas de style définit, titre de l’article va s’afficher de la taille h1 mais en normal, alors que titre de l’article 1 avec le CSS style font style bold, il va s’afficher en taille 1 mais en gras.
CSS dans la page HTML 5
Vous pouvez définir, bien évidemment, du CSS dans une page HTML, donc comme je vous l’ai dit, vous utilisez les balises style, et dans la balise style, vous mettez h1 font size bold, et là ça veut dire, dans l’exemple précédent il y avait juste titre de l’article 1 qui était en gras, et titre de l’article 2 était écrit en normal, bien là en utilisant un style CSS directement dans le document HTML 5, à chaque fois vous avez une balise H1, elle sera affichée en gras, donc titre de l’article 1 sera affiché en gras, titre de l’article 2 sera en gras, parce qu’il y a le code style h1 font size bold.
CSS dans un fichier .css
Vous pouvez définir vos propriétés CSS dans un fichier CSS, c’est ce que je vous conseille le plus, parce que ça va rendre code beaucoup plus lisible, beaucoup plus maintenable, parce que d’un côté vous aurez vos fichiers CSS, d’un autre côté vos fichiers HTML et dans un autre côté vos fichiers JavaScript.js, donc je vous conseille d’utiliser un seul, ou plusieurs fichiers CSS, pour les intégrer dans votre document HTML, il suffit d’utiliser la balise link rel stylesheet type text css, et href c’est le lien vers votre fichier CSS, donc le lien, les fichiers CSS ils sont hebergés sur votre site, ou sur un autre site internet, vous renseignez l’URL style.css.
Un exemple, vous avez la balise link rel stylesheet type text css avec style header.css, et vous avez un fichier qui s’appelle style header.css avec h1 font size bold, ce qui veut dire que titre de l’article 1 sera en gras, titre de l’article 2 sera en gras, ces deux types h1 qui seront en taille de police h1 et écrit en gras parce qu’il y a la balise link avec href type header.css, qui contient h1 font size bold.
Les CSS importés
Vous pouvez également utiliser les CSS importés, la balise import vous pouvez la mettre dans un fichier CSS, dans un fichier HTML 5, ça va automatiquement charger un autre fichier CSS, dans les gros sites Internet complexes, si vous mettez tous dans le même fichier CSS il va être énorme et vous n’allez plus vous y retrouver dans votre code. Alors que avec import URL style header.css, dans un fichier CSS, vous allez pouvoir créer plusieurs fichiers CSS pour votre entête page, pour votre pied de page, pour le contenu de vos articles, pour votre menu, et vous allez ensuite faire des import URL style header.css, ou vous pouvez utiliser la balise link avec href style.css, ça c’est selon votre choix, comment vous souhaitez optimiser votre site Internet.
Donc là on a toujours nos deux titres d’articles un et deux avec les balises h1, on à style type CSS on fait un import de l’URL style header.css, vous renseignez l’URL sur votre nom de domaine, sur un autre nom de domaine, et bien évidemment vous avez le fichier style header.css avec font style bold pour afficher votre titre de l’article 1, titre de l’article 2 en gras avec la taille h1.
Les priorités CSS
Il y a des priorités dans les fichiers CSS, lorsqu’il y a plusieurs éléments de style, de feuilles de style qui viennent de plusieurs CSS, il y a des priorités. Je vous ai affiché par ordre croissant de priorité, de la plus basse à la haute, donc il y a les propriétés du navigateur, les feuilles de style externes, les feuilles de styles internes et les feuilles de styles en ligne.
La priorité la plus haute c’est les feuilles de styles en ligne, ce que je vous conseille justement, d’utiliser. Et vous avez une balise ! Important, ça veut dire qu’il est carrément possible de passer complètement outre toutes ces propriétés, priorité pardon, en utilisant la valeur important, vous avez dans votre document HTML 5, h1 font style bold ! important, ça veut dire que h1 peut être défini dans une feuille de style en ligne, interne ou externe, avec la balise important, h1 sera forcément écrit en gras car la priorité est maximum sur ! important.
Votre plan d’actions !
Maintenant vous pouvez continuer à utiliser la mise en forme CSS dans vos documents HTML 5, retrouvez un exemple de code source directement sous ce cours vidéo, si vous avez des questions, posez-les également sous ce cours vidéo et moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez le code source CSS3
Voici un exemple de code CSS3 avec les nouvelles balises.
Téléchargement du code source Exemple avec les balises CSS3
