C'est parti pour dcouvrir les bases des feuilles de style CSS3. Un cours vido consquent pourpartir sur de bonnes bases ;) Bien videmment, il y a normment d'autres cours prvus dansles jours et les semaines qui viennent !

jQLeadBrite("#leadplayer_video_element_5324B5CCED9A9").leadplayer(false, "eyJnYSI6dHJ1ZSwib3ZlcmxheSI6ZmFsc2UsInBvd2VyZWRfYnkiOmZhbHNlLCJwb3dlcmVkX2J5X2xpbmsiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC8iLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiUkVDRVZPSVIgISIsInR4dF9wbGF5IjoiTGVjdHVyZSIsInR4dF9lbWwiOiJSZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X25hbWUiOiJSZW5zZWlnbmV6IHZvdHJlIFByXHUwMGU5bm9tLi4uIiwidHh0X2ludmFsaWRfZW1sIjoiU1ZQLCByZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X2ludmFsaWRfbmFtZSI6IlNWUCwgcmVuc2VpZ25leiB2b3RyZSBQclx1MDBlOW5vbS4uLiIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMi4xIFVubGltaXRlZCIsImlkIjoiNTMyNEI1Q0NFRDlBOSIsIndpZHRoIjo5NDAsImhlaWdodCI6NTI5LCJ0aHVtYm5haWwiOiIiLCJ0aXRsZSI6Ik1haXRyaXNleiBsZXMgYmFzZXMgZGUgQ1NTMyAiLCJkZXNjcmlwdGlvbiI6Ik1haXRyaXNleiBsZXMgYmFzZXMgZGUgQ1NTMyAiLCJhdXRvcGxheSI6ZmFsc2UsInNob3dfdGltZWxpbmUiOnRydWUsImVuYWJsZV9oZCI6dHJ1ZSwib3B0IjpmYWxzZSwiY3RhIjp7InRpbWUiOiJlbmQiLCJidGV4dCI6IkRldmVuZXogUHJvZmVzc2lvbm5lbCBIVE1MNSBcLyBDU1MzIGV0IENyXHUwMGU5ZXogZGVzIEFwcGxpY2F0aW9ucyBJbmNyb3lhYmxlcyAhIiwidXJsIjoiaHR0cDpcL1wvd3d3LnByb2dyYW1tYXRpb24tZmFjaWxlLmNvbVwvaHRtbDVjc3MzIiwiYXV0b19mb2xsb3ciOmZhbHNlLCJuZXdfd2luZG93IjpmYWxzZX0sInltIjoiaXg3Q2c1QmZncDgifQ==");

Afficher le texte de la vidoMaitrisez les bases de CSS3 Bonjour tous et bienvenu sur Dveloppement Facile.Beaucoup d'entre vous me les ont demand, quand est-ce qu'arrive les cours sur CSS 3, nouson veut apprendre CSS 3, on connait JavaScript on voudrait ajouter des effets sympa, undesign sympa sur notre site Internet. Voici les nouveaux cours consacrs CSS 3. Donc bienvidemment il y a des nombreux dbutants parmi vous, des dbutants, des professionnels etdes experts, je vais commencer par les bases de CSS 3, et au fur et mesure des cours on vamonter crescendo dans le niveau. Ce cours est consacr aux bases CSS 3.Utilit des feuillesde style Il faut savoir que les feuilles de styles sont indispensables utiliser avec HTML 5.HTML 5 a permet de crer la structure de votre site web, avec un entte, un menu, desarticles, un pied de page et widgets sur le ct. Avec HTML 5 vous allez crer cette structure devotre page Internet et vous allez ajouter du CSS pour rendre tout a, avec un designmagnifique, que ce soit trs joli et agrable regarder par vos utilisateurs, avec des effets.Avec CSS vous pouvez faire des menus, des effets, des fondus d'images, on va voir tout aensemble et il est trs important pour organiser votre code de sparer le contenu de laprsentation. Vous avez votre contenu HTML et vous faites votre prsentation avec CSS, doncdans des fichiers CSS part, toujours. a va simplifier votre code, une maintenance de site

1 / 4

