Pour une mise en forme de texte, vous utilisez dans vos pages web, des balises HTML simples, comme <p> pour les paragraphes, <span> pour modifier une portion de texte dans un paragraphe, ou <li> pour des listes à puce, ou <a> pour des liens, ou encore <h1> <h2> pour vos titres et sous titres.
Pour intervenir sur ces balises, vous utiliserez les classes, qui sont expliquées sur cette page, à droite. Ces classes vous améneront à découvrir des commandes CSS diverses, permettant la réalisation de jolis effets sur vos textes, en voici quelques-unes :
color:red ou avec le code couleur color:#ff0000
font-family: Arial, Helvetica, sans-serif pour une écriture standard comme cette page, en Arial, sans empattement.
Pour un style "traitement de texte", en Time-New-Roman font-family:"Times New Roman", Times, serif, avec empattement.
font-size:14px ... d'autres unités existent comme le point (pt)... Mais px c'est bien, car si vous zoomez, votre texte restera proportionnel au cadre qui le contient. La taille normale est 13px ou 14px.
font-weight:bold ou sans gras (valeur par défaut) font-weight:normal
font-style:italic
letter-spacing:3px
margin:10px des marges sont appliquées sur le haut, le bas et les côtés
Pour une marge en haut margin-top:15px
Pour une marge en bas margin-bottom:25px
Pour une marge à gauche margin-left:5px
Pour une marge à droite margin-right:8px
Contenu de ma feuille de style (styles.css) :
p {margin:0px;text-align:left;font-size:13px}
h1 {margin:0px;font-size:20px}
h2 {margin-bottom:4px;margin-top:17px;font-size:15px;font-weight:bold}
a:link,a:visited,a:active {color:#000;text-decoration:underline}
a:hover {color:#98047c;text-decoration:none}
Reste donc à utiliser ces quelques styles, qui de haut en bas, vont influencer, les balises <p>, la balise <h1> et <h2> et une balise <a> qui me servira à mettre un lien en direction d'une future page 2.
Contenu de ma feuille index.html :
<html>
<head>
<link href="feuille_de_style.css" rel="stylesheet" type="text/css" media="all" /> Pour me connecter à la feuille de style
</head>
<body>
<h1>Les fables du XVIIème siècle</h1>
<p>Je vais vous réciter une fable</p>
<h2>Le corbeau est le renard</h2>
<p>Maître Corbeau, sur un arbre perché,</p>
<p>Tenait en son bec un fromage.</p>
<p>Maître Renard, par l'odeur alléché,</p>
<p>Lui tint à peu près ce langage :</p>
<p>"Hé ! bonjour, Monsieur du Corbeau.</p>
<p>Que vous êtes joli ! que vous me semblez beau</p>
<p style="margin-top:15px;text-align:right;font-weight:bold">Jean de la Fontaine</p> J'intègre un peu de CSS directement dans la balise <p> pour sauter une ligne de 15 pixels, pour aligner le nom de l'auteur à droite de ma page et pour le mettre en gras
<a href="sommaire.html">Allez à la page 2</a> Je termine ma page, en plaçant un lien vers ma future page 2 qui sera un fichier portant le nom sommaire.html. Quand la souris passera sur le lien, celui-ci changera de couleur, c'est le CSS qui le dit !
</body>
</html>
Voilà mon joli site internet est fini ! J'utilise une feuille de style, j'intégre du CSS dans ma page html, je sais mettre mon texte en forme... je suis devenu webmaster !
Bien que répandu de nos jours dans la sphère d'internet, le CSS peut encore chez certains n'être qu'une notion un peu floue. Sous ce sigle se cachent les mots anglais Cascading Style Sheets, littéralement Feuilles de Style en Cascade.
Ces feuilles de style sont utilisées pour la création de sites internet. Si c'est votre cas, si vous souhaitez créer votre propre site, les CSS vous seront très utiles, notamment pour créer un site conforme aux standards édictés par le W3C. Elles vous permettront d'agir sur la présentation de vos pages web et de simplifier votre code source, vous permettant également d'apporter une accélération du temps de chargement de vos pages.
Il s'agit en fait d'une page web, portant l'extension .css, qui sera utilisée à côté de la page web que vous êtes en train de créée. Cette page CSS contiendra tous les styles, les lignes de "programmation" contenant des informations de mise en forme, qui seront utilisées par votre page en cours de création. Cette dernière sera "reliée" à la feuille de style par une ligne de code qui ressemblera à :
<link href="feuille_de_style.css" rel="stylesheet" type="text/css" media="all" />
Ce code html qui appelle votre feuille de style, doit être placé entre les balises <head> et </head> de votre page web. Dans cet exemple, nous créons un lien en direction de la feuille de style qui s'appelle : feuille_de_style.css c'est-à-dire un fichier qui porte ce nom-là et qui se trouve dans le même dossier que votre page en cours de création, qui s'appelle par exemple : ma_page_d_accueil.html
A ce stade, nous avons donc deux pages web. Tout ce qui sera écrit dans votre feuille de style, sera automatiquement lu par votre page web. Vous auriez pu, écrire directement les informations de la feuille de style, dans votre page principale entre les balises <style></style> dans l'entête de votre page, mais pour ne pas l'alourdir et pour un affichage rapide de vos pages web, mieux vaut prendre cette habitude de créer deux pages distinctes.
En lisant ces lignes, vous avez déjà rencontré les effets du CSS. La couleur bleue du code ci-dessus, est une mise en couleur, rendue possible grâce à une ligne de CSS... J'aurais pu utiliser de l'html pour produire cette couleur bleue, avec les balises <font color="blue"></font>... mais je ne l'ai pas fait. Pourquoi me direz-vous ? Parce que les normes actuelles du web (voir les standards du W3C), poussent les créateurs de sites web à utiliser les CSS plutôt que ces balises html de mise en forme, qui deviennent obsolètes. La ligne de code CSS, présente dans la feuille de style, est la suivante :
.code_source {color:blue}
Voilà une bien curieuse écriture ! Non seulement cette ligne a été placée sur une feuille externe, mais en plus, elle est constituée de symboles bizarres !
Cette écriture nous amène à parler d'une notion nouvelle, la notion de classe. Les classes se sont des trucs étranges qui permettent d'appeler certaines informations se trouvant dans la feuille de style, depuis notre feuille principale.
Par exemple, j'ai besoin tout de suite qu'un mot soit écrit en bleu. Je crée la ligne .code_source {color:blue} dans la feuille de style, et à l'emplacement où je souhaite afficher du texte en bleu, dans ma page principale, je lance un appel à cette classe qui s'appelle code_source.
Et comment je l'interpelle moi cette classe ?
Facile, j'écris dans ma page html : <p class="code_source">mon texte bleu</p>
Entre mes balises <p></p> j'ai mon texte ordinaire que je colore en bleu, en ajoutant les mots : class="le_nom_de_la_classe_que_j'appelle"
Ma classe s'appelle code_source (le point qui précède indique que c'est une classe) et toutes les informations que je vais mettre entre les crochets { } seront utisées quand la classe sera appelée.
On peut y indiquer des informations sur la taille des lettres ou sur une mise en gras du texte, pour espacer les lettres, etc... ce qui donnera par exemple, l'écriture CSS suivante :
.code_source {color:blue;font-size:16px;letter-spacing:2px}
En apprenant de nouvelles combinaisons de CSS, on peut ainsi mettre en page du texte de toutes les manières en jouant sur les couleurs, la taille, le souligné, l'espacement des lettres, le centrage du texte, l'intervalle avec le paragraphe suivant, etc.
Ces combinaisons ont été séparées par des points virgules. Ici le texte sera bleu, d'une taille de 16 pixels, et mes lettres espacées chacune de 2 pixels...
Dans cet exemple nous avons appelé notre classe à partir d'une balise html de type <p>, nous aurions pu l'appeler à partir d'une autre balise, comme la balise <span>, ce qui aurait donné : <span class="code_source">mon texte</span>
Nous avons utilisé volontairement des feuilles de style et des classes, mais vous pouvez choisir d'inclure directement un peu de CSS directement dans vos balises HTML, de la manière suivante :
<p style="font-size:13px;color:#365900">Mon texte</p>
Attention, des balises html comme <p>, <span> ou <h1> servent aux textes et fonctionnent parfaitement avec cette classe, par contre, je n'aurais pas eu le droit d'utiliser cette classe avec une balise html qui sert à autre chose que du texte. Par exemple la balise <div> sert à la création de bloc contenant de l'informations, je dois donc créer des classes avec du CSS qui lui convient (longueur, hauteur, couleur de fond, etc.)... Nous verrons cela plus en détails ultérieurement.
En utilisant une classe qui se trouvait dans notre feuille de style, nous avons compris que notre page principale va être allégée. Car si j'ai besoin d'écrire à plusieurs endroits en bleu, il me suffit simplement d'appeler à chaque fois la classe, sans avoir à la répéter douze fois dans ma page principale... ma page gagne donc en poids (ce qui est important, comme nous le verrons plus tard). De plus mon navigateur (Internet explorer, Firefox, Chrome, Safari...) aura mémorisé mes classes et les chargera rapidement, chaque fois que je les appelerai dans ma page html... Si vous comprenez ces deux notions de poids et de temps de chargement, vous avez tout compris de l'intérêt qu'il y a à utiliser les CSS.
Avec un peu de pratique, vous ne pourrez plus vous en passer et mettrai en forme toute une page web avec du CSS !... Mais avant cela, il faudra apprendre de nouvelles commandes CSS, comme si vous appreniez une nouvelle langue... Rassurez vous, une petite poignée suffit pour créer une belle page web :-)
Reproduction interdite - SITES-INTERNATIONAUX © 2024
Tutoriel CSS et feuille de style pour les débutants