Suite à vos nombreuses demandes, voici une nouvelle série de cours consacrés à l’utilisation du CSS3.
Vous allez découvrir une grande partie des nouvelles possibilités CSS3 à travers plusieurs vidéos dédiées.
Apprenez la technique CSS3 pour effectuer la mise en forme de votre texte.
Par exemple, définissez vos textes en gras, italique, choisissez la couleur, la taille de la police et bien d’autres éléments.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
La technique pour mettre en forme rapidement votre texte avec CSS3
Bonjour et bienvenu sur Développement Facile.
Dans le cours précédent vous avez appris à mettre en forme votre texte avec les balises HTML 5, et là ce qui est beaucoup plus intéressant, vous allez pouvoir mettre en forme, directement un bloc de texte grâce à des balises CSS 3, vous allez justement, apprendre à utiliser ces balises. Il faut savoir qu’il est très important que votre code HTML et CSS soit lisible. Je vous conseille d’utiliser des feuilles de style, soit dans le code de la page HTML, mais quand vous aurez des longues feuilles de styles avec énormément d’indications graphiques, je vous conseille d’utiliser des fichiers CSS à part, des fichiers .css qui vont contenir la mise en forme à la fois de votre texte, de votre site internet, de votre page Web. Vous aurez, en gros, sur un des sites Internet imposant complexe, plusieurs fichiers CSS, un fichier CSS d’entête, un fichier CSS pour les catégories, pour le corps de la page, et ça va vous permettre de retrouver très facilement, très rapidement le code source concerné pour faire les mises en forme, les modifications nécessaires au niveau graphique CSS.
Texte en gras
Pour mettre un texte en gras, c’est vraiment très simple, il suffit d’utiliser la balise font-weight : bold, donc remarquez dans le code source l’utilisation de la balise style, on attribue à la balise HTML style font-weight : bold, tout le texte qui sera dans une balise span HTML span, sera écrit en gras, sur la première ligne format normal. C’est une autre façon de mettre le texte en gras, comme je vous le disais, l’avantage de mettre votre texte en gras de cette façon, c’est que dans votre balise span vous avez front-weight :bold, vous pouvez mettre le couleur du texte, la taille du texte, etc. et donc directement sur HTML 5, entre span ou d’autres textes ça va le mettre de la bonne couleur, à la bonne taille et en gras. C’est l’intérêt d’utiliser les balises CSS, justement.
Pareil pour le mettre en italique, c’est front-style :italic, même principe de fonctionnement, donc vous définissez une balise CSS txtItalique front-style :italic, on utilise span avec une classe txtItalique, HTML5 sera écrit en italique, et le texte sur la ligne, avec une écriture normale. Je vous ai montré une façon d’écrire, de modifier du texte directement tout ce qui est contenu dans la balise span, ou alors vous pouvez utiliser une classe CSS texte italique, c’est-à-dire quand vous utilisez des balises span seule, votre texte ne sera pas en italique, si vous spécifiez la classe txtItalique, votre texte sera en Italique, donc c’est le grand intérêt des classes CSS définies, ça vous permet de mettre la classe, vous pouvez mettre la classe txtItalique, sur une balise div, span, sur tous types de balises, p paragraphe que vous avez besoin.
La taille du texte
Pour définir la taille du texte, la balise front-size, avec une valeur en pixels ou en EM, ça vous permet de modifier la taille du texte, donc front-size :32px ça va modifier la balise div, identifiée par l’id title, là je vous ai montré en utilisant une classe, txtItalique, là, vous allez utiliser un identifiant, il n’y aura qu’une seule balise avec un identifiant title, donc un seul titre dans votre page HTML, qui aura une taille 32, c’est également très utilisé justement en même temps, je vous explique comment modifier toutes les balises d’un seul coup avec le CSS, utiliser les classes CSS, utiliser un identifiant CSS, donc là c’est #title, .txtItalic pour une classe, vous avez déjà de quoi faire.
La couleur du texte
Ensuite vous pouvez définir, bien évidemment, la couleur de votre texte. Donc vous pouvez mettre un code couleur HTML, code couleur en hexadécimale, en RGB, vous avez plusieurs choix, avec une écriture en abréviation, de votre code couleur. On reverra ça dans un prochain cours. Donc là pour mettre toutes les balises H1 en couleur, vous faites H1 dans votre feuille de style color, et à chaque fois que vous mettrez une balise H1 dans votre texte, dans votre page HTML, elle sera de la couleur que vous avez définie, bien évidemment vous pouvez cumuler, dans la balise H1, plusieurs indications CSS, comme front size, font weight, italic, etc.
Aligner du texte
Pour définir l’alignement du texte, très simplement vous allez utiliser la balise text-align :center.
Donc txtCenter, text-align : center, ça va centrer le texte de la balise div identifiée par un id txtCenter, remarquez le code source de la feuille de style, c’est #txtCenter, ça cible une balise qui contient l’id txtCenter, on met text-align = center, vous avez les valeurs left, right, justifie pour l’alignement de votre texte. Tout le texte qui est dans la balise div id texte center HTML 5 sur la première sera centré dans votre document HTLM.
Texte souligné
Vous pouvez effectuer la mise en forme pour du texte souligné avec la balise text-decoration :underline, rappelez-vous les liens dans les pages HTML ils sont souvent soulignés, vous pouvez faire la même chose pour des titres, des parties de textes que vous voulez mettre en valeur, avec texte-decoration :underline, donc là on utilise également un identifiant donc texte souligné on fait #txtSouligne dans la feuille de style, avec text-décoration : underline, et le div qui utilise identifiant txtSouligne HTML5 sur la première ligne sera souligné.
Votre plan d’actions !
Là vous avez de quoi vous utiliser la mise en forme CSS, donc avec les balises que je vous ai données pour mettre en forme votre texte. Retrouvez comme d’habitude, un exemple de code source sous cette vidéo, si vous avez des questions posez-les directement sous cette vidéo et 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 source CSS3 pour définir la mise en forme d’un texte.
Téléchargement du code source Exemple de mise en forme du texte