beaucoup plus facile, une meilleure accessibilit, je vous encourage toujours utiliser levalidateur en ligne du W3C pour le CSS, a va vous permettre de fournir des pagesrespectueuses des normes du W3C. Je vous ai mis le lien sur cette page, le lien sera endessous de la vido, bien videmment vous pourrez valider vos fichiers CSS, et vos fichiersHTML ainsi ils seront accessibles pour la majorit des navigateurs, donc des priphriques,ordinateurs, tablettes, Smartphones, ou tl, etc.Les slecteurs CSS Vous avez les slecteursde balises, donc div background color c'est--dire, chaque fois que dans votre code HTMLvous allez utiliser une balise div, il y aura une couleur de fond, h1, h2, h3 chaque fois quevous allez utiliser les balises h1, h2, h3 dans votre code HTML il y aura une couleur de fond,vous avez les slecteurs de classes, donc div classe gale nom de la classe, en CSS vousmettez .nom de la classe avec background color, donc votre code CSS, il faut savoir qu'unemme classe vous pouvez l'appeler plusieurs fois, dans plusieurs div diffrents, plusieurspages, plusieurs paragraphes, autant de fois que vous voulez, vous pouvez appeler votreclasse CSS, donc .nom classe dans votre balise div pages ou paragraphe, vous mettez l'attributclasse avec le nom de la classe que vous avez dfinie en CSS. Vous avez galement lesslecteurs d'identifiants, l c'est un dise au lieu que ce soit un .nom de classe, #le nom del'identifiant et vos proprits CSS, et dans div ou dans spam ou dans P vous utilisez un id, c'estun slecteur d'identifiant gal nom de l'identifiant. Rappelez-vous les classes CSS vous pouvezles appeler autant de fois que vous le souhaitez dans un document HTML. Par identifiant vouspouvez les appeler qu'une seule fois, bien videmment rien ne vous empche de le mettreplusieurs fois, mais votre code HTML ne sera pas valide W3C, donc l'identifiant c'est fait pourtre appel une seule fois dans votre document HTML. Comme a vous avez les diffrentsslecteurs en CSS qui vous seront trs utiles, vous allez vous en servir tout le temps de toutefaon.Les commentaires CSS Pour faire des commentaires en CSS, c'est vraiment trssimple, /* */. Donc je vous ai affich un exemple de commentaire CSS, faites attention lescommentaires CSS a parat dans le code source de votre page, les commentaires que vousmettez dans les fichiers CSS, ils sont lisibles par vos internautes, donc les commentairesHTML, les commentaires JavaScript, les commentaires CSS, ne mettez surtout pasd'informations de donnes sensibles dedans, mettez des informations par exemple, dans unfichier CSS vous mettez dfinir la couleur des boutons, tout simplement, dfinis la taille desboutons de de tel ou tel formulaire.Les units de mesure CSS Voil ensuite vous avez lesunits de mesure en CSS, vous pouvez dfinir des pourcentages dans vos feuilles de styles,par exemple pour la taille de la police, des largeur, les largeurs hauteurs, width, height, on lesdfinit souvent en pourcentage de la page, a permet que quel que soit la taille de l'cran del'utilisateur, sur un Smartphone, une tablette, ou un cran d'ordinateur, si on met 50 de l'cran,em c'est une unit relative qui se base sur la taille de la police par dfaut de la page, et vousavez l'unit dfinie en pixels. Moi j'utilise et ce que je vous conseille d'utiliser c'est d'utiliser despixels et les pourcentages.Les couleurs CSS Les diffrentes couleurs en CSS, vous pouvezdfinir des couleurs en hexadcimale, donc a utilise les trois composantes rouge, vert et bleu,donc une couleur hexadcimale, vous pouvez dfinir des couleurs en hexadcimal abrge parexemple, DC2 de a correspond DD CC 22, il faut savoir que certaines couleurs ne peuventpas tre abrges, mais le but c'est d'abrger vos couleurs hexadcimales quand vous lepouvez, que plus votre fichier CSS est petit en taille, plus votre site Internet va s'afficherrapidement sur l'ordinateur de votre visiteur. Vous pouvez dfinir des couleurs en dcimales parexemple, avec les couleur RGB ou RVB, c'est encod par un nombre entier compris entre 0 et255, c'est pas trs utilis mais vous pouvez le faire, a ne pose aucun problme, vous pouvez

2 / 4

utiliser galement des pourcentages pour dfinir votre couleur RGB, donc zro absence de lacomposante 100 %, elle est son maximum, c'est toujours les couleurs rouges, verts, et bleuque vous dfinissez, c'est un mlange des trois couleurs primaires et vous pouvez galementdfinir des couleurs CSS grce des mots-cls en anglais, a reprsente les couleurs basiquescomme vert pour green, yelow pour jaune, blue pour bleu, orange pour orange, white pourblanc, black pour noir, red pour rouge, etc. Vous avez un pannel de possibilit pour dfinir lescouleurs dans vos fichiers CSS, aprs, libre vous de choisir ce que vous prfrez utiliser, lebut c'est que a vous soit parlant.CSS intgr une balise HTML 5 Vous pouvez carrmentintgrer du CSS dans des balises HTML 5, pour tre beaucoup plus rapide, des fois pour despages trs simples, vous n'avez pas besoin de crer une feuille de style .CSS, pas besoin sic'est juste pour mettre une seule ligne sur une balise, vous n'avez pas besoin de mettre le styleCSS dans le document, vous pouvez l'intgrer directement sur une balise, regardez je vous aimis deux exemple, h1 style color :green, a va afficher le titre de l'article en vert, ou font h1style font size bold, a veut dire de litre de l'article 1 sera mis en gras mais uniquement pourcette balise h1, pour l'autre balise h1 en dessous il n'y a pas de style dfinit, titre de l'article vas'afficher de la taille h1 mais en normal, alors que titre de l'article 1 avec le CSS style font stylebold, il va s'afficher en taille 1 mais en gras.CSS dans la page HTML 5 Vous pouvez dfinir,bien videmment, du CSS dans une page HTML, donc comme je vous l'ai dit, vous utilisez lesbalises style, et dans la balise style, vous mettez h1 font size bold, et l a veut dire, dansl'exemple prcdent il y avait juste titre de l'article 1 qui tait en gras, et titre de l'article 2 taitcrit en normal, bien l en utilisant un style CSS directement dans le document HTML 5, chaque fois vous avez une balise H1, elle sera affiche en gras, donc titre de l'article 1 seraaffich en gras, titre de l'article 2 sera en gras, parce qu'il y a le code style h1 font sizebold.CSS dans un fichier .css Vous pouvez dfinir vos proprits 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 ct vous aurez vos fichiers CSS, d'un autre ctvos fichiers HTML et dans un autre ct vos fichiers JavaScript.js, donc je vous conseilled'utiliser un seul, ou plusieurs fichiers CSS, pour les intgrer dans votre document HTML, ilsuffit d'utiliser la balise link rel stylesheet type text css, et href c'est le lien vers votre fichierCSS, donc le lien, les fichiers CSS ils sont hebergs 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 textcss avec style header.css, et vous avez un fichier qui s'appelle style header.css avec h1 fontsize bold, ce qui veut dire que titre de l'article 1 sera en gras, titre de l'article 2 sera en gras, cesdeux types h1 qui seront en taille de police h1 et crit en gras parce qu'il y a la balise link avechref type header.css, qui contient h1 font size bold.Les CSS imports Vous pouvez galementutiliser les CSS imports, la balise import vous pouvez la mettre dans un fichier CSS, dans unfichier HTML 5, a va automatiquement charger un autre fichier CSS, dans les gros sitesInternet complexes, si vous mettez tous dans le mme fichier CSS il va tre norme et vousn'allez plus vous y retrouver dans votre code. Alors que avec import URL style header.css, dansun fichier CSS, vous allez pouvoir crer plusieurs fichiers CSS pour votre entte page, pourvotre pied de page, pour le contenu de vos articles, pour votre menu, et vous allez ensuite fairedes import URL style header.css, ou vous pouvez utiliser la balise link avec href style.css, ac'est selon votre choix, comment vous souhaitez optimiser votre site Internet. Donc l on atoujours nos deux titres d'articles un et deux avec les balises h1, on style type CSS on fait unimport de l'URL style header.css, vous renseignez l'URL sur votre nom de domaine, sur unautre nom de domaine, et bien videmment vous avez le fichier style header.css avec font style

3 / 4

bold pour afficher votre titre de l'article 1, titre de l'article 2 en gras avec la taille h1.Lespriorits CSS Il y a des priorits dans les fichiers CSS, lorsqu'il y a plusieurs lments de style,de feuilles de style qui viennent de plusieurs CSS, il y a des priorits. Je vous ai affich parordre croissant de priorit, de la plus basse la haute, donc il y a les proprits du navigateur,les feuilles de style externes, les feuilles de styles internes et les feuilles de styles en ligne. Lapriorit 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 carrment possible depasser compltement outre toutes ces proprits, priorit pardon, en utilisant la valeurimportant, vous avez dans votre document HTML 5, h1 font style bold ! important, a veut direque h1 peut tre dfini dans une feuille de style en ligne, interne ou externe, avec la baliseimportant, h1 sera forcment crit en gras car la priorit est maximum sur ! important.Votreplan d'actions ! Maintenant vous pouvez continuer utiliser la mise en forme CSS dans vosdocuments HTML 5, retrouvez un exemple de code source directement sous ce cours vido, sivous avez des questions, posez-les galement sous ce cours vido et moi je vous dis trsbientt sur Dveloppement Facile.

Tlchargez le code source CSS3Voici un exemple de code CSS3 avec les nouvelles balises.

Downloads

Exemple avec les balises CSS3

Code source utilisant les nouvelles balises CSS3.

Et voici le site pour valider vos feuilles de style CSS3 :jigsaw.w3.org/css-validator

Choisissez les prochains cours CSS3Profitez-en, dites-moi, dans les commentaires, les cours CSS3 dont vous avez besoin.Maitrisezles bases de CSS3

Powered by TCPDF (www.tcpdf.org)

4 / 4